Cara Menambah Gadget di samping Header

Cara Menambah Gadget di samping Header

 

Kalau header yang biasa seperti itu, di bagian sampingnya tidak akan bisa ditambah dengan gadget. Kalau begitu saya akan memberi tahu tentang cara menambah gadget di samping header. So anda harus duduk dengan manis dan perhatikan tips berikut ini :

1. Login ke blogger.com
2. Pilih Layout/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. Lalu ganti kode tersebut dengan kode berikut 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 yang berwarna merah 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.
----------------------------------------------------------------------------
Sebelum :

----------------------------------------------------------------------------
sesudah :