Cara kolom footer
Baiklah pada hari ini saya akan sharing cara membuat kolom footer blog di blogger dengan multi kolom yaitu 2, 3, atau 4 kolom. Problem tentang kolom footer blog ini sering sekali kita temukan di saat kita download template dari situs penyedia template atau dari default blogger sendiri dan disana tidak menyediakan widget pada footer untuk kita menempatkan elemen blog yang kita anggap pantas untuk di taruh di bagian tersebut. dan juga sebagai salah satu optimasi SEO pada loading blog.

Memang sharing cara membuat kolom di footer ini terbilang basi karena sudah banyak sekali yang posting disana - sini, tapi gak apa-apalah dari pada saya vakum posting beberapa minggu :P

Oke bagi yang ingin mempunyai Kebutuhan akan kolom pada bagian footer blog, langsung saja kita praktek.

1. Login Blogger -> Klik Design -> Edit HTML -> tidak perlu centang expand template widget, karena takut malah bikin pusing :D

2. Sebaiknya Backup template anda dahulu. dengan cara klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika terjadi galat atau anda memang kurang puas terhadap hasilnya.

3. Setelah itu, cari kode ]]></b:skin> dengan menekan ctrl+f

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>


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


5. Cari lagi di find kode yang kira-kira seperti ini :
<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>
6. Setelah ketemu, tambahkan kode di bawah ini tepat di bawah  <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )
Jika ingin membuat footer 2 kolom. Gunakan kode ini :

    <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 ingin footer 3 kolom. Gunakan kode ini :

    <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>
Membuat footer menjadi 4 kolom. Gunakan kode ini :

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

7. Jika sudah klik Save Template. Lalu klik Page Element untuk melihat hasilnya.

Semoga sharing tentang cara membuat kolom footer di blogspot ini bisa membantu dalam modifikasi blog anda.


Review:

Judul Cara membuat 2, 3, 4 kolom footer blog
Deskripsi Baiklah pada hari ini saya akan sharing cara membuat kolom footer blog di blogger dengan multi kolom yaitu 2, 3, atau 4 kolom . Problem te...
Author
Author Rating
4/ 5 Suara Dari 1001 Ulasan

Dapatkan artikel menarik lainnya : Klik disini
44 komentar sudah masuk. Silahkan menambahkan tanggapan lain...
Komentari


October 22, 2011 at 5:40 AM  
Like

Tk'y banget Om bantuannya.
Pantesan ga bisa 'no' dirubah 'yes' bagi tiga 30,30 dan 40 beres dah.
Salam. Eh iya sepertinya postingan ini jadi 2X ya.
Cuman ngingatin sebagai seorang teman.
Salam



October 22, 2011 at 3:49 PM  
Like

hehe, sudah lama mas aku gak otak-atik template, kalau dulu dua minggu sekali ganti template, ya memang aku ingin fokus biar meta tah dan h1 h2 dan sebagainya tidak berubah2. ya kalau pengen tambah modif manual aja kayak tutorialnya mas armin kayak gini. hehe

gak ganti template tapi dimodif2 gitu aja lebih enak.



October 25, 2011 at 12:59 PM  
Like

Dhicomp: hahaa...selalu ada problem di setiap kode pemrograman. iya mas, cm beda di peletakan aja.

NB: tutorial edit template blogger tuh sbenernya kesitu-situ aja larinya. makanya banyak senior yg udah gak bikin tutorial lagi krn hal ini.



October 25, 2011 at 1:05 PM  
Like

ajurNA: iya mas, kadang kebutuhan akan tampilan nih selalu ga ada puasnya. Apalagi kita dah terlanjur cinta sm blog kita, pngen deh di dandanin yg lebih2.. :D tannpa mengenyampingkan SEO template pastinya.

hehee...sy edit cm tampilan basic trnyata ketauan nih sm mas ajurna, kirain pada nyangka sy ganti template..hihii



October 29, 2011 at 6:26 AM  
Like

nice share mas na



November 2, 2011 at 4:59 PM  
Like

nice info gan ~
:D



November 3, 2011 at 1:03 PM  
Like

thx ya infonya gan...



November 10, 2011 at 12:00 AM  
Like

Nice post sahabat, manfaat sekali tips-Nya :D
Exis selalu yah? Salam



November 14, 2011 at 12:40 PM  
Like

This post is so nice. I got many things by your post. It’s very enjoyable post everything are beautifully define in your post you should continue make this type post.



November 24, 2011 at 11:04 PM  
Like

Thankz bro, Amat berguna buat blog ane... Kayaknye ini deh panduan yang paling sederhana namun mumpuni n bekerja dengan baik. Thenkz sobat



November 25, 2011 at 12:34 PM  
Like

makasih gann



November 25, 2011 at 10:00 PM  
Like

thanks angie



November 25, 2011 at 10:01 PM  
Like

Berbagi Kreativitas: thx teman..



November 25, 2011 at 10:02 PM  
Like

thanks Escorts in Delhi



November 25, 2011 at 10:03 PM  
Like

Anak Elang: masama mas bro, thx jg buat kunjungan nya yah..



November 26, 2011 at 11:44 PM  
Like

langung di praktekin mas broooo :)
nicee tutorial degh



December 6, 2011 at 4:44 AM  
Like

Manfaatnya apa mas. Salam kenal mas



December 10, 2011 at 8:21 AM  
Like

Syukrons... Akhi... matursuwun sharenya berguna buat ana.



January 2, 2012 at 11:53 AM  
Like

Thanks sob tutornya,,



January 21, 2012 at 11:22 AM  
Like

Terima kasih gan...



February 9, 2012 at 7:52 PM  
Like

nice posting... :)



February 24, 2012 at 12:59 PM  
Like

Terima kasih gan, postingannya mantap.



March 10, 2012 at 1:12 PM  
Like

Saya berniat menambah kolom footer yang awalnya 3 menjadi 4. Saya laksanakan triknya.



May 24, 2012 at 7:56 PM  
Like

harus menyesuaikan dengan lebar halaman



June 2, 2012 at 2:50 AM  
Like

Keren infonya
Thanks ya mas
Mampir ke dulida.com ya



June 17, 2012 at 9:06 AM  
Like

keren sob,, aq coba nii..

Sangat Membantu.. Terima kasih Gan..



June 19, 2012 at 8:44 PM  
Like

Saya dah buat tapi masih error. ada yang kurang waktu editing, Coba lagi. Thanks info nya Bos



June 22, 2012 at 9:00 PM  
Like

Mantap sekali gan postingnya!! Rock!! Thankyou berhasil nih punya ku \m/



July 14, 2012 at 6:40 AM  
Like

siiip.
saya coba om,


makasih



July 20, 2012 at 5:04 PM  
Like

Terimakasih atas informasinya. saya akan coba di blog saya.



August 23, 2012 at 4:40 PM  
Like

keren kang, lanjoetken



August 24, 2012 at 11:13 PM  
Like

thanks gun infonya..
nice blog



September 26, 2012 at 9:01 PM  
Like

kalo ada scren shot'a cakep nih bg



October 14, 2012 at 8:45 PM  
Like

tfs kawan...
ini yang sedang ane cari...
mau ane pasang di template baru ane..
ni lagi rencana mau ganti baju...



November 10, 2012 at 11:19 PM  
Like

mantep gan infonya.....



February 10, 2013 at 3:34 PM  
Like

keren masbro, makasih triknya, kunbal ya

jos



March 17, 2013 at 8:08 PM  
Like

saya sudah berhasil menambahkan klom footer pada blog saya dengan tutorial ini.. thank's ya...

silahkan lihat hasilnya di : http://dokyasde.com



April 15, 2013 at 9:19 AM  
Like

wah berhasil...
makasih gan

www.master7chris.blogspot.com



June 13, 2013 at 10:15 AM  
Like

mantap bro langsung saya coba nih



August 2, 2013 at 6:56 PM  
Like

Great Tips Oom..
Mau bantuin ane Oom?!
Ane pengen bikin 4 Kolom Footer di Web ane di Wordpress..
Saat ini ane make Themes WP-Toko 3.2..
Please help..
Nuhun.



October 26, 2013 at 10:01 PM  
Like

Banyak juga kodenya yang harus ditempelkan keblognya ini mas :)



January 16, 2015 at 9:17 AM  
Like

mantap dah artikelnya saya suka

Tuliskan komentar pada form ini :

Adsense Indonesia
Template design by Armin | Cara Online
Powered by Blogger