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

widget

• tutorial footer style ide blogspot v1
• widget social media blogspot
• widget social media
• cara membuat widget spoiler background style
• widget kategori floating
• cara membuat widget link di atas postingan blog
• cara membuat widget space iklan text
• cara membuat widget permalink with space iklan
• cara membuat halaman kontak di blog
• cara membuat subscribe with advertise
• cara membuat widget share image hover

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

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