Insert Widget Untuk Banner Atau Ads Pada Blogger

Untuk menambahkan widget pada blogger header tepatnya disebelah judul blog, kita dapat merubahnya pada section header di ikuti dengan penambahan css, karena secara default hal tersebut tidak terdapat pada template yang disediakan. Hal ini dapat berguna jika teman ingin menempatkan ads atau form search serta banner tepat disebelah judul blog teman.

Kita bisa menggunakan template bawaan yang disediakan oleh blogger, untuk merubahnya teman tinggal mengikuti langkah-langkah dibawah ini:

1. Pertama tentu harus login menggunakan account blogger

2. Setelah itu masuk ke Dashboard, klik Design >> Edit HTML >> checklist expand widget templates.  Kemudian teman harus menemukan kode dibawah ini, caranya tekan ctrl-F dan kopikan sebagian kode dibawah di kotak pencarian.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Teman (Header)' type='Header'/>
....................
</b:widget>
</b:section>

Lalu tepat di bawah </b:section> tambahkan kode berikut:

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Setelah selesai langkah diatas, sekarang saatnya menambahkan css, masih di tempat yang sama seperti diatas, teman harus mencari kode ini: ]]></b:skin>

Dan tepat diatasnya, kopikan kode di bawah:

#header, body#layout #header {width:35%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:55%;display:inline-block;float:right;padding:10px;}
#header-right .widget {margin:0;}

Setelah selesai untuk semua langkah diatas klik Save Template.

Saat ini tentunya teman bisa melihat widget addelement untuk gadget tepat disebelah atau di bawah judul blog (teman bisa melihatnya pada Dashboard >> Design), atau bisa dilihat seperti gambar berikut:

Untuk menambahkan widget pada header ini, penulis telah mencobanya untuk template yang disediakan oleh blogger yaitu: simple template, etheral dan  awesome. inc dan semuanya bisa berjalan dengan baik.

Jika setelah ditambahkan widget terlihat kurang pas, teman bisa menyesuaikannya sesuai keinginan dengan merubah css yang di beri warna merah seperti dibawah ini dan cobalah dengan kombinasi prosentase sampai terlihat bagus menurut teman.

#header, body#layout #header {width:40%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:50%;display:inline-block;float:right;padding:

Demikianlah, mudah-mudahan tulisan ini dapat bermanfaat.

Cara lain yang bisa sobat ikuti pada alamat : http://pengguna-komputer.blogspot.com/2013/05/cara-menambahkan-widget-disamping-header.html

Terima kasih dan jangan ragu untuk meninggalkan komentar, salam.