Membuat Kolom Widget Di Samping Header Blog

Home / Tutorial Blogger / Membuat Kolom Widget Di Samping Header Blog

Membuat Kolom Widget Di Samping Header Blog

Posted by Rezqy Dwikara Goratama 19 Mei 2012

Membuat Kolom Widget Di Samping Header Blog - Seperti yang ditanyakan oleh salah satu pengunjung, saya akan memberikan cara untuk Membuat Kolom Widget Di Samping Header Blog. Mungkin cara ini bisa digunakan untuk menaruh iklan yang dipasang di blog.

Silahkan ikuti langkah ini untuk membuatnya :

1. login blogger.com
2. Tata Letak ---> Edit HTML
3. Lalu cari kode seperti 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. ganti kode tersebut dengan 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;
}

#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;
}

Kode 900px adalah panjang header, kode yang berwarna hijau 190px adalah tinggi header.

5.Kemudian cari kode seperti di bawah 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. Kalau sudah ketemu ganti kode tersebut dengan kode di bawah 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.Klik tombol simpan template.
Kemudian pilih Elemen Halaman, lalu lihat perbedannya. Mungkin beberapa blog tidak berhasil untuk memasangnya, dan ambilan kode yang mirip dengan diatas.. selamat mencoba - Membuat Kolom Widget Di Samping Header Blog