cara membuat widget advertiser banner di blog

Membuat widget advertiser untuk iklan banner di blog sangat diperlukan seorang bloger, berbagai cara dilakukan para bloger untuk membuat tampilan widget space iklan ini lebih menarik dan memperindah tampilan halaman blog. Pada kesempatan kali ini saya terinspirasi oleh seorang sahabat lama, yang membutuhkan suatu koe html untuk keperluan ruang iklan pada halaman blognya. widget space iklan ini berukuran 120 cm x 120 cm ( bujur sangkar ) terdiri dari 4 kolom untuk 4 buah iklan. Sebenarnya widget space iklan ini saya buat untuk banner tapi anda juga dapat mempergunakannya untuk text tapi anda perlu membutuhkan atau menyisipkan kode jenis fontnya untuk lebih maksimal dalam hal tampilannya. Oke untuk mewujudkan widget ini terpasang sempurna di halaman blog silahkan simak penjelasan tutorial dibawah ini atau silahkan anda lihat demonya untuk melihat hasil akhirnya, langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Widget space iklan banner
By : Rivai Silaban | Blog Design
Update : Rabu 11 September 2013
******************************************/
#BD-adsense {
width: 280px;
padding: 5px;
height: 275px;
border: solid #CCCCCC 1px;
}
#BD-adsense .box{
width: 100%;
height: 275px;
text-align: center;
}
#BD-adsense img{
width: 120px;
height: 120px;
}
#BD-adsense img:hover{
opacity:.6;
}
#BD-adsense .kiri{
float: left;
margin:5px;
width: 120px;
padding: 2px;
border:solid #CCCCCC 1px;
height: 120px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #990000;
}
#BD-adsense .kanan{
float: right;
margin:5px;
width: 120px;
padding: 2px;
border:solid #CCCCCC 1px;
height: 120px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #990000;
}/*** Blog Design CSS and ***/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .

<!-- Rivai Silaban | BLOG DESIGN banner start -->
<div id="BD-adsense"><div class="box">
<div class="kiri"><a href="#" target="_blank" title="advertiser"><img alt="advertiser" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDI21XZyveQt7jOgtfsedBGca83HGhRGI35iqWRGuY3E7CDiyq-wPkP_Vbe2lV4D67e0YWSSEAK_A3Z-bvnMI4yu1eRXfs_zwSGgw1-QrVkzEYsgB-T8bGpCStmjiHGoqBoaQpvvYQyk/s1600/advertiser.gif" title="advertiser"/></a></div>
<div class="kanan"><a href="#" target="_blank" title="advertiser"><img alt="advertiser" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDI21XZyveQt7jOgtfsedBGca83HGhRGI35iqWRGuY3E7CDiyq-wPkP_Vbe2lV4D67e0YWSSEAK_A3Z-bvnMI4yu1eRXfs_zwSGgw1-QrVkzEYsgB-T8bGpCStmjiHGoqBoaQpvvYQyk/s1600/advertiser.gif" title="advertiser"/></a></div>
<div class="kiri"><a href="#" target="_blank" title="advertiser"><img alt="advertiser" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDI21XZyveQt7jOgtfsedBGca83HGhRGI35iqWRGuY3E7CDiyq-wPkP_Vbe2lV4D67e0YWSSEAK_A3Z-bvnMI4yu1eRXfs_zwSGgw1-QrVkzEYsgB-T8bGpCStmjiHGoqBoaQpvvYQyk/s1600/advertiser.gif" title="advertiser"/></a></div>
<div class="kanan"><a href="#" target="_blank" title="advertiser"><img alt="advertiser" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDI21XZyveQt7jOgtfsedBGca83HGhRGI35iqWRGuY3E7CDiyq-wPkP_Vbe2lV4D67e0YWSSEAK_A3Z-bvnMI4yu1eRXfs_zwSGgw1-QrVkzEYsgB-T8bGpCStmjiHGoqBoaQpvvYQyk/s1600/advertiser.gif" title="advertiser"/></a></div>
</div></div>
<!-- Rivai Silaban | BLOG DESIGN banner End -->

Keterangan Code

• Tulisan kode warna MERAH ganti dengan link iklan banner anda.
• Untuk membuat link iklan banner anda lebih seo friendly silahkan tambahkan kode title=' bla..bla ' untuk linknya dan Alt=' bla..bla ' pada bagian gambar
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan widget ini dengan thems template anda.

Kesimpulan

Widget space iklan banner ini memiliki kode valid html 5 dan SEO Friendly serta memiliki kode CSS valid CSS 3, Kode yang digunakan ringan dan simple sehingga tidak akan mempengaruhi tampilan iklan banner halaman anda.

Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.

Widget advertiser untuk banner blog
Rabu, 11 September 2013
By : Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:24 PM