Cara Membuat Footer 2 kolom

Senin, 18 Februari 20130 komentar

Footer adalah kolom widget yang biasa berada paling bawah di bagian blog, dan tentunya sobat bisa mengisinya dengan berbagai widget yang sobat inginkan. Kali ini saya akan memberikan tutorial bagaimana caranya membuat dan memasang footer 2 (dua) kolom diblog dengan fungsi bisa langsung tambah gadget atau Add Gadget tanpa harus susah-susah membuat atau menambah kolom lagi. Karena sobat bisa langsung tambah gadget di atas atau di bawah kolom widget yang sobat inginkan.

 Untuk lebih jelasnya sobat bisa melihat contoh gambar screenshot berikut di bawah ini.
Cara Membuat Footer 2 (Dua) Kolom Di Blog

 Keterangan dari gambar di atas adalah tampilan yang terlihat pada bagian tata letak blog yang sudah di pasangi footer 2 (dua) kolom. Lihat gambar yang sudah saya kasih lingkaran warna merah. Jadi sangat gampang untuk tambah gadget, Karena sobat hanya tinggal klik tambah gadget atau add gadget saja bila ingin mengisinya dengan widget blog yang sobat inginkan.

 Untuk cara membuat dan memasang footer 2 (dua) kolom di blog, caranya sangat mudah. Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
  1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.
  2. Pilih blog, Lalu pada Dashboard pilih menu Template.
  3. Sebelum sobat klik Edit HTML, Ada baiknya sobat Unduh template lengkap, Guna untuk berjaga-jaga jika ada kesalahan saat Edit HTML dan sobat bisa mengembalikan template seperti semula. Caranya klik >> Cadangkan / Pulihkan (Tombol berada di bagian kanan atas)>> Unduh template lengkap. Jika sudah di unduh, silahkan klik tutup atau close.
  4. Sekarang kita kebagian Edit HTML. Silahkan sobat klik >> Edit HTML >> Lanjutkan >> Centang"Expand Template Widget".
  5. Jika sudah, Silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL + F untuk mempermudah pencarian).
  6. Kemudian tambahkan semua kode berikut diatas atau sebelum kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

7. Langkah yang selanjutnya, Sobat cari kode berikut di bawah ini. (Gunakan CTRL + F kembali untuk mempercepat pencarian). Cari salah satu kode saja.

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/></div>

8. Jika sudah ketemu, Kemudian sobat tambahkan kode berikut dibawah atau sesudah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Catatan:
Jika pada template yang sobat gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode-nya dibawah atau sesudah kode <div id='footer'>


9. Sebelum sobat klik Simpan, Ada baiknya klik dulu Preview atau pratinjau. Jika tidak terjadi eror pada template blog sobat, Langkah yang terakhir silahkan sobat klik Simpan template.

10. Selesai dan lihat hasilnya pada Dashboard Tata letak blog sobat. Jika sudah seperti yang ada pada contoh gambar screenshot diatas, Berarti sobat sudah berhasil Membuat Dan Memasang Footer 2 (Dua) Kolom Di Blog sobat.

Share this article :

Posting Komentar

 
Support : Zv-eLite | TipSeoFriendly | Top Five
Copyright © 2011. Tips Buat Blogger - All Rights Reserved
Template Created by Zv-eLite .com Published by Septa Praseya Hanafi
Proudly powered by Blogger