Sunday, October 30, 2011

Membuat Footer 3 Kolom ala OOM

Tags

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 :)

16 comments

@Wandhy
Bisa di ganti Collor nya ? ngga ?

@Wandhy Terimakasih, Semoga berguna yah

@Twins-X Bisa kok diganti sesuai selera nya masing-masing

Muhammad rifki dan blog-full-version : Untuk yang langkah 4, silahkan cari kode seperti ini gan : <!-- end content-wrapper -->

mar'i : tuh udah ada footer 3 kolom dipunya kamu, ngapain dibikin lagi ?
ntar ketimpa, jadi blognya jelek

dibuat empat kolom kira2 bisa tidak ya?
kalau menurut saya 3 kolom rasanya kurang
terimakasih

koq nggak ada kode yang step ke empat itu kak...?

jadi mantaf skrg footer blog saya..thanks

Mantap mas bro, thanks for sharing, happy blogging

1. Berkomentar lah dengan sopan dan santun
2. No Spam No Live link dan tidak ada Link Mati
3. Free Backlink (Dofollow) dari blog berPagerank 2 ini


EmoticonEmoticon