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 تعليقات

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

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

    ردحذف
  3. Ga ah saya taku error jadinya

    ردحذف
  4. mantap gan, makasi infonya. saya sudah lama cari trik ini akhirnya ketemu juga. Saya coba praktekan dan berhasil mantp gan..

    ردحذف
  5. @Diat Kalo takut eror, coba-coba di template laen aja dulu..

    ردحذف
  6. @admin Sama-sama Gan..
    Semoga tidak mengecewakan..

    ردحذف
  7. غير معرفمارس 14, 2012

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

    ردحذف
  8. @Irwan Saputra Wah bikin blog lagi nih sob..
    Barusan ane ke sana, tapi lum diisi widget yah?

    ردحذف
  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...

    ردحذف
  10. @blog kontroversi indonesia Mang gan, beda template bisa jadi beda kodenya..
    terima kasih yah atas infonya..

    ردحذف
  11. wah,, makasih atas tutornya kang..

    ردحذف

إرسال تعليق

أحدث أقدم