Cara Membuat Kotak Space Banner Iklan Di Blog (Updated)
Nah, guna memasang space iklan, kita butuh menyusun template tersendiri agar iklan tersusun rapi dan enak dilihat. Jadi tidak asal pasang gambar dan link karena hasilnya bisa berantakan. Kali ini saya akan share kode template iklan yg saya buat serta gunakan untuk blog buka-rahasia.blogspot.com.
Fitur dari template iklan 125x125 buka-rahasia.blogspot.com:
- Fleksibel, susunan yg tampil sesuai dengan lebar widget.
- Efek Border radius.
- Efek Transparan/Opacity ketika gambar di-hover.
- Gampang di edit guna memasang gambar iklan & link.
- Update (28-01-2012, 19.03 WIB): Dengan menghilangkan width serta height, template space iklan ini sekarang bisa digunakan untuk berbagai jenis ukuran banner iklan, 125x125, 300x250, 468x60, dst. Gunakan gambar sesuai dengan ukuran yg diinginkan maka widget space iklan akan muncul sesuai dengan ukuran tersebut.
Cara Memasang Kotak Space Banner Iklan di Widget Blog:
1. Masuk ke dashboard > template/design < Edit HTML
2. Copy kode CSS berikut & letakkan di ATAS ]]></b:skin>
#bukarahasiaads {margin:0px;padding:0px;text-align:center}
#bukarahasiaads img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#bukarahasiaads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}
Ganti nilai pada margin:1px 1px untuk mengatur jarak gambar iklan. Nilai pertama jarak atas bawah, nilai kedua jarak kiri kanan.
3. Save Template.
5. Copy kode HTML berikut (edit terlebih dahulu untuk memasukkan link dan url gambar gambar yg ingin digunakan):
<div id="bukarahasiaads">Jika ingin menambahkan/mengurangi kotak space iklan tambahkan/hapus bagian:
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title=" TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
</div>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a> di atas </div>.
6. Save. Drag/geser gadget ke posisi yg diinginkan, untuk ukuran yg lebar & besar, letakkan widget di bawah header atau di atas posting. Save lagi.
Anda dapat menggunakan gambar berikut sebagai gambar space iklan (ukuran 125x125), untuk ukuran lain atau ingin yg sesuai selera & desain blog, bisa dicari di Google dengan keywords "ads space banner image (ukuran banner)". Upload gambar, ganti URL GAMBAR dengan url gambar yg sudah di-upload.
 |  |  |
 |  |  |
Note: Host/upload gambar sendiri. Jangan hanya gunakan url gambar di atas karena sewaktu-waktu gambar dapat hilang/dihapus. Klik kanan di atas gambar, save as ke komputer, lalu upload.
Jika seorang advertiser tertarik, maka dia tinggal mengklik url yg ada pada gambar banner (biasanya link diarahkan ke halaman pasang iklan/advertise atau ke email/contact form).
Have a nice Blogging.
Jika seorang advertiser tertarik, maka dia tinggal mengklik url yg ada pada gambar banner (biasanya link diarahkan ke halaman pasang iklan/advertise atau ke email/contact form).
Have a nice Blogging.
Cara Membuat Space Banner Iklan di Blog – setelah pada sebelumnya pernah membahas mengenai cara membuat iklan seperti google adsense di blog dengan menggunakan CSS dan HTML, maka sekarang 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 yang terdapat di bawah 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 sudah terdapat space banner 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. Untuk membuat ruang banner pada widget blog, berikut tutorial Cara Membuat Space Banner Iklan di Blog.1. Login ke akun blogger.2. Copy kode berikut ini.
<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 type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-spotlight.js"></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> <div id="banner"> <a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125"> <img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a> <a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125"> <img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a> <a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125"> <img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a> <a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125"> <img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a> </div> <div class="clear"></div>Silahkan ubah banner yang ingin di pasang dengan mengganti URL gambar berwarna merah dengan ukuran 125 X 125.
3. Masuk menu Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.
4. Selesai dan space banner sudah terpasang kedalam blog.
Demikian tutorial Cara Membuat Space Banner Iklan di Blog dengan mudah dan sederhana.