Header Ads

Cara Membuat 3 Kolom di Bawah Header pada Template Thesis SEO

Cara Membuat 3 Kolom di Bawah Header pada Template Thesis SEO

Tutorial berikut saya tujukan khusus bagi yang menggunakan template yang sama dengan yang saya pakai yaitu Thesis SEO Blogger Template karya dari Blog Juragan. Langsung saja, untuk membuat 3 kolom di bawah header, silakan simak langkah-langkahnya di bawah ini. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Bila nanti terjadi kesalahan dalam pengeditan kita sudah mempunyai backupnya sehingga dengan mudah mengembalikan template seperti semula.

4. Cari kode ]]></b:skin>. Gunakan fitur pencarian pada browser agar cepat menemukannya.

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

#box-main-container {
clear:both;
border-bottom:3px double #e6e4e3;
}
.box-column {
padding:0px 10px 10px 10px;
}

Catatan: Jika ketiga kolom tidak diberi "Judul", tambahkan kode margin-top:14px; di bawah kode border-bottom:3px double #e6e4e3; agar konten tidak mepet dengan border atas.

6. Selanjutnya cari kode <div id='main-wrapper'>.

7. Copy kode di bawah ini dan paste di atas kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

8. Klik SIMPAN TEMPLATE.

9. Selesai.

Setelah ditambahkan widget, maka hasilnya akan tampak seperti gambar di atas.

16 comments:

  1. wah info yang menarik...bisa di pake ditemplate ku ga gan?

    ReplyDelete
  2. @Muro'i El-Barezy Coba aja gan liat-liat templatenya..
    tapi saya saranin dicoba-coba di blog yang lain aja dlu..

    ReplyDelete
  3. Ga ah saya taku error jadinya

    ReplyDelete
  4. mantap gan, makasi infonya. saya sudah lama cari trik ini akhirnya ketemu juga. Saya coba praktekan dan berhasil mantp gan..

    ReplyDelete
  5. @Diat Kalo takut eror, coba-coba di template laen aja dulu..

    ReplyDelete
  6. @admin Sama-sama Gan..
    Semoga tidak mengecewakan..

    ReplyDelete
  7. mantap sobat, sngat berkasiat di Blog baru saya!
    salam "Blogabuabu"
    Thanks!

    ReplyDelete
  8. @Irwan Saputra Wah bikin blog lagi nih sob..
    Barusan ane ke sana, tapi lum diisi widget yah?

    ReplyDelete
  9. aye dah coba di blog uji coba, tapi ternyata kalo template bawaan blogger gak memiliki kode div id='main-wrapper'
    tapi gak tahu juga kalo template yang lainnya
    makasih infonya gan...

    ReplyDelete
  10. @blog kontroversi indonesia Mang gan, beda template bisa jadi beda kodenya..
    terima kasih yah atas infonya..

    ReplyDelete
  11. wah,, makasih atas tutornya kang..

    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.