Menambah Kolom/Gadget Disamping Header

Menambah elemen di samping header Oke langsung aja kita coba ya...
1. Seperti biasa login ke blogger dulu
2. Klik layout dan pilih edit html (jangan mencontreng "Expand Widget Templates")
3. Cari kode ini

/* Header */
#header-wrapper { width:900px; margin:0 auto 0px; background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center; height:190px; } #header-inner { width:900px; background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 0px; text-align: left; color:$pagetitlecolor; }

4. Hapus kode tadi lalu ganti dengan kode ini

/* Header */
#header-wrapper { width:900px; margin:0 auto 0px; no-repeat top center; height:190px; } #head-inner { width:600px; background-position: left; margin-left: auto; margin-right: auto; float:left; } #header { margin: 0px; text-align: left; color:#ffcc66; } #r_head{ width:300px; float:left; padding-top:10px; }

5. Kemudian cari lagi kode ini

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


6. Ganti semua kode di atas dengan kode ini

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


7. Simpan perubahan
8. Klik page elements, kalo berhasil jadinya seperti ini

3 comments:

  1. aku nyoba gagal terus bos... newbie
    pusing....

    ReplyDelete
  2. bagus sekali gan artikelnya ... itu ukuran elemen kolom/gadgetnya kan kecil ... kalau yang ukurannya lebih panjang bagaimana bos ...

    ReplyDelete

Budayakan membaca sebelum berkomentar NO SPAM NO SARA
Jangan menaruh link aktif jika tetap nekat admin akan menandainya sebagai SPAM.