Home » , » Cara Membuat Footer Multi Kolom Di Blog

Cara Membuat Footer Multi Kolom Di Blog

Written By Ku Copas on Wednesday, 2 May 2012 | 5/02/2012 06:55:00 pm

 Cara Membuat Footer Multi Kolom Di Blog - Footer Multi kolom yang akan saya jelaskan disini maksudnya adalah footer yang bisa di buat menjadi 2 kolom, 3 kolom atau 4 kolom. Tergantung dari kebutuhan dan keinginan sobat untuk membuat dan memasangnya di blog sobat.

 Fungsi dari menambah atau membuat footer multi kolom ini adalah untuk sobat yang ingin memperbanyak ruang kolom atau tambah gadget pada bagian footer template blog sobat. Karena mungkin sobat memerlukan bayak ruang widget untuk blog sobat. Biasanya di gunakan untuk blog magazine atau yang lainya.

 Untuk cara membuat dan memasang footer multi kolom di blog ini caranya terbilang sangat mudah, Apalagi bagi sobat yang sudah mahir untuk edit html dalam template blog. Namun bagi sobat yang masih newbie kayak saya ini, Jangan berkecil hati. Karena saya akan memandu sobat sampai berhasil menerapkan footer multi kolom ini di blog sobat kucopas semua.

 Langsung saja kita mulai ya sobat, Ikuti saja langkah-langkahnya dengan teliti dan jangan sampai ada yang terlewatkan. Cara membuat footer multi kolom di blog, Caranya sebagai berikut:

1. Silahkan sobat >> "Login atau Masuk" ke >> Blogger.com menggunakan akun sobat.

2. Pada "Dashboard" tampilan blogger baru, Pilih dan klik menu >> "Template"

3. "Back up" template sobat dengan klik pada >> Cadangkan/Pulihkan >> "Unduh Template lengkap" agar sobat bisa mengembalikan template sobat ke kondisi semula jika terjadi kesalahan saat edit html template blog atau hasilnya tidak memuaskan seperti yang sobat inginkan.

4. Langkah yang selanjutnya klik >> "Edit HTML" >> Lanjutkan.

5. Jika sudah, jangan lupa sobat Centang "Expand Template Widget".

6. Kemudian sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).

7. Langkah yang ke tujuh, Silahkan sobat tambahkan atau taruh kode berikut ini di atas atau sebelum kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

8. Jika sudah, Sobat cari kode berikut dibawah ini. (Gunakan CTRL+F kembali untuk mempercepat pencarian).

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

9. Silahkan sobat tambahkan atau taruh kode berikut, dibawah atau sesudah kode <b:section class='footer' id='footer'showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Keterangan:
Jika sobat tidak menemukan kode <b:section class='footer' id='footer'showaddelement='yes'/> maka Sobat tambahkan atau taruh saja kode berikut setelah atau dibawah kode <div id='footer'>

Jika sobat ingin membuat footer 2 kolom di blog. Silahkan sobat gunakan kode berikut:

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

Jika sobat ingin membuat footer 3 kolom di blog. Silahkan sobat gunakan kode berikut:

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

<div id='footer1' style='width: 33%; 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: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

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

Jika sobat ingin membuat footer 4 kolom di blog. Silahkan sobat gunakan kode berikut:

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

<div id='footer1' style='width: 25%; 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: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>

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

10. Kalau sudah, silahkan sobat klik >> "Pratinjau" atau "Preview", Guna untuk menghindari kesalahan saat Edit Template blog sobat.

11. Jika hasilnya sudah bagus seperti yang sobat inginkan dan Edit Template tidak eror, Silahkan sobat klik >> "Save Template" atau "Simpan Template", Lalu klik >> "Page Element" atau "Tata Letak" untuk melihat hasilnya.

Jika sobat sudah berhasil membuat footer multi kolom di blog, Maka hasilnya akan menjadi seperti gambar screenshot di bawah ini.

Contoh Footer 2 Kolom

Cara Membuat Footer Multi Kolom di Blog

Contoh Footer 3 Kolom

Cara Membuat Footer Multi Kolom di Blog

Contoh Footer 4 Kolom

Cara Membuat Footer Multi Kolom di Blog

 Demikian tutorial blog tentang Cara Membuat Footer Multi Kolom Di Blog, Semoga bermanfaat untuk sobat KUCOPAS semua. Selamat berkarya...

| Source by www.maskolis.com | Supported by http://kuc0pas.blogspot.com |

Artikel Terkait:

thumbnail Title: Cara Membuat Footer Multi Kolom Di Blog
Posted by:Ku Copas
Published :2012-05-02T18:55:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Footer Multi Kolom Di Blog
Comments
4 Comments

4 comments:

  1. Akhirnya ketemu juga cara ini ^__^.susah2 cari di google ternyata ketemu disini,paling top deh ini blog

    ReplyDelete
  2. Alfadlys@ Iya makasih... Makasih juga atas kunjunganya... Happy blogging...

    ReplyDelete
  3. terima kasih tip6snya,nanti akan saya coba.
    sukses terus ya blognya.

    ReplyDelete
  4. tips nya sangat bermanfaat gan.. thanks

    ReplyDelete

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