Memasang Banner di Header Blog

Memasang banner di header blog bisa dikatakan suatu trik promosi yang cukup ampuh, baik untuk promosi blog maupun bisnis affiliasi ataupun lainnya tergantung dari jenis banner yang dipasang di header blog tersebut.

Memasang banner affiliasi di header blog juga merupakan suatu upaya mengoptimalkan fungsi blog dalam membantu promosi bisnis online. Dengan memasang Banner di header blog , misalnya banner affiliasi maka secara otomatis banner affiliasi adalah bagian yang pertama kali akan dilihat oleh pengunjung blog yang memnjadi target atau prospek bisnis.

Berikut adalah cara memasang banner di header blog, Tepatnya memasang banner affiliasi di header blog blogger atau blogspot.
1. Login ke Blogger.com dan arahkan ke> halaman Edit HTML Layout dari blog Anda

2. Pada halaman Edit HTML Anda akan melihat opsi untuk back up template dengan men-download ke sistem anda. Saya sangat menyarankan agar Anda mengambil kesempatan ini untuk backup karena Anda akan membuat perubahan ke template Anda di mana jika ada masalah Anda mungkin tidak dapat mengembalikannya

3. Setelah Anda membuat salinan template, centang pada kotak Expand Template Widget

4. Pada template Anda cari baris kode <b:includable id='main'> di bagian header dari template: (catatan Anda dapat mencari dengan menggunakan CTRL + F dan memasukkan code<b:includable id='main'> ke dalam kotak pencarian.

<b:includable id='main'>

<b:if cond='data:useImage'>

5. Sekarang masukkan 2 baris kode berikut langsung di bawah <b:includable id='main'> dan sebelum <b:if cond='data:useImage'>

<div class='ads'>

</div>

6. Sisipkan kode banner amda diantara <div class='ads'> dan </div>. atau jelasnya seperti ini

<div class='ads'>

SIMPAN KODE HTML BANNER ANDA DISINI

</div>

7. Periksalah kode yang telah Anda masukkan. Jika Anda telah mengikuti langkah-langkah di atas Anda sekarang akan memiliki kode yang menyerupai ini. (Kode afiliasi Anda tentu saja akan berbeda):

<b:includable id='main'>

<div class='ads'>

</div>

<b:if cond='data:useImage'>

8. Bila Anda yakin Anda telah dimasukkan dengan benar kode ke template,Scroll mouse ke atas sampai Anda menemukan baris ini di template Anda ]]></b:skin

9. Segera sebelum baris ]]></b:skin tambahkan baris berikut:

/* Header Banner

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

#header .ads{width:480px; height:80px; float:right;

padding:20px 0px 0px 0px}

10. Klik Simpan Template.

11. Klik Lihat Blog untuk melihat banner baru Anda, dan anda telah berhasil memasang banner affiliasi di header blog dengan ukuran 480 x 80, seperti banner yang dipasang di header blog ini.

UPDATE Memasang Banner di Header Blog

Memasang banner di header blog akan terjadi eror HTML ( error XML: The element type "img" must be terminated by the matching end-tag) jika HTML banner langsung di input langsung. Salah satu solusi untuk menghindari eror HTML dapat dilakukan dengan cara berikut :
1. Klik kanan dan pilih view page source pada halaman / posting web yang sudah ada banner yang akan dijadikan header baner.
2. Ambil kode html-nya ( contoh kode html pada view page source <img border='0' height='60' src='http://ads.friendfinder.com/banners/ff/f_finderaff_468x60_01.gif' width='468'/>
3. Letakan kode HTML dari view page source sesuai dengan tutor di atas, sampai di sini edit HTML belum selesai, karena banner tersebut belum memiliki LINK yang mengarah pada web target banner tersebut.
4. Supaya header banner ini memiliki LINK target maka harus ditambahkan HTML target link ( contoh <a href='http://friendfinder.com/go/g1218968-brk'><img border='0' height='60' src='http://ads.friendfinder.com/banners/ff/f_finderaff_468x60_01.gif' width='468'/></a> )
5. langkah terakhir Klik simpan template.