Bagian header pada suatu blog memiliki space yang lumayan lebar. Jika hanya diisi dengan Judul dan deskripsi blog saja bagian ini, rasanya terlalu sayang ruang yang disia-siakan. Salah satu Widget yang bisa kita isi di sana adalah sebuah iklan banner, mungkin itu banner 468x60 ataupun 729x90. Namun pada tampilan template default blog ini tak akan diberikan. Lain cerita jika Anda telah mengunakan template editan yang di download dari internet. Namun untuk template dasar bawaan blog juga bisa di ubah kok dengan menyisipkan beberapa script.
Pada template dasar blogger, mereka hanya memberikan Header blog berupa satu space untuk judul dan deskrips saja, berikut BPO akan memberika sebuah 'akal-bulus' untuk membagi header tersebut sehingga bisa disisipi Banner. Untuk langkah pertama seperti biasa silahkan Log In ke account blogger dan dilanjutkan dengan HTML Editornya. Pada bagian tersebut carilah kode seperti berikut Manfaatkan CTRL+F)
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
Jika telah menemukan kode itu. Sekarang Copy kode di bawah ini. Pastekan kode tersebut DIANTARA </b:section> dan </div> pada editor html blog Anda.
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
<div style='clear: both;'/>
Langkah selanjutnya kita akan mengatur tampilan dari header yang telah dibuat. Untuk tampilan dasar langkahnya sebagai berikut. Selanjutnya Lakukan lagi pencarian kode ]]></b:skin> . Nah kemudian sisipkan kode di bawah ini di atas ]]></b:skin>.
#header, body#layout #header {width:300px;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:480px;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
#header-right, body#layout #header-right {width:480px;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
Untuk melakukan pengaturan dan pengeditan. Bacalah hal berikut ini. Perhatikan Angka yang berwarna merah 300 (ruang untuk nama blog/gambar blog di kiri) sedangkan 480 (untuk ruang iklan di kanan). Anda bisa mengubah ukuran tersebut sesuai selera Anda. Tentu saja kesemuanya harus disesuaikan dengan kebutuhan Anda. Lalu langkah pamungkasnya yaitu Save/Simpan template!
Sekarang coba lihat pada Layout (Tata Letak) Blog Anda natinya pada bagian Header akan ada bagian kedua yang berisi Widget HTML. Nah pada bagian tersebut silahkan di letakkan script iklan Anda di sana.
SEANDAINYA Cara di atas tak berkerja, maka ada alternatif lain yaitu sebagai berikut. Sama, pertama kali Anda langsung ke Editor HTML Blog Anda. Temukan Kode, <b:section class='header'> seperti gambar berikut ini.
Perhatikan Gambar di bagian yang di block Kuning Pastekan Kode <div class='swt-blogheader'>
di bawah ini DIATAS <b:section class='header'>. Sementara itu pada bagian DIATAS </b:section> (yang di block Abu-Abu) pastekan kode pertama. Sementara itu untuk kode kedua adalah pengaturan tampilan dimana caranya dipastekan pada bagian atas carilah kode ]]></b:skin>
<b:section class='swt-blogheader-right' id='swt-blogheader-right' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<!-- /swt-blogheader -->
<div style='clear: both'/>
</b:section>
</div>
<!-- /swt-blogheader -->
<div style='clear: both'/>
.swt-blogheader {position: relative;width: 100%;}
#header {padding: 0;margin:0;overflow:hidden;float:left; width:35%;}
#swt-blogheader-right {padding: 0;margin:0;overflow:hidden;float:right;width:65%;}
#header {padding: 0;margin:0;overflow:hidden;float:left; width:35%;}
#swt-blogheader-right {padding: 0;margin:0;overflow:hidden;float:right;width:65%;}
Ok Jika telah selesai silahkan SAVE TEMPLATE/ SIMPAN. Nantinya setelah Anda Lihat pada bagian LAYOUT atau TATALETAK. Jika Anda melakukan dengan benar maka akan ada tampilan gadget di samping header blog. Silahkan ditambahkan ADD GADGET pada bagian sebelah kanan Header tersebut, Seperti biasa tambahkan Mode HTML dan Pastekan script iklan Anda di sana. Nah itulah cara menyisipkan Iklan pada Header Blog bagi Anda yang berbasis Blogger. Terserah mau menggunakan cara pertama atau yang ke-dua.
Share Yuk
Related Posts
Loading...