Tujuan dari tutorial ini hanya semata-mata agar tampilan blog kita terlihat rapi dan tertata serta tidak tampak seperti blog yang memiliki tampilan banner yang bertumpuk-tumpuk, sehingga bisa tampil minimalis serta tampak agak profesional. Untuk contoh demonya, silakan anda lihat tampilan Banner iklan head/atas di Blog Garux ini pada halaman Home dan Postingan akan berbeda.
sebelum memulainya, silahkan di pilih terlebih dahulu banner apa saja yang akan di tampilkan, untuk tutorial ini hanya terbatas untuk dua banner saja.
Untuk cara-caranya :
- Masuk ke halaman Blogger
- Pilih opsi Layout/Tata Letak disebelah kiri
- Klik Add gadget sesuai posisi yang anda inginkan
- Pilih opsi HTML/Javascript
- Masukkan kode dibawah ini :
<a class="head-ban1" href="Link Iklan 1" target="_blank"><img src="Link Banner 1" /></a>
<a class="head-ban2" href="Link Iklan 2" target="_blank"><img src="Link Banner 2" /></a>
Nb:
Ganti tulisan berwarna merah dengan link iklan anda
Ganti tulisan berwarna hijau dengan link banner anda
- Jika sudah, silakan di save
- Sekarang pilih opsi Theme/Tema di sebelah kiri
- Tekan titik tiga dan pilih Edit HTML
- Cari kode </b:skin> (cari menggunakan CTRL+F)
- letakkan kode berikut di bawah kode </b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.head-ban1 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'>
.head-ban2 {display:none;}
</style>
</b:if>
- Kemudian di save/simpan
- Selesai.
Dua banner iklan anda sekarang bisa tampil berbeda secara otomatis di halaman home dan postingan.
Semoga tutorial ini bisa bermanfaat bagi sobat-sobat blogger yang memerlukannya.
Sekian dan terima kasih