Cara Membuat Footer 3 Kolom

Posted by Gani Mugni Senin, 05 Desember 2011 0 komentar
Assalamu'alaikum Wr. Wb. Oke, pada kesempatan kali ini Fullka Dot akan menulis posting mengenai blog nih.. Akhirnya Share lagi di seputar blogger/blogspot. Yap, sebetulnya postingan ini telah lama di Request oleh sobat-sobat Blogger Pradisz. Namun, karena banyak faktor saya + malas saya untuk share tentang kode-kodean. Hehe..


Cara Membuat Footer 3 Kolom Pada Blog - Style PradiszWardhana.com
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.



TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Footer 3 Kolom
Ditulis oleh Gani Mugni
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/12/cara-membuat-footer-3-kolom.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.