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.