Anda pengguna template tata letak blogger?? atau minima lovers?? Karena pihak blogspot hanya menyediakan 1 kolom untuk footer, Kali ini saya akan beritahu bagaimana cara Membuat Footer 3 Kolom Plus Background. Baiklah sob, tanpa berlama lama dan bertele-tele, kita langsung saja ke cara buatnya.
1. Pertama, login ke blogger
2. Klik Rancangan -->Edit HTML (Jangan Centang "Expand Template Widget")
3. Cari kode ]]></b:skin>
4. Letakkan kode CSS berikut ini diatas ]]></b:skin>
2. Klik Rancangan -->Edit HTML (Jangan Centang "Expand Template Widget")
3. Cari kode ]]></b:skin>
4. Letakkan kode CSS berikut ini diatas ]]></b:skin>
#footer-column-container {
clear:both;
}
.footer-column {
background:#000000 url(Url gambar sobat) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}
clear:both;
}
.footer-column {
background:#000000 url(Url gambar sobat) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}
5.Cari Kode <!-- end content-wrapper --> dan letakkan kode dibawah ini tepat diatasnya
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>
6.Simpan Template
Tulisan yang berwarna biru di ganti dengan URL gambar sobat (Jika perlu)
sekian postingnya!!
2 comments
Write commentsbang, kode tidak ada pada blogku.. apa solusinya bang...?? trimakasih
ReplyGak ada demo nya bro? Kalau ada demo nya, makin mantab nih postingan. :D
ReplyEmoticonEmoticon