Menambahkan Footer 3 Kolom di Template Blogger Anda

April 18, 200852 komen

Menambahkan Footer 3 Kolom di Template Blogger Anda

Mengedit template blogger untuk memiliki footer 3 kolom untuk template blogger ternyata bukan perkara yang sulit, namun sangatlah mudah, hanya butuh beberapa menit waktu anda. Mungkin rekan-rekan blogger menganggap ini perkerjaan rumit, yah silahkan saja menganggap begitu, namun tunggu dulu baca tutorial ini, pasti anda akan heran.

Sebelumnya saya umumkan bahwa tutorial ini khusus untuk blogger beta (layout), oke langsung saja.

  1. Seperti biasa login ke blogger.com
  2. Kemudian klik “Expand Widget Template”
  3. Lantas save template anda kalau-kalau terjadi kesalahan
  4. Kemudian temukan ini:

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

5. Ganti tag yang berwarna merah dengan script berikut:

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

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

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

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

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

</div>

6. Save template anda!

Selamat anda telah mempunyai footer 3 kolom di blogger anda. Untuk melihat hasilnya, anda kembali ke “page element” lalu lihat bagian footer, pasti ada 3 tempat untuk menempatkan page element. Nah silahkan anda taruh page element yang anda inginkan di footer 3 kolom blogger blogspot anda.

Semoga bermanfaat dan selamat mencoba.

Blogger
  • http://noveerasjid.blogspot.com novee

    tp kan template blog kaya aku ga bisa pk ini kan ya Bi..?

  • dy

    pak maksudnya blogger beta apa si? aku punya blog termasuk blogger beta ga? soalnya aku coba cari “” di kode di “Edit template HTML”; nda ada… gimana ya pak? mohon bantuannya soale aku pgn bgt nambahin footer di blog aku buat page element “link blog yg aku suka”. thx

  • Abi Bakar

    @Novee gak bisa kalau novee templatenya klasik.

    @dy, sudah klik ‘expand widget template’ belum? kalau belum memang kode diatas tidak akan muncul,
    atau address blog kamu apa? biar saya lihat kamu pake layout (beta) atau bukan?

  • http://variusptc.blogspot.com varius

    bro kok gw ga bisa ya? tiap mau simpan tempaltenya malah keluar tulisan gini Kami tidak dapat menyimpan template Anda.
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Lebih dari satu widget ditemukan dengan id: Feed1. ID Widget seharusnya unik. gimana ya bro??? tiap saya lakukan edit HTML hasilnya selalu begitu

  • Abi Bakar

    @various kalau gitu berarti kamu punya 2 feed elemen yang sama dalam template kamu, ilangin dulu salah satunya, kamu ke page element, trus cari page element feed1, kalau sudah ketemu kamu ilangin salah satunya (remove page element)

  • http://anggina-project.blogspot.com project

    mas abi, template-ku punya masalah ni di bagian footer, kode HTML yang berhubungan dengan peng-edit-an tampilan footer mana aja sih mas, dah aku utak atik sana sini tetap aja hasilnya sama makanya sampe sekarang gak ada widget di bagian footer, klo ganti template dah terlanjur sayang, bisa bagi solusi, saran, ato apalah mas abi…?

    thank’s

  • Abi Bakar

    @Project, Rupanya template kamu gak ada <b:section class=’footer’ id=’footer’/> didalamnya, tapi coba kamu letakan kode diatas tepat dibawah <div id=’footer-wrapper’> namun sebelumnya back-up file dulu

  • http://kontjidot.blogspot.com idotkontji

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type “div” must be terminated by the matching end-tag ”

    ada div yang nggak ketutup mas, saya nggak mudeng…

    • Abi Bakar

      Pale template yg mana mas?

  • http://www.dariska.blogspot.com ku2h

    bos,maaf pertanyaanny bda dr postingan…

    bos,gmn crany mmbuat read more pd blog???

    trus…
    gmn crny menulis alamat blog/link pada post comment??

    tlong dbls dEmail….

  • http://blogcenti.blogspot.com ireng_ajah

    Mas abi, ak cb buat jadi 3 kok gak bisa ya mas??
    tidak ada kode

    Kalo ak liat dari template yg mas pake ini, sama dengan template punyaku tapi punya mas bisa kok punya aku gak bisa ya?? Tolong bantuannya mas..

    Thanks

  • http://blogcenti.blogspot.com ireng_ajah

    Maksut ak tidak ada kode

    b:section class=’footer’ id=’footer’

    Bagaimana mas mnsiasatinya?? Punya mas bisa

    Punya ako kok gak bisa padahal template nya sama..

    Thanks mas

  • http://blogcenti.blogspot.com ireng_ajah

    Mas abi..ak pake tmplate yg sama dgn mas abi tapi kok gak bisa ya?? dan Gimana mas??? Punya mas bisa tapi punya ku kok gak bisa??

  • http://blogcenti.blogspot.com ireng_ajah

    Maf mas..kok tiap kali ak tulis kode yg ak mksut di komen kok hurufnya jadi bold ya??dan kode yg ak mskt tidak ada??

    Nti dikira ak spam lagi..

    Pokoknya kode yg berwarna merah sperti yg mas tulis di atas tidak ada di template.

    Gimana nih mas..padahal template kita sama tp pny mas bisa,punyaku tidak bisa..

    mohon bantuan

    Trimaksih

    • Abi Bakar

      Ireng kode diatas hanya untuk sebagian template, sedangkan untuk template2x baru yg hasil konversi dari WordPress seperti template mas umumnya tidak bisa, namun saya belum mengulik lagi untuk, nanti kalo ada waktu saya akan coba edit, jadi cara diatas tidak untuk smua template. makasih komennya Bro!

  • http://blogcenti.blogspot.com ireng_ajah

    Tapi punya mas kok bisa ya?? caranya gimana mas??

    Kan template yg dipake sama..

    http://blogcenti.blogspot.com

    Mas bisa liat template yg aku pake..sama ma punya mas..

    Kasih solusi dunk mas..

    Thanks…

    • Abi Bakar

      Kan blog saya ini wordpress kang

  • http://blogcenti.blogspot.com ireng_ajah

    Hehehee..maf mas..aku kira asal template sama bisa tuh..

    Sekarang dah ganti template..

    dan dah ada code nya..

    Praktekin akhh..

    :) :)

  • http://firman-sharing.blogspot.com firman

    kang,kok punya saya juga ga bisa ya?tulisan yg keluar,sama kaya mas idotkontji. bisa kasih solusi?

    • Abi Bakar

      Cara ini gak bisa semua template Firman

  • http://kursaini.blogspot.com duduy

    Mas abi,. saya lum ada posting neh,… gimana sih buat read more,..
    pada blog biar gk terlalu panjang,.. neh versi template yang saya pake,
    Blogger Template Style
    Name: Blogging Pro Blogger Template
    Designer: Blogging Pro
    URL: bloggingpro.com
    Converted by: eBlog Templates
    URL: eblogtemplates.com

  • http://menujugelap.blogspot.com membukagelap

    Masih pusing nih.
    Belum paham dengan bahasa mesin yang aneh bin ajaib.

  • http://resep-rsu.blogspot.com/ jeffrey

    bung abi,gimana sih caranya mengatasi galat pada blogger ?

    terima kasi

    • Abi Bakar

      Galat = 404 kan? Mengatasinya saya kurang tahu mas kalo di blogspot :)

  • Abi Bakar

    BAGI YANG INGIN PUNYA FOOTER ATAU SECTION 3 KOLOM SILAHKAN KE BUAT SECTION 3 KOLOM BLOGSPOT

  • antho

    mas kuk susah she bat di blogspot…
     
    ntar pake yang lain lagi???
     

  • http://www.bola-kita.co.cc bolakita

    Alow mas abi, Kolom 3 di bawah itu kalo gak salah bisa lebih cakep dech gambarnya bukan hanya polos gitu …. bis kasih tahu triknya ??

  • http://saunglink.blogspot.com Saung link

    Hello mas Abi.. sy pakai templat langit dari sampeyan.. emang gak ada kode dimaksud , yg ada <div id=’footer’> ,   ketika tambah footer 3 kolom ,, ya.. saya simpan dibawah nya,  tapi hasil  tampilannya kok nggak pas ya…
    nah… apanya yg salah/kurang Mas ??? .. atau memang templat langit tu termasuk wordpress.. hingga tak ada kode dimaksud..  tolongin dong…

  • http://saunglink.blogspot.com Saung link

    Mas.. saya pakai templat langit punya sampeyan..trus  coba tambah  3 kolom footer ini .. tapi kok tampilannya gak pas di footer ya mas.. tolongin dong.. apanya yg salah….  atau emang utk templat langit ini tak bisa di tambah…???

  • http://www.pendopoq.blogspot.com seydiaz

    :D makasih… artikelnya baguz

  • http://sellysmile.blogspot.com elmarzuqi

    Emm knapa yah aku slalu gagal ktika mencoba. Tolongin dunk :(

  • http://pancallok.blogspot.com Panca

    Aku ngga punya kode ini :

    <em><b:section class=’footer’ id=’footer’/></em>

    gmn caranya pasang? aku udah nyari yang agak mirip dapatnya seperti kode ini :

    <b:section class=’footer’ id=’abcd’ preferred=’yes’ showaddelement=’no’>
    <b:widget id=’HTML3′ locked=’true’ title=’Footer’ type=’HTML’>
    <b:includable id=’main’>
    <div id=’footer’/>
    <div id=’footerbox’>
    <div class=’footer’>

    mohon pencerahnnya yah…! d bls plse

  • http://www.gadiskeraton.blogspot.com gadis

    Trims lagi melajar membuat blog crystal – x nich

  • http://harieindriyono.blogspot.com harie

    trimakasih gan
    sbnrnya ku cari script tp ga ada trus ku taruh aja kode di atas hasilnya OK`s
    sorry br blajar blog…

  • http://ruang-ihsan.blogspot.com IHSAN

    footernya punyaku kelebara Bi :(

    melebihi lebar posting dan sidebar

    gimana kita ngecilin sesuai lebar blog ya?

  • Abi

    Cari parent widget blog kamu San, kalau blogspot biasanya div=”bottom” lalu edit width CSS dari bottom itu

  • http://deniacil.blogspot.com deny

    wah….boleh dicoba nie

  • http://mazta.tk MASTA

    info good…. aku cari cari….
    akhirnya ada orang yang ngepost…
    trimmmmmm
    kalo memberi readmore di template blogger yang asli dari blogger gimana carany….. plis…… kasih tau OK….

  • http://bablashot.blogspot.com hotbiz

    kalau bikin posting harus dibuktikan dulu….
    kalau dipasang di template umum bisa.
    tapi ada template khusus yang tidak bisa dipasang atau kode trsebut tidak cocok..
    contohnya seperti template blog ini..
    yang possting aja masih bingung.. hahahahaaaaaaaaaa….
    anak kecil juga ikut ketawa….. hihiihih..
    coba cari solusinya. jangan cuma kopi paste aja…
    aku juga bisa kopi paste postingan orang…
    tapi aku tetep ijin dulu.. minimal menyebutkan sumbernya dung…..

  • http://shockday.blogspot.com/ hany

    bos kho blog saya ga bisa ya, tolong bales ke blog saya

  • http://www.rofingi.com rofingi

    keren nih,,,, bisa buat tempat widget lain

  • http://fakta7.blogspot.com/ anshari

    makasih yah infonya Salam Kenal Makasih

  • http://varis-vanjava.blogspot.com jasmin

    oke kaka’ aku dah bisa memasangnya di blogku Islamic Centre
    terima kasih kk’

  • http://www.couplax21.blogspot.com couplax21

    q cari kode yg warna merah ko’ gak ada?
    mohon pencerahannya gan,,

  • wekwek

    udah mas abibakar,berhasil…
    makasih ya
    butuh footer buat amazon2an…nyari uang receh dari ngeblog,buat beli nasi….
    makasih

  • http://juprimalino.blogspot.com/ Andrew Jufry Malino

    Kalo gak ada kode yang ini

    cari saja kode

    kemudian ganti dengan kode diatas yaitu

    baru ikuti langkah mas Abi diatas. Sangat simple kok, aku juga pertamanya bingung alnya di template yang ane DL gak ada footer-wrapper nya, so aku akalin deh n berhasil kok.

    lihat hasilnya di http://jufry2u.blogspot.com/

  • http://retzone.blogspot.com kamal

    super sekali…
    terima kasih telah memecah kebuntuan saya..

  • http://www.reflexionpromosindo.com reflexionpromosindo.com

    telah kami search sesuai petunjuk diatas, tapi tidak ketemu, namun kami mencoba paste dibawah kode ini

    — —-

    dan BERHASIL ….

    terimakasih ….

  • Haris K

    mantap gan
    cek blog ane gan
    harisk-smart.blogspot.com
    cara membuat blog 3 kolom tanpa merubah script

  • Bshokler

    Makasih Om Tapi Ni Pasngnya di paksa Bukan Tempatnya Tapi Cocok Juga. elemen Ke pakai 1