Cara Membuat 3 Kolom Footer Pada Blog

Sudah lama saya tidak pernah memosting artikel tentang Blogger, dan pada kesempatan kali ini saya akan mengulas tentang Bagaimana Cara Membuat 3 Kolom Footer Pada Blog. 3 Kolom Footer Pada Blog adalah sebuah tempat widget yang berada dibawah artikel dan tepat diatas Footer pada blog, sebenarnya 3 Kolom Footer sudah terdapat pada template yang sudah disediakan oleh pihak Blogger, jika template anda tidak terdapat 3 kolom footer termasuk template saya, silahkan Follow langkah berikut.



LANGKAH :

• Pertama anda login ke Blogger.
• Pilih menu Template >> Edit HTML.
• Jangan lupa anda mengbackup  data template anda supaya untuk menghindari hal-hal yang tidak diinginkan.
• Setelah itu centang tombol Expand Template Widget.
• Setelah itu cari kode ]]></b:skin>.
• Setelah itu silahkan Copy kode berikut tepat berada diatas kode ]]></b:skin>.

#tiga-kotak-bawah { clear:both; border-top:3px double #e6e4e3; } .kolom-kotak { padding:0px 10px 10px 10px; }

• Setelah itu cari kode yang hampir sama dengan kode berikut :

Kode 1 :

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

• Jika kode tersebut tidak tersedia pada template anda, silahkan saja ceri kode berikut :

Kode 2 :

<!-- end outer-wrapper -->

• Atau kode berikut :

Kode 3 :

<div id='footer'>

• Jika sudah silahkan pilih sesuai kode yang terdapat pada template anda :
• Jika anda menemukan Kode 1 maka Ganti kode <b:section class='footer' id='footer'/> dengan kode dibawah ini.
• Jika anda menemukan Kode 2 dan Kode 3, maka Copy kode berikut tepat diatas kode tersebut.

<div id='tiga-kotak-bawah'> <div id='kotak1' style='width: 33%; float:left; margin:0; text-align: left;'> <b:section class='kolom-kotak section' id='kol1' preferred='yes' style='float:left;'/> </div> <div id='kotak2' style='width: 33%; float:left; margin:0; text-align: left;'> <b:section class='kolom-kotak section' id='kol2' preferred='yes' style='float:left;'/> </div> <div id='kotak3' style='width: 33%; float:left; margin:0; text-align: left;'> <b:section class='kolom-kotak section' id='kol3' preferred='yes' style='float:left;'/> </div> <div style='clear:both;'/> </div>
• Dan langkah terakhir, silahka Simpan / Save hasil kerja anda.

Jika anda sudah mengikuti LANGKAH diatas akan terlihat sebagai berikut :

SCRENSHOOT From KORANSOFTWARE :

SEMOGA BERMANFAAT DAN BERHASIL ^_^
Tested by Author With Template Sobatsoftware
 

---

Mari Kita Saling Menghargai Sesama Blogger Apabila Artikel ini bermanfaat, silahkan saja di share dimanapun. Dengan catatan anda harus menyertakan link sumbernya. Terima Kasih WWW.SOBATSOFTWARE.NET ^_^

---

Related Posts / Artikel Terkait :

Widget by Hoctro | Jack Book

Posted in: Blogger