Cara menambah gadget pada Header

Menambah gadget tepat pada bagian header tentu bermanfaat, diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada bagian header tersebut. Cara ini berbeda dengan menambah gadget diatas ataupun dibawah header yang saya tulis pada artikel Cara Menambah Gadget diatas Header. Tapi 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. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

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='TITEL 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.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.
Read More : http://stzuriah.blogspot.com/2013/04/cara-menambah-gadget-pada-header.html

Tuesday, April 23, 2013