Menambahkan Widget di Header Blog

Assalamu'alaikum Wr.Wb.

Share posting Go Blog Go ini termasuk Hack template, yang akan dibahas bagaimana menambahkan Widget kedalam Header Blog contoh simple memberi logo. Seperti yang sering terlihat di program Afiliasi (iklan) Adsense yang sering terpampang di WebBlog.

ada 2 cara dalam pelaksanaan-nya.

A. Mengubah Ukuran Header Blog

1.Login ke Blogger
2.Dashboard -> Klik Monetize -> Klik Template -> Edit HTML (Jangan lupa Back-up template-nya)
3.Process -> Klik Expand Widget Template -> Gunakan Ctrl+F (untuk mencari cepat) kemudian cari Kode

/* Header
----------------------------------------------- */

atau

/* Header */

4.Kemudian ganti dengan Kode

/* Header */ .header-left{ display: inline-block; height: 35px; width: 350px; float: left; } .header-right { display:inline-block; float:right; }

Perhatikan tanda yang berwarna merah, Anda bisa mengubah dan menyesuaikan ukuran menurut selera Anda, atau megubah posisi float:left dan float:right untuk Logo.
5.Cari Kode berikut ini

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

6.Ganti dengan Kode ini

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

7.Coba sekarang "Preview" template Anda
Dan perhatikan bahwa warna latar belakang header Blogger tidak terlihat atau menghilang.
agar bisa terlihat lagi warna latar header.

8.Cari Kode seperti ini

</div> </div> <div class='header-cap-bottom cap-bottom'> <div class='cap-left'/>

atau Kode ini

<b:include name='description'/> </div> </b:if> </b:includable> </b:widget> </b:section>

9.Tambahkan Kode ini

<div style='clear:both;'/>

10.Save Template-nya

B. Tambahkan Extra Gadget di Header Blog

1.Login ke Blogger
2.Dashboard -> Klik Monetize -> Klik Template -> Edit HTML (Jangan lupa Back-up template-nya)
3.Process -> Klik Expand Widget Template -> Gunakan Ctrl+F (untuk mencari cepat) kemudian cari Kode

<div style='clear:both;'/>

4.Tambahkan Kode berikut ini sebelum Kode diatas

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

5.Sekarang cari Kode ]]></b:skin>
6.Tambahkan Kode CSS dibawah ini sebelum Kode ]]></b:skin>

.header-right { display:inline-block; float:right; width:400px; }

Catatan : lihat yang ditandai merah,  Anda bisa bebas Menambah atau mengurangi ukuran lebar sesuai dengan kebutuhan Anda pada bagian posisi header yang baru.

7.Save Template-nya

Untuk melihat apakah sudah tersisip Gadget baru-nya Masuk ke Layout.
Apabila berhasil maka Tab Elemen dan untuk menambahkan gadget baru sudah ada include di Header Blogger. Sekarang Anda sudah bisa memasukkan Logo.


Mudah-mudahan penjelasan yang agak panjang juga lebar ini tidak membuat penat Mata Mojang dan Bujang. Go Blog Go...!!! Amiin

Wassalam,