18 Membuat footer 3 kolom berbackground

Setelah sebelumnya saya pernah posting Membuat Footer 3 kolom kali ini saya akan bahas lagi trik tersebut" Bedanya footer ini berbackground, karena banyak sobat yang bertanya bagaimana membuat footer berbackground seperti di blog ini, caranyanya hampir sama seperti sebelumnya,karena hanya diperlukan tambahan CSS,lihat contoh gambar berikut untuk lebih jelas :D

1.Login ke Blogger.com
2.Tuju ke Rancangan -> Edit HTML Backup dulu templatenya,Jangan beri centang expand template widget 
3.Cari kode ]]></b:skin>          
4.Letakkan CSS berikut diatasnya kode ]]></b:skin>
 

#bottom{background:#444 url(http://img169.imageshack.us/img169/937/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:210px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:330px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}

#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}

5. Cari <!-- end content-wrapper --> atau lebih umumnya </div> <!-- end content-wrapper-->


6. Letakkan kode berikut diatasnya kode </div> <!-- end content-wrapper-->

<div id='bottom'>

<b:section class='category' id='category'/>
 
<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>
   
</div>

Simpan template dan selesai" mudahkan? kalau ada yang gak dimengerti, tanya aja dengan berkomentar,karena trik ini saya dapatkan dari pengalaman pribadi, insyallah saya akan bantu :)

Label: Blogger, Tutorial Blog