KliniKomputer

Footer 3 Kolom dengan Background

Cara-Cara Membuat Footer 3 Kolom ala OOM

1. Login ke blogger.com
2. Tuju ke Rancangan -> Edit HTML Ba,Jangan beri centang expand template widget 
3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA80hfhNAwmRI4IHR8a0ROhy4Obj9jLV2J5aGLMkqAkS-xB7U7RDqePBVul-5EYXvE-3m4PnihzSZ4gjFszWmQmF8TuuI0XPsdGTHkGeWTVd62Y5qKbNL3ja2CW9g2-Dq0cOvvZzHmt-Zt/s1600/buttommenu-c.png) 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}

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

5. 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>

6. Simpan