Header Ads

Cara Membuat 3 Kolom Widget di Atas Footer pada Template Thesis

Cara Membuat 3 Kolom Widget di Atas Footer pada Template Thesis

Bila Sobat juga menggunakan template Thesis seperti yang ane pakai ini dan ingin menambahkan 3 kolom widget di atas footer, Sobat bisa melihat langkah-langkahnya di bawah ini. Postingan membuat 3 kolom di atas footer ini bisa dibilang merupakan kebalikan dari posting yang berjudul Cara Membuat 3 Kolom di Bawah Header pada Template Thesis SEO.

Berikut langkah-langkah membuat 3 kolom widget pada footer. Nanti, hasilnya akan seperti yang terlihat di blog ini yaitu adanya border pada bagian atasnya. Semoga berhasil.

1. Masuk ke akun Blogger.

2. Klik Rancangan >> Edit HTML.

3. Untuk berjaga-jaga, silakan back-up template dulu dengan mengeklik Download Template Lengkap sehingga bila nanti terjadi kesalahan kita dapat dengan mudah mengembalikan tempate seperti semula.

4. Carilah kode ]]></b:skin>. Untuk pencarian cepat, tekan tombol Ctrl + F pada keyboard lalu masukan kode tersebut.

5. Kemudian copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.

#tiga-kotak-bawah {
clear:both;
border-top:3px double #e6e4e3;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}

  • Silakan diubah paddingnya sesuai keinginan Sobat.
Catatan: Jika ketiga kolom tidak diberi "Judul", Anda dapat mencoba menambahkan kode margin-top:14px; di bawah kode border-top:3px double #e6e4e3; agar konten tidak mepet dengan border atas.

6. Selanjutnya cari kode <div id='footer'>.

7. Letakkan kode di bawah ini di atas kode <div id='footer'> tersebut.

<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

8. Klik tombol SIMPAN TEMPLATE.

9. Selesai.

41 comments:

  1. @Muro'i El-Barezy Wah ane lum coba di template lain sob..

    ReplyDelete
  2. ane akan coba di blog baru ane,....lihat di sini agan : thebloggerdevil.blogspot.com.
    Thanks!
    Salam :
    Blogadexme

    ReplyDelete
  3. mantap gan....
    langsung dicoba dan langsung jadi....
    heheh
    makasih y....

    ReplyDelete
  4. @b barusan ane ke situ gan, blum dicoba yah?

    ReplyDelete
  5. @Download Game Gratis iya gan, ane udah liat, sama-sama gan

    ReplyDelete
  6. Asek - asek....
    dicoba di blog q langsung jadi....
    makasih Gan....

    ReplyDelete
  7. @Rifai17 Sama-sama gan, tp ane nyaranin dipake di template yg kayak ane pake aja (Thesis) kl mo nyoba dipake ditemplate laen, ilangin aja border top-nya.

    ReplyDelete
  8. thanks ya gan ..... ane udah follow tag tunggu follow backnya...
    http://yyulio.blogspot.com

    ReplyDelete
  9. @yulio Sama-sama gan..
    ane udah follow back..

    ReplyDelete
  10. Ampuh sobat di blog ane! thanks ya!
    q mau nnya lagi nihh sob, gmana ya cara mmbuat widget Entri Populer Seminggu Terakhir itu, yg bisa berputar-putar link nya!???
    mohon infonya ke blog ane ya! thanks!
    Salam "Blogadexme".
    nice.

    ReplyDelete
  11. @Irwan Saputra Bisa mampir di sini gan http://klikmunadi.blogspot.com/2012/03/entri-populer-dengan-tampilan-gambar.html

    ReplyDelete
  12. mau tny knp yg bagian kiri g pas tengah za???
    ni blog q http://voltraf.blogspot.com

    ReplyDelete
  13. @voltraf Kalo mw di tengah, coba apit kode script widget dengan tag < center > dan < /center >
    Tanda < dan > digabung, jgn dispasi.

    ReplyDelete
  14. Gan, dicoba di blog q kok jadi terbentang dari ujung kanan sampe ujung kiri, melebihi batas page.
    akhirnya belum jadi tk kasih widget 3 kolom diatas footer.
    solusinya gmana ya?
    thanks

    ReplyDelete
  15. @Game4U Tutorial di atas, ane tujukan khusus bwt yg pake template kyk yg ane pake gan, klo di template lain ane ga tau bisa apa nggaknya..

    ReplyDelete
  16. Berhasil gan... Thank's infonya...

    Silahkan liat Blog aq "http://schatzraka-share.blogspot.com"

    By Admin RAKASHARE™

    ReplyDelete
  17. haha...sukses om apa tante nih :D makasih banyakx sama2 pake thesis kunjungan back ya follow ane juga :D

    ReplyDelete
  18. makasih tipsnya.
    sudah saya coba dan berhasil..

    ReplyDelete
  19. @Tionghoa Sama-sama Gan..
    Semoga bermanfaat..

    ReplyDelete
  20. makasih tutorialnya,sudah saya coba akhirnya berhasil juga :D

    ReplyDelete
  21. ijin coba2 dulu sob,,kalo berhasil ane kasih kabar.

    ReplyDelete
  22. oke sobat,,,berhasil di halaman TATA LETAK ane udah ada 3 kolom di atas footer,,,sip mau di isi apa ane juga masih bingung sob,yg penting 3 kolom di atas footer udah berhasil,, thanks sob...
    maen donk sob ke Ants Kaka BLOG terus minta komentarnya sobat di artikel ane... di tunggu sobat yang baik selalu membalas kunjungan dan komentar.

    ReplyDelete
  23. bantu saya gan, dia gak mau di centerkan tiga-tiganya..
    susah kali, gak bisa di akali

    ReplyDelete
  24. @penggunacerdas Mohon maaf Gan, apa yang gak bisa dicenterkan?

    ReplyDelete
  25. enggak ada html ini sob "div id='footer'", ada solusi
    help me sob

    ReplyDelete
  26. @M. Julianto Fardan div id='footer', footer di sini cuma penamaan ada sob, setiap template mungkin namanya berbeda satu sama lain, tapi isinya biasanya link yang bikin template.

    ReplyDelete
  27. allhamdulliah, thanks banget,..ini yang kemarin saya cari

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.