4 Membuat Footer 3 Kolom ala OOM

Lama 4JIE gak update blog. Hal itu dikarenakan kesibukan admin yang begitu padat sehingga tidak dapat lebih lama memanjakan blog ini. Kalau sebelumnya admin udah pernah singgung tentang cara membuat Menu Navigasi Dropdwon al OOM dot com, maka kali ini gantian. Admin akan share cara membuat footer 3 kolom ala OOM. Untuk melihat demo, silahkan liat bagian footer blog ini. Footer yang satu ini sedikit berbeda, karena footer memiliki background. Pasti menambah daya tarik blog kamu.

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(http://4.bp.blogspot.com/_C6KkooKXCEw/TICgrtGXyRI/AAAAAAAAGzU/enOVeXD63p0/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

Keterangan !
Teks berwarna biru : Link gambar untuk background footer
Teks bercetak tebal : Lebar footer yang akan dibuat, silahkan disesuaikan dengan lebar footer blog kamu :)

Mohon untuk tidak melakukan tindakan SPAM, dan untuk tidak meninggalkan link hidup/link mati blog kamu dikomentar. Saya akan berikan komentar saya jika kamu juga dapat menghargai blog saya dengan tidak meninggalkan LINK dalam bentuk apapun !

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari 4JIE BLOG di inbox anda: