Assalamu’ alaikum para blogger!!. Di postingan kali ini saya kan menjelaskan tentang cara menambah gadget di samping header. Kalian semua udah tau nggak apa yang dimaksud dengan header ?

Oke baiklah akan saya beri tahu contoh gambarnya :

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. Oke, perhatikan trick 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. wassalamua’ alaikum wr.wb.
Sebelum :



Sesudah :