Home » , , , » Cara Membuat Footer 2 Kolom Di Blog

Cara Membuat Footer 2 Kolom Di Blog

Written By Ku Copas on Friday, 30 November 2012 | 11/30/2012 07:13:00 pm

KUCOPAS - Cara Membuat Footer 2 Kolom Di Blog. Footer adalah kolom widget yang biasanya 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 diatas atau dibawah 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 diatas 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. Pada Dasbor, 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.
  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 Dasbor 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.

Apabila ada pertanyaan mengenai tutorial ini, sobat jangan sungkan-sungkan untuk bertanya melalui form komentar yang tersedia. Semoga trik ini bisa bermanfaat untuk sobat KUCOPAS semuanya, selamat berkarya.
thumbnail Title: Cara Membuat Footer 2 Kolom Di Blog
Posted by:Ku Copas
Published :2012-11-30T19:13:00+07:00
Rating: 4.5
Reviewer: 7 Reviews
Cara Membuat Footer 2 Kolom Di Blog

Artikel Terkait:

Comments
0 Comments

0 comments:

Post a Comment

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger