Tutorial kali ini saya tujukan khusus bagi yang menggunakan template Thesis SEO Blogger dari Blog Juragan, template yang sedang saya gunakan saat ini. Seperti kita ketahui bahwa header template tersebut hanya memuat satu kolom. Namun, di dalam HTML template tersebut sudah ada potongan kode CSS untuk header bagian kanan yaitu #r_head.

Kita tinggal menyempurnakan kode-kodenya saja agar header tersebut dapat terbagi menjadi dua kolom. Nantinya, kolom widget yang ada di kanan header ini akan mempunyai lebar sebesar 468 piksel. Cocok bila ingin menaruh banner ukuran 468 x 60.

Baiklah, langsung saja ke topik bahasan kita yaitu cara membagi dua kolom header pada template Thesis SEO Blogger. Berikut ini langkah-langkahnya. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini berguna jika nanti terjadi kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template seperti semula.

4. Cari deretan kode seperti di bawah ini.

#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}

5. Kemudian ganti kode-kode tersebut dengan kode di bawah ini.

#header-inner {
width:432px;
background-position:left;
margin-left:auto;
margin-right:auto;
float:left;
}
#header {
color:#000000;
text-align:left;
}
#r_head{
width:468px;
float:left;
padding-top:10px;
}

6. Setelah itu carilah kode seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>
</b:section>
</div>

7. Kemudian tambah kode berwarna merah sehingga hasilnya menjadi seperti di bawah ini.

<div id='header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Klik Munadi (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

8. Klik tombol "SIMPAN TEMPLATE".

9. Lihat hasilnya pada tab Elemen Laman.

22 تعليقات

  1. gak bisa brow, gimana nih biar bisa?

    ردحذف
  2. @Jaja Maaf brow, tutorial di atas cuma buat di template Thesis SEO Blogger karya dari Blog Juragan. Kalo buat template laen, mang ga bisa brow..

    ردحذف
  3. makasih mas, saya banyak belajar dari sini.. :)

    ردحذف
  4. Malam Mas Bro, minta tolong dong dibuatin tutuorial buat edit kotak komentar biar ada fotonya + tombol "replay".nya....
    hehehe

    ردحذف
  5. @Download Game Gratis Met pagi Mas Bro, coba cek di sini ya, http://klikmunadi.blogspot.com/2012/03/komentar-bertingkat-dengan-warna.html

    ردحذف
  6. OK, siip...
    siap menuju ke TKP, makasih Mas Bro.

    ردحذف
  7. gimana bro cara buat widget tutorial artikel terkait ?

    salam blogger

    http://mjanaun.blogspot.com

    ردحذف
  8. @AutoLink Ane sempet buat postingannya di sini nih, http://klikmunadi.blogspot.com/search/label/Artikel%20Terkait
    Klo artikel terkait yang ane pake skrg, ane dpt dri http://situseo.blogspot.com/2012/03/artikel-terkait-plus-gambar-thumbnail.html

    ردحذف
  9. Wah Mantap niee Mas bro..
    Pas Templates saya sama kayak punya mas,.. !! Makasi udh di share..

    Oh ia.., Klo mau membagi 2 kolom sidebar kayak http://bestseo-bloggertemplate.blogspot.com/ gimana ya mas ???

    mau ganti templates Malas ee.. makasi sebelumnya, N salam kenal..

    Makasi :)

    ردحذف
  10. Ok dah mantap to postnya... siap untk mencoba.
    salam kenal gan

    ردحذف
  11. @BoWo Silakan dicoba Gan, semoga berhasil..

    ردحذف
  12. pas ane nyari kode yg pertama kok munculnya kode ini gan
    #header-inner {
    background-position:center center;
    margin-left:auto;
    margin-right:auto;
    }
    #header {
    color:#000000;
    text-align:left;
    }
    #header h1 {
    font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
    font-size:26px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    letter-spacing:-1px;
    line-height:normal;
    margin:5px 5px 0;
    padding:15px 20px 3px 0;
    text-transform:none;
    }
    #header a {
    color:#000000;
    text-decoration:none;
    }
    #header a:hover {
    color:#000000;
    }
    #header .description {
    color:#999999;
    font-family:georgia;
    font-size:12px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:italic;
    font-variant:normal;
    font-weight:normal;
    letter-spacing:0;
    line-height:normal;
    margin:0 5px 5px;
    max-width:700px;
    padding:0 20px 15px 0;
    text-transform:none;
    }

    terus ane cari kode yg kedua juga munculnya kode ini






    padahal ane pakai template sama seperti agan
    ane kurang jelas gan tolong hubungin ane ya gan
    facebook.com/yulioadicandra

    ردحذف
  13. @Yulio adi candra Coba ganti kode di bawah ini dengan kode pada langkah no. 5
    #header-inner {
    background-position:center center;
    margin-left:auto;
    margin-right:auto;
    }
    #header {
    color:#000000;
    text-align:left;
    }

    Selebihnya lakukan langkah no. 6 sampai selesai.

    ردحذف
  14. أزال المؤلف هذا التعليق.

    ردحذف
  15. @Fendix_r Biasanya itu, ada kode yang kurang lengkap, atau terhapus secara tidak sengaja. Coba lebih teliti lagi gan, dan sebelum edit template sebaiknya di-backup template dulu.

    ردحذف
  16. Thanks Gan sharenya kunjungin blog ane http://gudang2share.blogspot.com

    ردحذف
  17. Ga ada Kode nya mas ,, gmna nih ?

    ردحذف
  18. Terimakasih infonya gan....
    salam kenal...

    ONLINE MUSIC ARRANGER
    www.musicarranger.id
    Jasa Aransemen Musik, Pembuatan Lagu, Jingle / Spot Iklan dan Soundtrack secara ONLINE.

    ردحذف

إرسال تعليق

أحدث أقدم