Menambah Kolom Disamping Header

Waktu pertama kali memakai template ini, saya kebingungan gimana ya caranya pasang iklan di samping header. Akhirnya saya mendapatkan tutorialnya dari kang rohman yang berguna untuk 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 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

5 komentar:


Thanks for visit, I hope you enjoy!
Do you have any suggestions? Add your comment. Please don't spam!