Cara Membuat Multi Kolom Pada Footer

Tutorial berikut sebenarnya cuma sebagai pendukung dari tutorial nanti yang akan saya bahas. artikel berikut diambil dari blog master blogger yaitu kang rohman yang kebetulan sekali akan mendukung artikel yang saya bahas selanjutnya..

Berikut langkah2nya untuk membuat multi kolom pada footer yang hasilnya kurang lebih seperti gambar diatas atau anda bisa melihat demonya disini 
  •  Login ke blogger.com
  • Kemudian tata letak
  • Pilih Edit HTML
  • Kali ini tidak usah Centang Expand Widget (rasiqzone merekomendasikan)  
  • Copas kode berikut diatas kode ]]></b:skin>
/* bottom
---------------------------- */

#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom { /* yang ini nih kode kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}

#center-bottom { /* kalo yg ini kode kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}

#right-bottom { /* kalo yg ini kode kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}
  • Kemudian Copas kode berikut diatas kode <div id='footer-wrapper'>
<div id='bottom'>
<b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
  • Selanjutnya Save Template
Note:
  • Untuk warna background ganti dengan keinginan Anda. untuk melihat kode warna disini
  • Sekedar sharing: artikel yang akan posting nanti itu, Anda bisa melihat demonya disini (pada footer)
Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

18 comments:

  1. pertamaxxx... mantaff mas....

    ReplyDelete
  2. hahahaha...saya kira dapet pertamax...ternyata dikandangin dl komengnya..

    mantaff sob...

    ReplyDelete
  3. assalamualaikum..terima kasih atas ilmunya sobat

    ReplyDelete
  4. Mantaps sob triknya... Tengkyu

    ReplyDelete
  5. @All: makasih apresiasinya sob...

    ReplyDelete
  6. mantab sob tipsnya. .
    thanks. .

    "terima kasih"

    ReplyDelete
  7. dicoba mas tutorialnya :j:

    ReplyDelete
  8. Dicoba mas tutorialnya :j:

    ReplyDelete
  9. @aditx: silahkan sob..

    ReplyDelete
  10. makasih sob artikelnya....

    ReplyDelete
  11. http://i550.photobucket.com/albums/ii403/Aditx/fizi01.gif
    Okelah so mantabs.............

    ReplyDelete
  12. @tukang: sama2 sob..
    @soefyan: maksih apresiasinya..

    ReplyDelete
  13. kalau tidak 3 kolom tpi hanya ingin menambah 1 kolom diatas footer gimana bro ? :a: mohon bantuannya

    ReplyDelete
  14. bos kalo kolomnya dibuat berdiri, gimana bikinnya, gak tiduran kayak tutorial diatas , abis enakan berdiriht :w:

    ReplyDelete
  15. sory boss salah liat di edit elemennya, gak nyimak dengan teliti, maap http://i977.photobucket.com/albums/ae255/h3n6r4/Others/acdgfq.gif

    ReplyDelete
  16. so mantab bro....so buat qt2 trada tau so pintar toh?!!!:v:

    ReplyDelete
  17. wah lagi lagi mantap ni infonya!

    ReplyDelete