BIKIN FOOTER TAMBAHAN

Default footer pada templates "MINIMA" dari blogspot cuma 1 kolom. Sekarang kita akan belajar bagaimana menambahkan footer baru, biar ada tiga (3) footer. Kalau ada yang tertinggal tutorial sebelum-nya... kali ini tidak apa-apa langsung baca tutorial ini tanpa baca tutoial sebelumnya... Sekarang cari script CSS footer dari templates MINIMA, script-nya seperti ini:

/* Footer
----------------------------------------------- */
#footer {
width:660px
clear:both
margin:0 auto
padding-top:15px
line-height: 1.6em
text-transform:uppercase
letter-spacing:.1em
text-align: center
}

Tulisan yang saya warnai merah itu lebar bungkus yang akan kita ubah.



Maka ubah dan tambahkan script menjadi seperti ini:

/* footer Column */

#footer {
width: 925px
position: relative
clear:both
margin: 0 auto 10px
color:#000
float: left
padding: 0
}

#left-footer{
width: 295px
float: left
margin-left:10px
padding-top: 10px
background:#f7f7f7
border:1px solid #FFFFFF
}

#middle-footer {
width: 299px
margin-left:10px
float: left
padding-top: 10px
background:#f7f7f7
border:1px solid #FFFFFF
}

#right-footer {
width: 295px
margin-left:10px
float: right
padding-top: 10px
background:#f7f7f7
border:1px solid #FFFFFF
}

script yang saya warnai merah itu yang diubah menjadi seperti itu dan script yang warna biru itu yang ditambahkan. Dari bahasa-nya Anda pasti ngerti kan!? left itu apa middle itu apa dan right itu apa.. Itu untuk penempatan layout-nya.


Dan sekarang cari-lah script XML-nya, seperti ini:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Ubah dan tambahkan script di atas menjadi seperti ini:

<div id='footer-wrapper'>
<b:section class='footer' id='left-footer'/>
<b:section class='footer' id='middle-footer'/> <b:section class='footer' id='right-footer'/>
</div>

Tulisan yang saya beri warna hijau itu-lah script tambahannya. Sekarang coba save dan lihat hasil-nya dengan view blog. Sekarang di footer Anda sudah ada tiga footer dengan warna background abu-abu, karena tadi di script CSS-nya disetting warna abu-abu.


Semoga bermanfaat.

Related Posts by Categories