Header Ads

Cara Membuat Kolom Widget di Sebelah Kanan Header

Cara Membuat Kolom Widget di Sebelah Kanan Header

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.

21 comments:

  1. gak bisa brow, gimana nih biar bisa?

    ReplyDelete
  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..

    ReplyDelete
  3. makasih mas, saya banyak belajar dari sini.. :)

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

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

    ReplyDelete
  6. OK, siip...
    siap menuju ke TKP, makasih Mas Bro.

    ReplyDelete
  7. gimana bro cara buat widget tutorial artikel terkait ?

    salam blogger

    http://mjanaun.blogspot.com

    ReplyDelete
  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

    ReplyDelete
  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 :)

    ReplyDelete
  10. Ok dah mantap to postnya... siap untk mencoba.
    salam kenal gan

    ReplyDelete
  11. @BoWo Silakan dicoba Gan, semoga berhasil..

    ReplyDelete
  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

    ReplyDelete
  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.

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  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.

    ReplyDelete
  16. Thanks Gan sharenya kunjungin blog ane http://gudang2share.blogspot.com

    ReplyDelete
  17. Ga ada Kode nya mas ,, gmna nih ?

    ReplyDelete
  18. mantep banget nih tutorialnya

    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.