Cara Membuat Footer 3 Kolom

Cara Membuat Footer 3 Kolom

Posted by Kãñg.ĨlĥămẂǽ

Sunday, 4 December 2011

Tips Blogger

Assalamu'alaikum Wr. Wb. Oke, pada kesempatan kali ini saya akan menulis posting mengenai blog nih.. Udah lama gak share seputar blogger/blogspot. Yap, sebetulnya postingan ini telah lama di request oleh sobat-sobat bloggerPradisz. Namun, karena banyak faktor saya + malas saya untuk share tentang kode-kodean. Hehe..

Klik Untuk Memperbesar Gambar

Ya, untuk tutorial kali ini memang agak sedikit aneh sama title postnya. Memang ini mungkin model footer yang akan kita bahas sering sobat temukan pada blog ini. Saya mengambil dari berbagai inspirasi dari berbagai blog. Untuk hover pada navigasinya pun saya terinpirasi dari blognya o-om. Untuk warna abu-abu kegelapan itu merupakan warna kesukaan saya. Karena mungkin memang cocok aja..

Oke, langsung aja ya tanpa basa-basi untuk Cara Membuat Footer 3 Kolom Pada Blog. Caranya, mudah ikuti langkah-langkah dibawah ini.

1. Login ke Akun Blogger anda pastinya.
2. Kemudian, masuk ke "Template", lalu klik & Pilih "Edit HTML".
3. Pada tahap ini, anda cukup copypaste css dibawah ini tepat diatas kode ]]></b:skin> 

#footer {width:840px;position:relative;clear:both;margin:0;float:center;padding:5px 0 10px 0;text-align:left;color:#fff;background:#3b3b3b;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;}
#credits-footer {width:840px;float:center;margin:0 auto;padding:0px;clear:both;line-height:1.3em;letter-spacing:.0em;border-top:2px solid #fff;overflow:hidden;clear:both;padding:10px 0px 0px 0px;line-height: 1.6em;text-align:center;font-family: Verdana;font-size:12px;color:#fff;font-weight:bold;}
#footer a:link {color:#fff;text-decoration:none;}
#footer a:visited {color:#fff;text-decoration:none;}
#footer a:hover {color:#fff;text-decoration:underline;}
#footer h6 {color:#fff;font-family:Verdana;font-size:14px;font-weight:normal;line-height:1em;text-transform:uppercase;margin-top:20px;margin-right:10px;padding:0 0 5px;color:#fff;border-bottom:2px solid #fff;}
#footer ul {padding:0; margin:0; color:#fff;}
#footer ul li {list-style-type:square;padding-left:2px; margin:3px 0 0 22px;}
#footer-left {width:290px; float:left; margin-left:20px;margin-bottom:20px;}
#footer-center {width:185px; float:left; margin-left:20px;margin-bottom:20px;}
#footer-right {width:300px; float:left; padding:0 5px 0 20px;margin-bottom:20px;}

4. Setelah itu, copypaste kode html dibawah ini tepat diatas kode </body>

<div id='footer'>
<b:section class='footer' id='footer-left' preferred='yes' showaddelement='yes'/>
<b:section class='footer' id='footer-center' preferred='yes' showaddelement='yes' style='text-decoration:none;'/>
<b:section class='footer' id='footer-right' preferred='yes' showaddelement='yes'/>
<br/>
<div id='credits-footer'> Copyright &#169; 2011 - <a href='#' title='#'>Your Title Blog Here !</a> All Rights Reserved
</div>
</div>

5. Save Template/Simpan.

Selesai, Semoga berhasil.

Catatan : Silahkan sobat ubah sesuaikan dengan blognya, dan kreasikan dengan lebih baik lagi.

Semoga bermanfaat.
Wassalamu'alaikum Wr. Wb.