Lalu saya akan membantu untuk memberikan solusi terbaik mengenai itu, oleh sebab itu lah artikel ini keluar.
Oke baik lah, saya senang sekali bisa membahas blogger tutorial ini, karena menurut saya cara yang saya terapkan untuk meniru footer ala detik.com untuk blog ternyata agak mudah.
Untuk pengembangan kasus dan kode kode nya anda bisa terapkan dengan mengikuti instruksi yang saya berikan dibawah ini. Dan semoga bermanfaat.
Pertama tama mulai lah dengan Bismillah.
Kemudian cari kode seperti ini ]]></b:skin>
letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi.
/* FooterLalu cari bagian footer Pada tata Letak Seperti yang saya beri tanda merah di gambar ini
----------------------------------------------- */
.foot_2 {
background: #002654;
padding: 15px 15px 15px 15px;
text-align: left;
width: 950px;
}
.container2 {
width: 950px;
margin: auto;
}
.foot_2 .satu {
width: 130px;
float: left;
padding-right: 20px;
}
#kanal {
float: left;
width: 800px;
}
.link_bot ul {
list-style: none;
margin: 0;
padding: 0;
height: 155px;
overflow: hidden;
}
.link_bot li {
color: #b8b8b8;
font-family: CartoGothic, Arial, Tahoma, Geneva, sans-serif;
font-size: 11px;
margin-right: 10px;
height: 22px;
float: left;
width: 100px;
height: 155px;
}
#more_kanal {
display: block;
border-top: 1px dotted #3b5774;
padding-top: 3px;
margin-top: 5px;
font-weight: bold;
color: #999;
cursor: pointer;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.fl {
float: left;
}
#more_kanal {
font-weight: bold;
color: #999;
cursor: pointer;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#kanal {
float: left;
width: 800px;
}
.foot_4 {
border-top: 2px solid #3b5774;
background: none;
text-align: left;
margin-top: 10px;
}
.link_bot2 {
color: #666;
font-family: CartoGothic, Tahoma, Geneva, sans-serif;
font-size: 11px;
padding: 5px 0;
}
.link_bot2 a {
display: inline-block;
padding: 0px 5px;
color: #CCC !important;
text-decoration: none;
}
.copyright {
color: #ccc;
border-top: 1px dotted #3b5774;
margin: 0;
padding-left: 5px;
}
.link_bot strong a {
display: block;
font-size: 11px;
padding-bottom: 3px;
color: #ffffff !important;
float: left;
width: 100px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.widget ul li, .widget #ArchiveList ul.flat li {
padding: .35em 0;
text-indent: 0;
}
<div class="foot_2">
<div class="container2">
<div class="satu"><a target="_blank" href="http://apps.detik.com/"><img alt="" src="http://detik.net.id/detik/image/appcom.png" /></a></div>
<div class="link_bot" id="kanal">
<div class="caroufredsel_wrapper" style="position: relative; overflow: hidden; margin: 0px; width: 770px; height: 155px;"><ul id="slide_kanal" style="margin: 0px; float: none; position: absolute; width: 2420px; height: 155px;">
<li><strong> <a href="http://news.detik.com">detikNews</a> </strong> <a href="http://news.detik.com/kanal/10/berita">· Berita</a> <br/> <a href="http://news.detik.com/kanal/1148/internasional">· Internasional</a> <br/> <a href="http://news.detik.com/kanal/103/kolom">· Kolom</a> <br/> <a href="http://news.detik.com/kanal/158/wawancara">· Wawancara</a> <br/> <a href="http://news.detik.com/kanal/159/laporan-khusus">· Lapsus</a> <br/> <a href="http://news.detik.com/kanal/608/tokoh">· Tokoh</a> <br/> <a href="http://news.detik.com/prokontra">· Pro Kontra</a> <br/> <a href="http://news.detik.com/indekstokoh/A/1">· Profil</a> <br/> <a href="http://news.detik.com/indeks">· Indeks</a></li>
<li><strong> <a href="http://sport.detik.com">detikSport</a> </strong> <a href="http://sport.detik.com/kanal/78/basket">· Basket</a> <br/> <a href="http://sport.detik.com/kanal/81/moto-gp">· MotoGP</a> <br/> <a href="http://sport.detik.com/kanal/80/f1">· F1</a> <br/> <a href="http://sport.detik.com/kanal/79/raket">· Raket</a> <br/> <a href="http://sport.detik.com/sepakbola/">· Sepakbola</a> <br/> <a href="http://sport.detik.com/kanal/82/sport-lain">· Sport Lain</a> <br/> <a href="http://sport.detik.com/foto">· Galeri</a> <br/> <a href="http://sport.detik.com/indekstokoh/A/1">· Profil</a> <br/> <a href="http://sport.detik.com/fansarea">· Fans Area</a> <br/> <a href="http://sport.detik.com/indeks">· Indeks</a></li>
<li><strong> <a href="http://sport.detik.com/sepakbola">Sepakbola</a> </strong> <a href="http://sport.detik.com/sepakbola/kanal/71/italia">· Italia</a> <br/> <a href="http://sport.detik.com/sepakbola/kanal/72/inggris">· Inggris</a> <br/> <a href="http://sport.detik.com/sepakbola/kanal/75/spanyol">· Spanyol</a> <br/> <a href="http://sport.detik.com/sepakbola/kanal/74/jerman">· Jerman</a> <br/> <a href="http://sport.detik.com/sepakbola/kanal/76/indonesia">· Indonesia</a> <br/> <a href="http://sport.detik.com/sepakbola/kanal/1033/uefa">· Uefa</a> <br/> <a href="http://sport.detik.com/sepakbola/kanal/73/bola-dunia">· Bola Dunia</a> <br/> <a href="http://sport.detik.com/sepakbola/fansarea">· Fans Area</a> <br/> <a href="http://sport.detik.com/sepakbola/indeks">· Indeks</a></li>
<li><strong> <a href="http://oto.detik.com">detikOto</a> </strong> <a href="http://oto.detik.com/kanal/1207/berita-mobil">· Mobil</a> <br/> <a href="http://oto.detik.com/kanal/1208/berita-motor">· Motor</a> <br/><a href="http://oto.detik.com/kanal/642/pojok-modifikasi">· Modifikasi</a> <br/> <a href="http://oto.detik.com/kanal/641/tipsntrik">· Tips & Trik</a> <br/> <a href="http://oto.detik.com/konsultasi">· Konsultasi</a> <br/><a href="http://oto.detik.com/kanal/1219/komunitas">· Komunitas</a> <br/> <a href="http://oto.detik.com/foto">· Galeri</a> <br/> <a href="http://oto.detik.com/video">· Video</a> <br/> <a href="http://forum.detik.com/otomotif-f32.html">· Forum</a> <br/> <a href="http://oto.detik.com/indeks">· Indeks</a></li>
<li><strong> <a href="http://hot.detik.com">detikHot</a> </strong> <a href="http://hot.detik.com/kanal/208/celebs">· Celebs</a> <br/> <a href="http://hot.detik.com/music/">· Music</a> <br/> <a href="http://hot.detik.com/movie/">· Movie</a> <br/> <a href="http://hot.detik.com/kanal/1017/art">· Art</a> <br/> <a href="http://hot.detik.com/foto">· Gallery</a> <br/><a href="http://hot.detik.com/indekstokoh/A/1">· Profile</a> <br/> <a href="http://hot.detik.com/music/kpop">· KPOP</a> <br/> <a href="http://forum.detik.com/forumdisplay.php?f=13">· Forum</a> <br/> <a href="http://hot.detik.com/indeks">· Indeks</a></li>
<li><strong> <a href="http://inet.detik.com">detikInet</a> </strong> <a href="http://inet.detik.com/kanal/1010/news">· News</a> <br/> <a href="http://inet.detik.com/kanal/1011/gadget">· Gadget</a> <br/> <a href="http://inet.detik.com/kanal/653/games">· Games</a> <br/> <a href="http://inet.detik.com/fotostop">· Fotostop</a> <br/> <a href="http://inet.detik.com/klinikit">· Klinik IT</a> <br/> <a href="http://inet.detik.com/kanal/1151/ngopi">· Ngopi</a> <br/> <a href="http://inet.detik.com/adsprodukpilihan">· Produk Pilihan</a> <br/> <a href="http://forum.detik.com/forum-net-new-f21.html">· Forum</a> <br/> <a href="http://inet.detik.com/indeks/">· Indeks</a></li>
<li><strong> <a href="http://finance.detik.com">detikFinance</a> </strong> <a href="http://finance.detik.com/kanal/4/ekonomi">· Ekonomi Bisnis</a> <br/> <a href="http://finance.detik.com/kanal/1035/finansial">· Finansial</a> <br/> <a href="http://finance.detik.com/kanal/1016/properti">· Properti</a> <br/> <a href="http://finance.detik.com/kanal/68/sosok">· Sosok</a> <br/> <a href="http://finance.detik.com/kanal/480/peluang-usaha">· Peluang Usaha</a> <br/> <a href="http://finance.detik.com/kanal/688/pajak">· Pajak</a> <br/> <a href="http://finance.detik.com/konsultasi/458/perencanaan-keuangan">· Konsultasi</a> <br/> <a href="http://finance.detik.com/foto">· Foto</a> <br/> <a href="http://finance.detik.com/video">· TV</a> <br/> <a href="http://finance.detik.com/indeks">· Indeks</a></li>
<li><strong> <a href="http://health.detik.com">detikHealth</a> </strong> <a href="http://health.detik.com/kanal/1441/health-news">· Health News</a> <br/> <a href="http://health.detik.com/kanal/1389/">·Health</a> <br/> <a href="http://health.detik.com/kanal/1409/diet">· Diet</a> <br/><a href="http://health.detik.com/kanal/1074/ibu-anak">· Ibu & Anak</a> <br/> <a href="http://health.detik.com/kanal/757/konsultasi">· Konsultasi</a> <br/> <a href="http://health.detik.com/healthcalculator">· Health Calculator</a> <br/> <a href="http://health.detik.com/fotobalitaanda">· Foto Balita</a> <br/><a href="http://health.detik.com/banknamabayi">· Bank Nama Bayi</a><br/> <!--<a href="http://forum.detikhealth.com">· Forum</a> <br/> <a href="http://health.detik.com/indeks">· Indeks</a>--></li>
<li><strong> <a href="http://travel.detik.com">detikTravel</a> </strong> <a href="http://travel.detik.com/kanal/1382/travel-news">· Travel News</a> <br/> <a href="http://travel.detik.com/kanal/1383/destinations">· Destinations</a> <br/> <a href="http://travel.detik.com/kanal/1026/dtravelers-photos">· Photos</a> <br/> <a href="http://travel.detik.com/dtrips">· d'Trips</a> <br/> <a href="http://hotels.travel.detik.com">· Hotels</a> <br/> <a href="http://flights.travel.detik.com">· Flights</a> <br/> <a href="http://travel.detik.com/aci/">· ACI</a> <br/> <a href="http://travel.detik.com/kanal/1025/ceritaperjalanan">· d'Travelers Stories</a> <br/> <!--<a href="http://travel.detik.com/directory">· Directories</a> <br/> <a href="http://travel.detik.com/indeks">· Index</a>--></li>
<li><strong> <a href="http://wolipop.detik.com">Wolipop</a> </strong><a href="http://wolipop.detik.com/kanal/836/fashion">· Fashion</a> <br/> <a href="http://wolipop.detik.com/hotphotos">· Photos</a> <br/><a href="http://wolipop.detik.com/kanal/837/beauty">· Beauty</a> <br/> <a href="http://wolipop.detik.com/kanal/838/love">· Love &</a> <br/> <a href="http://wolipop.detik.com/kanal/1132/home-and-family">· Home & Family</a> <br/> <a href="http://wolipop.detik.com/kanal/839/wedding">· Wedding</a> <br/><a href="http://wolipop.detik.com/kanal/1134/entertainment">· Entertainment</a> <br/> <a href="http://wolipop.detik.com/kanal/1009/sale-and-shop">· Sale & Shop</a> <br/> <a href="http://wolipop.detik.com/kanal/840/hot-guide">· Hot Guide</a> <br/> <a href="http://wolipop.detik.com/dlounge">· d'Lounge</a> <br/> <a href="http://wolipop.detik.com/index">· Indeks</a></li>
<li><strong> <a href="http://food.detik.com">detikFood</a> </strong> <a href="http://food.detik.com/kanal/285/resep-pilihan?">· Resep</a> <br/> <a href="http://food.detik.com/kanal/286/tempat-makan?">· Tempat Makan</a> <br/><a href="http://food.detik.com/kanal/293/kabar-kuliner?">· Kabar Kuliner</a> <br/> <a href="http://food.detik.com/kanal/905/makanan-halal?">· Halal</a> <br/><a href="http://food.detik.com/komunitas?">· Komunitas</a> <br/> <a href="http://forum.detikfood.com/food-f33.html?">· Forum</a> <br/> <a href="http://food.detik.com/konsultasi?">· Konsultasi</a> <br/> <a href="http://food.detik.com/galeri?">· Galeri</a> <br/> <a href="http://food.detik.com/indeks?">· Indeks</a></li>
</ul></div>
<div class="clearfix"></div>
<span id="more_kanal"> <span class="fl"><a href="#top">Back to Top</a></span> <span class="more_kanal_2"><a id="k_prev" href="#" class="disabled">« Kanal Lainnya</a></span>
<div class="clearfix"></div>
</span></div>
<div class="clearfix"></div>
<div class="foot_4">
<div class="link_bot2"><a href="http://iklanbaris.detik.com/">Iklan Baris</a> · <a href="http://blog.detik.com/">Blog</a> · <a href="http://forum.detik.com/">Forum</a> · <a href="http://adpoint.detik.com/">adPoint</a> · <a href="http://microsite.detik.com/template-etalase-seremonial/copyright/seremonial/about.html">Seremonia</a> · <a href="http://sindikasiberita.detik.com/">Sindikasi</a> · <a href="http://infoiklan.detik.com/">Info Iklan</a> · <a href="http://suarapembaca.detik.com/">Suara Pembaca</a> · <a href="http://suratbuncit.detik.com/">Surat dari Buncit</a> · <a href="http://tv.detik.com/">detikTV</a> · <a href="http://alamatku.com/">Cari Alamat</a></div>
<div class="link_bot2 copyright">Copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script>2013 detikcom, All Rights Reserved · <a href="http://dapur.detik.com/inside/1/redaksi">Redaksi</a> · <a href="http://dapur.detik.com/inside/2/pedoman-media-siber">Pedoman Media Siber</a> · <a href="http://microsite.detik.com/vacancy/">Karir</a> · <a href="http://dapur.detik.com/inside/3/kotakpos">Kotak Pos</a> · <a href="http://infoiklan.detik.com/?fuseaction=home.service">Info Iklan</a> · <a href="http://dapur.detik.com/inside/6/disclaimer">Disclaimer</a><!-- #*#FOLLOW#*# --></div>
<div class="clearfix"></div>
</div>
</div>
</div>
Catatan:
- Ganti Kode URL dan cari lah URL seperti contoh kode ini <strong><a href="http://food.detik.com">detikFood</a></strong> sesuai kebutuhan blog anda.
- Dan ganti lah Setiap URL di kode tersebut dengan URL blog anda ataupun yang terkait.
- Cari URL ini. yang telah saya beri tanda warna orange di dalam kode berikut ini http://detik.net.id/detik/image/appcom.png. Itu merupakan image untuk mengganti logo detik.com dan gantilah dengan logo atau image blog anda.
Saya rasa cukup seperti itu, kalau ada pertanyaan ataupun kesulitan dalam mengembangkan kode tersebut silahkan tinggalkan komentar atau email saya. Dan saya memohon maaf apabila di dalam pembuatan artikel ini kurang rapi dan kurang nyaman di lihat.
Saya tidak bertanggung jawab apabila pihak detik.com menuntut blog anda karena telah meniru footer situs mereka. Saran saya editlah sedikit agar berbeda dari yang asli.
