Membuat Footer Kolom Pada Template Blogger

Membuat Footer Kolom Pada Template. Menambahkan 4 kolom footer spesial untuk pengguna blogger template Bamz Style. Berhubung ada beberapa permintaan dari para pengguna template yang saya desain yang ingin menambahkan footer kolom (footer column), kali ini saya akan share cara membuat atau menambahkan 4 kolom pada template blogger tersebut.
Membuat Footer Kolom Pada Template Blogger

Cara Membuat atau menambah Footer kolom pada Template

  • Lahkah pertama login ke blog anda > Design > Edit HTML dan jangan lupa back up terlebih dahulu template yang anda gunakan
  • Setelah itu cari kode ]]></b:skin> dan paste kode Css berikut tepat di atas kode ]]></b:skin>

/*----- Colom Footer Bamz-----*/
#bamzlower { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#bamzlower-wrapper { margin:auto;width: 860px; border:0; }
#bamzlowerbar-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#333; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.bamzlowerbar {margin: 0; padding: 0;}
.bamzlowerbar .widget {margin: 0; padding: 10px 0px 0px 0px;}
.bamzlowerbar h2 { margin: 0px 0px 10px 0px;color:#333; text-transform:uppercase; font: bold 12px Arial, Tahoma, Verdana;
}
.bamzlowerbar ul { color:#333; margin: 0 auto; padding: 0; list-style-type: none; }
.bamzlowerbar li { display:block; color:#333; line-height: 1.6em; margin-left: 0 !important; padding: 4px;list-style-type: none; }
.bamzlowerbar li a { text-decoration:none; color: #333; }
.bamzlowerbar li a:hover { text-decoration:none; color:#000;}
.bamzlowerbar li:hover { display:block;}
/*----- End Colom Footer Bamz-----*/
  • Masih pada halaman Edit HTML, cari kode <div id='credits'>. Kalau sudah ketemu silahkan anda paste kode berikut tepat di atas kode <div id='credits'>
<!-- Kolom Footer By BamZ -->

<div id='bamzlower'>
<div id='bamzlower-wrapper'>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar1' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar2' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar3' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- end Kolom footer Bawah -->
Nah sekarang simpan dan lihat hasilnya, atau anda preview dulu sebelum di simpan :D.

Bisakah cara membuat kolom ini digunakan untuk template lain?

Cara membuat footer kolom ini sebenarnya bisa di gunakan untuk semua template, cuma mungkin cara penempatannya yang berbeda karena setiap template memiliki elemen yang berbeda. Kalau anda ingin mencobanya, silahkan saja. Dan cara paling gampangnya adalah paste kode HTML (kode ke-2) di atas kode </body>.

Hasil yang anda buat ini nantinya akan sama seperti kolom footer pada blog ini. Kalau anda ingin menjadikannya 3 atau mungkin 2 kolom tentu saja bisa. Bagaimana cara membuat footer tersebut menjadi 3 kolom?

Cara merubah footer menjadi 3 kolom

Untuk menjadikannya 3 kolom anda hanya tinggal mengubah lebar kolomnya menjadi 32%. Lihat kodenya di bawah ini
# bamzlowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#ddd; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
Selanjutnya hapus kode

<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>
Simpan template dan jadilah 3 kolom Footer.

Jangan lupa berlangganan yah (Facebook, twitter, google plus atau mungkin di bookmark) dan dapatkan update-update seputar Tutorial blogger dan fitur template dari Blog Bamz hehehe :). Selamat mencoba dan semoga sukses!

62 comments:

Rohis Facebook mengatakan...

sy save ya bro tutorialx kali2 aja dibutuhkan.., thx ilmu gan..*smile

Obat Kuat mengatakan...

ane bookmark dulu bosa, lain waktu di coba

Laurencius mengatakan...

Makasih share nya Om. sangat manfaat. Salam

goesadi mengatakan...

gagal bmaz, kok malahan elemen'a ke bawah bukannya ke samping, tolong pencerahannya bamz :D

BamZ mengatakan...

@goesadi: hohoho mungkin keseringen edit templatenya yah?.

coba upload ulang template originalnya. atau pasang kodenya sebelum di upload ke blognya

goesadi mengatakan...

@BamZ thanks buwt srannya qu coba dlu bro, alnmya qu seneng banget ma template bwatan mu :D

BamZ Gz mengatakan...

itu sudah diganti dengan kode baru mas, coba dengan kode itu.. semoga sukses yah

BamZ Gz mengatakan...

@Rohis Facebook: silahkan sob wkwkw. pengunjung setia nih :p

admin blog ini mengatakan...

lapor bamz, dah qu coba sran dri mu, tpi tetep gax mw, gimana donk bamz. tolong pencerahanyalagi bamz

BamZ Gz mengatakan...

itu mas kodenya sudah saya ganti yang baru. coba lagi silahkan. mudah2an sukses

admin blog ini mengatakan...

sorry mengganggu lagi bamz, koq krang mlahan ad tulisan gini
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "id".

pas msang expand widget'a d centang ap gax sich, skali lgi maaf bamz

admin blog ini mengatakan...

bamz setelah make kode yg bru mlh ad tulisan kyk gni Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "id".

BamZ Gz mengatakan...

itu kalo keseringen edit template biasanya mas, coba kodenya di paste di xml nya sebelum di upload ke blog. jadi di edit sebelum di upload,

BamZ Gz mengatakan...

@admin blog ini: oh iya g usah di centang mas, kan cuma elemen pada hom

admin blog ini mengatakan...

Bamz tetep gax mau, semua'a dah qu coba tpi tetep gax ma, slalu ad tulisan
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "id", gaman donk?

BamZ Gz mengatakan...

saya juga sering gitu kok. coba ulangi saja langkah dari awal. expand widget g usah di centang :D

goesadi mengatakan...

bmaz rsanya dah qu coba puluhan kali dan dah qu coba di blog yg berbeda, tpi tetep gax mw, gamana donk ?, pdahal blog qu kekeruanagn tempat untk widget

BamZ Gz mengatakan...

ok bentar mas, saya kasih jadinya saja sekalian sam templatenya yah

A.I.Flimban mengatakan...

Terima kasih atas usaha keras-nya demi memenuhi kebutuhan saudara-saudar yang membutuhkanya, termasuk saya....
bolehkan tanya... bisa tidak yaa saat mengkelik tampilan dan layar HEADER tidak ikut naik... semoga memahami maksut saya.. terima kasih. ws

A.I.Flimban mengatakan...

Kode CSS tersebut kelihatannya ada kekeliruan pada kode div id=$27bamzlower' dan saya tambah tanda petik sebelum $ Lihat div id='$27bamzlower'

Contoh sebelum : div id=$27bamzlower' perubahan
Contoh setelah : div id='$27bamzlower' perubahan.

BamZ Gz mengatakan...

Nah iyah,, itu saya juga sering mengalami, kalau keseringen edit template ato gmn. Skrg saya editnya di format xml yang belum diupload. :D

Fajri Alhadi mengatakan...

keren mas..
nice tutorial

exspayed mengatakan...

tidak bisa di terapkan ini mas bamz

Anonim mengatakan...

Elementnya kesamping mas

BamZ Gz mengatakan...

masak sih g bisa, harusnya bisa. saya juga pake cara di atas kok. coba lebih teliti lagi

goesadi31 mengatakan...
Komentar ini telah dihapus oleh administrator blog.
oIm_hIm87 mengatakan...

terima kasih banget...oh ya mau tanya mewarnai kolom itu gimana ya..seperti contohnya di blog ini warna item

blog-engineer mengatakan...

maksh infonya sob..
sangt membantu..
kunjungan balik ya...
http://blog-engineer2.blogspot.com/

sugeng mengatakan...

ijin nyimak aja,,, kalau masang di atas postingan ,,coba lihat blog ane,, ane mau pasang,, di samping 2 kolom di atas header gimana

sigit hermawan mengatakan...

di template ku ga ada div id='credits'
mohon pencerahan masta!??

Jaripey mengatakan...

sip,bagus infonya...

tolus agal mengatakan...
Komentar ini telah dihapus oleh administrator blog.
To 17 mengatakan...

nice share masboss....makaasih yaahh

Lineon mengatakan...

Makasih imunya sob:)

www.alfatihlebak.co.cc mengatakan...

tolong kasih cara membuat kolom foter sudut bundar yah??????? makasih

BamZ Gz mengatakan...

tinggal tambahkan Css border-radius: 20px; pada css kolom footer anda

incomeplus99.blogspot.com mengatakan...

mas bamz, sy sdh coba menambahkan footer spt yang disarankan, ternya setelah saya pratinjau ternyata tidak terlihat. skrg sy menggunakan template percis blog bamz. tlg infonya lebih lanjut. trims

B'art mengatakan...

makasih infonya kawan,,

Arsha Wijaya mengatakan...

Om Bamz template Ane kok kena GALAT itu gmna?

singgih sopiand mengatakan...

mana gan gax bisa

Ahmad Farid mengatakan...

Gan, saya Sudah selesai menerapkan Kode Css diatas, ttp knapa tambah gadged/ kolomnya tidak muncul ?

Kang Hilman mengatakan...

mas, ada yang perlu ane tanyakan
masa widget yang ane pasang kok jadi seperti text align center sih mas.

Widget sudah berhasil dipasang.
Namun, tampilannya tidak yang ane harapkan
jadi seperti rata tengah teksnya (align center)

Gimana solusinya mas
okesharezone

punyabanyak mengatakan...

terimakasih

sekedar wawasan mengatakan...

wah ini nih tutorial yang pas banget sob...jelas n mantap

Vicahya mengatakan...

kok tempat ane kagak bagus seperti yang ada di gambar ?

Revel mengatakan...

punya saya juga gak seperti di harap kan

malah jadi memanjang ke bawah gak kayak punya mas bamz seperti template ini

Dyan mengatakan...

Mkasih infonya... udah di coba berhasil nih :D

cacar air mengatakan...

terimakasih agan atas infonya, saya akn coba itu .. !!!

atasi batu ginjal mengatakan...

teriamaksih gan , saya akan coba.
di tunggu postingan lainya ..

rematik mengatakan...

terima kasih banyak atas semua info-infonya gann ..!! :)

ilham adi m mengatakan...

tutorial sangat bermanfaat gan, terima kasih :)

Diki satrio mengatakan...

trimakasih banyak mas udah saya test ternyata berhasil.... hore.....

CybersNet mengatakan...

makasih om bamz..tkp

muhamad nurarif mengatakan...

mas bamz, bisa minta tolong ga, template yang sekarang saya pake hasil rombakan dari template bawaan blog (watermark). kira-kira bisa dibantu ngga yah warna backgroundnya jadi item kaya screenshoot footer yang diatas.

http://gaptek32.blogspot.com/

tolong di tengok dan bantuannya yah mas...

film horor mengatakan...

makasi infonya mas, dan oh ya klo ada teman2 yg suka film horor terbaru, aku ada blognya nie, silakan dikunjungi krn dijamin tidak menyesal krn filmnya seru2 dan bisa didownload lagi loe, mkasi mas

free download software mengatakan...

artikel yg menarik bro dan makasi

Penerjemah LPBT Jakarta mengatakan...

Saya udah berhasil buat 4 kolom, gan! Thanks sebelumnya

Limit Post mengatakan...

wuahaha kebetulan nih lagi nyari buat masang d blog :D

Direktori Penerjemah Indonesia mengatakan...

Langsung dicobain mas....mudah2an berhasil. Makasih sebelumnya.

Salam kenal dari Direktori Penerjemah Indonesia

noobeess mengatakan...

makasih ya gan :) baru saja download template B-Seo v5.. nyari untuk kolom footer dimana. ternyata nemunya di sini & di coba ternyata berhasil... moga sukses.

erwin stret mengatakan...

makasih ne sangat membantu..

Geseng Pratama mengatakan...

tambah muuuantab aja blog ane... makasih tutorial nya

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

◄ Posting Baru Posting Lama ►
 
Exit Di Like yah Sob!! Makasih