Cara menambah gadget pada Header Blog

Assalamualaikum sobat Blogger, nah kali ini postingan blog SHARING SEPUTAR DUNIA ILMU ini berjudul  "Cara menambah gadget pada Header Blog". Menambah gadget tepat pada bagian header tentu bermanfaat, diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada bagian header tersebut. Cara ini sama dengan membuat header terbagi menjadi 2 bagian yaitu header disebelah kiri dan gadget terletak disebelah kanan header.

Berikut gambar header yang terbagi menjadi 2 :

Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Untuk Berjaga-jaga jika terjadi permasalahan, ada baiknya anda "Download dulu Template Lengkap" (back-up Template).
5. Cari kode yang sama atau mirip dengan kode berikut :

 

/* Header

----------------------------------------------- */

.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

_background-image: none;

}

.Header h1 {

font: $(header.font);

color: $(header.text.color);

text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

}

.Header h1 a {

color: $(header.text.color);

}

.Header .description {

font-size: $(description.text.size);

color: $(description.text.color);

}

.header-inner .Header .titlewrapper {

padding: 22px $(header.padding);

}

.header-inner .Header .descriptionwrapper {

padding: 0 $(header.padding);

}

Catatan :

Setiap template biasanya berbeda kodenya, yang penting perhatikan kode - kode yang ada pada bagian  (/* Header)

6. Ganti kode diatas dengan kode dibawah ini :

/* Header

----------------------------------------------- */

#header {

float:left;

width:40%;

margin: 0px;

text-align: center;

color:#ffcc66;

}

#header2{float:left; width:60%;}

7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode berikut :

<div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>

8. Ganti kode diatas dengan kode dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

10. Simpan Template.

Nah jadilah, Selamat mencoba semoga artikel ini bermanfaat...

Silahkan tinggalkan pendapat anda di kolom comment, TERIMAKASIH