Cara Buat Footer Blog Seperti Detik.Com

Assalamualaikum blogger, kali ini saya ingin memberikan cara curang membuat footer seperti footer nya detik.com, Gampang ternyata, tidak terlalu susah. Permintaan tentang footer blog ini di awali oleh percakapan saya dengan Mas Febrianto Putra pemilik blog Center60.com yang ingin menggunakan footer. Kemudian beliau meminta saran kepada saya. Secara naluri saya langsung bilang footer nya detik.com itu keren. Tapi dengan jawaban santai mas febri mengatakan, "saya tidak bisa membuat nya mas".

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 demo silahkan anda lihat di blog demo saya. Lihat Demo Footer Blog Seperti Detik.com

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.

/* Footer
----------------------------------------------- */

.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;
}

Lalu cari bagian footer Pada tata Letak Seperti yang saya beri tanda merah di gambar ini

Lalu tambahkan gadget, kemudian pilih HTML/JavaScript dan masukkan kode ini

<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 &amp; 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 &amp; 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">&middot; Forum</a>  <br/> <a href="http://health.detik.com/indeks">&middot; 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">&middot; Directories</a>  <br/> <a href="http://travel.detik.com/indeks">&middot; 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 &amp;</a> <br/>  <a href="http://wolipop.detik.com/kanal/1132/home-and-family">· Home &amp; 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 &amp; 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.

Lalu Save dan Lihat Hasil nya.

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.

Terima kasih.

Labels: Blogger Tutorial