Membuat Footer 3 Kolom Dengan Background ala O-om

Met pagi sobat blogger, pagi ini saya akan membahas lagi pastinya tentang blogging, yaitu cara membuat/menambahkan 3 kolom di halaman foter dengan background. pastinya membuat lebih bayak ruang di blog kita, dan lagi dengan adanya penambahan halaman/kolom di foter ini, kita bisa menaruh widget yg lumayan berat loadingnya ke halaman foter tersebut, lumayan lho buat memperkecil berat loading blog... yang pasti di bandingkan ditaruh di sidebar dengan di halaman foter itu berbeda. [itu menurut pengalaman saya]... selebihnya sobat bisa buktikan sendiri.
Berikut contoh screenshotnya:

Screenshot

Berikut cara membuatnya:

• Login ke akun blogger sobat
• Masuk ke Rancangan/Design
• Edit HTML
• Beri centang "Expand Widget Templates"
• Jangan lupa, Back Up dulu template sobat! Klik "Download Full Template"
• Lalu cari kode berikut: ]]></b:skin>
• Letakan kode berikut tepat diatas kode ]]></b:skin>

#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7pYbxCQLXqqYwj2dJo2cQc2Bi_p-0veKyRUdtJgjqgmqSHBA1zXmNNwDGtt63DJgu_IqjSkVnvmfjB-OwFbMOeMBe5W4m6k3P9A2lhYUF5qC_YQxika5QjVHisuYzeGeUMJvCVHCi1Jr/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:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; 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}

Penting!!
Perhatikan text yg saya beri warna pada kode diatas (harap disesuaikan semuanya dengan template sobat)
Warna merah: itu adalah link background, bisa sobat ganti sesuai kemauan sobat.
Warna hijau: itu adalah lebar dari template sobat, setelah sobat memasangnya bila masih kurang rapi, bisa sobat utak-utik sendiri lebarnya sampai seperti yang sobat harapkan.
Warna orange: itu adalah keterangan dari masing2 kolom. biar jelas saya beri warna.
Belum selesai sobb... lanjut...

• Carilah kode: <!-- end content-wrapper --> atau </div> <!-- end content-wrapper-->
• Letakan kode berikut diatas 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 lihat hasilnya.

Sippp... selamat mencoba dan semoga bermanfaat... Salam blogging \m/

Terima kasih sudah singgah di blog ID CREATIVE   «« jangan lupa tinggalkan komentarnya "thanks.