Cara Membuat Kotak Banner Di Blog Untuk Iklan

Cara membuat kotak banner di blog untuk iklan-Membuat kotak banner iklan di blog dengan berbagai ukuran kotak banner iklan sangatlah dibutuhkan sebagian blogger. Karena menampilkan space banner iklan di blog memberi peluang dan informasi pada advertiser bahwa blog tersebut menawarkan space iklan yang dapat disewa. Siapa tahu kunjungan blog Anda bisa terus meningkat, kemudian ada yang berminat pasang iklan disana. Untuk memudahkan para pemasang iklan memasang iklan di blog Anda, maka Anda sebaiknya menyediakan kotak banner iklan.

Cara Membuat Kotak Banner Di Blog Untuk Iklan

Membuat kotak banner karena space banner iklan sangat dibutuhkan. Maka sebagai blogger Anda harus tahu cara membuat kotak banner iklan di blog. Menampilkan space iklan berupa banner ini untuk membuat penghasilan di blog/website Anda meningkat. Banyak sekali cara membuat blog Anda menjadi ladang uang, apabila blog Anda sudah memenuhi standar visitor blog. Menampilkan space iklan berupa banner di blog/website bisa menjadi peluang bisnis tersendiri.

Bagaimana cara membuat kotak banner iklan di blog?. Apabila Anda belum atau tidak bisa membuat banner iklan sendiri. Kali ini Saya akan berbagi pada Anda yang kemungkinan belum mengetahui cara membuat kotak banner iklan di blog/website yang sedang dikelolah. Guna mempermudah Kita membuat kotak iklan (kotak banner) di blog, Kita membutuhkan scrip atau kode HTML. Langsung saja ini dia cara mudah membuat banner iklan (kotak iklan). Silahkan ikuti langkah-langkah di bawah ini  untuk pemasangan scriptnya.

Cara membuat kotak banner di blog untuk iklan.
1. Login ke akun blogger.
2. Klik menu "Tata Letak" kemudian pilih "Tambah Widget" klik  HTML/Javascript.
3. Kemudian copypaste salah satu kode scrip di bawah ini. Kemudian klik "Simpan".
Kotak Banner Iklan I 

Cara Membuat Kotak Banner Di Blog Untuk Iklan

Kode scrip banner iklan-nya:

<style type='text/css'>
.kotak-iklan { background : #ddd; text-align : center; border-radius : 4px; padding : 12px 0; } 
.kotak-iklan img { background : #ebf5f9; margin : auto; padding : 5px; text-align : center; width : 125px; height : 125px; } 
.kotak-iklan img:hover { background : #fff; }
</style>

<div class="kotak-iklan">
<a href="MASUKAN URL SITUS DISINI" title="Pasang Iklan"><img alt="iklan banner" src="MASUKAN URL GAMBAR IKLAN DISINI"/></a>
<a href="MASUKAN URL SITUS DISINI" title="Pasang Iklan"><img alt="iklan banner" src="MASUKAN URL GAMBAR IKLAN DISINI"/></a>
<a href="MASUKAN URL SITUS DISINI" title="Pasang Iklan"><img alt="iklan banner" src="MASUKAN URL GAMBAR IKLAN DISINI"/></a>
<a href="MASUKAN URL SITUS DISINI" title="Pasang Iklan"><img alt="iklan banner" src="MASUKAN URL GAMBAR IKLAN DISINI"/></a></div>

Kotak Banner Iklan II 

Cara Membuat Kotak Banner Di Blog Untuk Iklan

Kode scrip banner iklan-nya:


<div class="post-body entry-content" id="post-body-1361435216450934628" itemprop="articleBody">
<div class="separator" style="clear: both; text-align: center;">
<a href="MASUKAN URL SITUS DISINI" style="margin-left: 1em; margin-right: 1em;"><img height="288" src="MASUKAN URL GAMBAR IKLAN DISINI" title="Banner Iklan 125x125" width="320" /></a></div>
 

Kotak Banner Iklan III 

Cara Membuat Kotak Banner Di Blog Untuk Iklan

Kode scrip banner iklan-nya:

<style type="text/css">
div#banner a { text-decoration:none; color:#fff; text-align:center;}
div#banner { width:260px; margin:0 auto; }
#banner .iklan { display:block; width:125px; height:125px; border:2px solid #52e052; float:left; position:relative; }
#banner .iklan img{ display:block; width:125px; height:125px;}
#banner .iklan .caption { position:absolute; top:90px; left:2px; padding:3px; font:bold 10px arial; width:115px; display:none; background:#000; }
.clear { clear:both; }
.effect { box-shadow: 0 0 10px #52e052; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-spotlight.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function () { $('#banner .iklan').each(function () { title = $(this).attr('title'); $(this).append('<span class="caption">' + title + '</span>'); $(this).attr('title',''); }); $('#banner .iklan').hover( function () { $(this).siblings().css({'opacity': '0.1'}); $(this).css({'opacity': '1.0'}).addClass('effect'); $(this).children('.caption').show(); }, function () { $(this).children('.caption').hide(); } ); $('#banner').mouseleave(function () { $(this).children().fadeTo('100', '1.0').removeClass('effect'); }); }); </script>

<br />
<div id="banner">
<a class="iklan" href="MASUKKAAN URL SITUS DISINI" title="Pasang Iklan Disini Ukuran 125 x 125">
<img alt="banner iklan" src="MASUKAN URL GAMBAR IKLAN DISINI" /></a>
<a class="iklan" href="MASUKKAN URL SITUS DISINI" title="Pasang Iklan Disini Ukuran 125 x 125">
<img alt="banner iklan" src="MASUKAN URL GAMBAR IKLAN DISINI" /></a>
<a class="iklan" href="MASUKKAN URL SITUS DISINI" title="Pasang Iklan Disini Ukuran 125 x 125">
<img alt="banner iklan" src="MASUKAN URL GAMBAR IKLAN DISINI" /></a>
<a class="iklan" href="MASUKKAN URL SITUS DISINI" title="Pasang Iklan Disini Ukuran 125 x 125">
<img alt="banner iklan" src="MASUKAN URL GAMBAR IKLAN DISINI" /></a>
</div>
<div class="clear">
</div>
 
Kotak Banner Iklan IV 

Cara Membuat Kotak Banner Di Blog Untuk Iklan

Kode scrip banner iklan-nya:

<div style="background: #dde3e8; border: 1px solid #4b4b4b; height: 250px; margin: 0; padding: 0; position: relative; text-align: center; text-decoration: none; width: 300px;">
<div style="padding-top: 55px;">
<span style="font: 30px Oswald;">Advertise </span><br />
<span style="font: 40px Oswald;">300x250 </span><br />
<span style="font: 30px Oswald;">Here</span></div>
<br />
<a href="MASUKKAN URL SITUS DISINI" style="color: #0099cc; float: right; padding: 10px 5px 0 0; text-decoration: none;" target="_blank" title="Pasang Iklan di Sini"><small>Ads by plazaonly.com</small></a></div>


Kotak Banner Iklan V 

Cara Membuat Kotak Banner Di Blog Untuk Iklan

Kode scrip banner iklan-nya: 

<div style="background: none; border: none; height: 250px; margin: 0; padding: 0; width: 300px;">
<a href="MASUKAN URL SITUS DISINI" target="_blank" title="blog banner"><img alt="iklan" src="MASUKAN URL GAMBAR IKLAN DISINI" title="title image iklan" /></a>
</div>
 
Kotak Banner Iklan VI

Cara Membuat Kotak Banner Di Blog Untuk Iklan

Kode scrip banner iklan-nya:

<div class="separator" style="clear: both; text-align: center;">
<a href="MASUKAN URL SITUS DISINI"><img src="MASUKAN URL GAMBAR IKLAN DISINI" width="100%" /></a></div>

Pada kode scrip banner iklan di atas, Saya berikan dengan banyak variasi agar Anda bisa memilih mana yang cocok dengan iklan yang mau Anda pasang. Kotak banner iklan mulai dari 125x125 pixel sampai dengan width:100. Apabila ingin memasang iklan di blog yang disertai hover image dengan sedikit jQuery agar terlihat lebih menarik caranya cukup mudah bahkan simple. Cukup dengan memasukan kode scrip yang ada di atas lalu menaruh kode tersebut kedalam widget blog maka space banner pun siap terpajang di blog. Apabila ingin merubah default image ubah saja pada bagian URL gambar dengan gambar atau banner iklan yang akan dimasukan. Jika ingin merubah tinggi dan lebarnya widget yang akan Anda pasangi banner iklan, sulahkan ubah width:dan height: pada kode scrip.

Jika sudah terdapat space banner iklan di blog Anda,  yang terdapat di sidebar blog atau bagian blog lainnya dan trafik blog sudah meningkat maka visitor jika ingin menempel iklannya ke dalam blog tersebut juga tidak sungkan lagi. Namun space banner iklan ini memang sering Kita butuhkan untuk iklan Kita. Entah itu iklan affiliasi yang sedang Kita ikuti atau Kita hanya ingin membuat blog menarik saja maka kode scrip space banner iklan ini perlu untuk kita miliki. Maka cara membuat kotak banner di blog untuk iklan akan menjadi mudah. Selamat mencoba menampilkan banner iklan di blog kesangan Anda...!!.







Add Your Comments

Disqus Comments