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
mkasih bang tutorialnya :)
ReplyDeleteaku nyoba gagal terus bos... newbie
ReplyDeletepusing....
bagus sekali gan artikelnya ... itu ukuran elemen kolom/gadgetnya kan kecil ... kalau yang ukurannya lebih panjang bagaimana bos ...
ReplyDelete