Skip to main content

Cara Membuat Space Banner Iklan di Blog



Space Banner Iklan 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmFfme4ZJiJgYPmmc-tj8M6ap4bw6zqomMrveIyQJ2nar2yzDOJYGdYEhi2L74H0Q9R40AANtjbADAVhiwA4-JC6EdfBfWxVTknLp1t2Ww8BXx_pf3RoA9Bc_wOmSinAUuQ1JEuQZXjM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmFfme4ZJiJgYPmmc-tj8M6ap4bw6zqomMrveIyQJ2nar2yzDOJYGdYEhi2L74H0Q9R40AANtjbADAVhiwA4-JC6EdfBfWxVTknLp1t2Ww8BXx_pf3RoA9Bc_wOmSinAUuQ1JEuQZXjM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmFfme4ZJiJgYPmmc-tj8M6ap4bw6zqomMrveIyQJ2nar2yzDOJYGdYEhi2L74H0Q9R40AANtjbADAVhiwA4-JC6EdfBfWxVTknLp1t2Ww8BXx_pf3RoA9Bc_wOmSinAUuQ1JEuQZXjM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmFfme4ZJiJgYPmmc-tj8M6ap4bw6zqomMrveIyQJ2nar2yzDOJYGdYEhi2L74H0Q9R40AANtjbADAVhiwA4-JC6EdfBfWxVTknLp1t2Ww8BXx_pf3RoA9Bc_wOmSinAUuQ1JEuQZXjM/s207-p-no/" alt="banner iklan"/></a>
</div>
<div class="clear"></div>
Silahkan ubah banner yang ingin di pasang dengan mengganti URL gambar berwarna merahdengan 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.
Labels:

Comments

Post a Comment

Popular posts from this blog

MEMBUAT BLOG DI TERIMA ADSENSE

Membuat blog langsung di terima Google adsense atau sekali daftar langsung diterima oleh Google Adsense adalah idaman para blogger pemula. Karena Masa depan dari para publisher adalah mendapatkan bayaran dari iklan yang di tempatkan di Blog. Saya pun dulu seperti itu . Ada semangat ngeblog ketika blog yg kita miliki terpampang iklan iklan dari GA.  Walaupun ada banyak situs pengganti google adsense yg juga bayar mahal namun GA tetap menjadi pilihan paling utama .  Google adsense masih menjadi Favorit di urusan mendapatkan penghasilan dari internet Baca Juga ; Alasan Blog Di Tolak Google Adsense Untuk bekerja sama dengan Google adsense ada ketentuan ketentuan dasar yg harus Blogger mania ketahui kemudian terapkan. Walaupun ada banyak cara untuk mendapatkan adsense, Baik itu youtube atau ad mob tetapi disini kita bicara tentang Google adsense di Blog. Ketentuan inilah yg nantinya akan menjadi kebijakan yg dinilai oleh google apakah Blogger mania mengikuti atura...
Post a Comment
Read more

CARA BLOG TERINDEKS SEACH ENGINE

CARA BLOG TERINDEKS SEACH ENGINE - bаgаіmаnа cara cepat terindex Google atau dі indeks оlеh mesin pencari (search engine) уаng lainnya pada blog/website,  ѕеbеnаrnуа tips SEO іnі ѕudаh banyak diulas оlеh para blogger maupun pakar SEO, tарі disini ѕауа аkаn mengulas kembali dаrі pengalaman уаng ѕudаh ѕауа terapkan dalam blog ini. Sahabat Blogger Mania kunci dari kesuksesan ngeblog adalah yang pertama kali harus ada dalam mesin pencari.  Setelah berada di mesin pencari kita menyediakan Iklan yang relevan dan iklan yang di tempatkan untuk bisa di klik oleh visitor. Cara Agar Artikel/Postingan Cepat Terindex Google , Yahoo dan Bing, banyak pertanyaan dаrі pengunjung tеntаng bаgаіmаnа cara agar artikel atau postingan dі blog cepat terindex Google atau dі indeks оlеh mesin pencari (search engine) уаng lainnya pada blog/website,  ѕеbеnаrnуа tips SEO agar postingan/artikel blog cepat muncul dі Google index іnі ѕudаh banyak diulas оlеh para Blogger maupun pakar SEO, tарі disini ѕ...
Post a Comment
Read more

Auto key tutorial AKA Easy animation

This tutorial will teach you how to easily animate an object using the Auto Key animation technique, this technique lets you animate without bones or anything. Using this technique you set the initial and final stages in the animation and the program automatically creates all the stages in between them making you a smooth animation without a lot of pain. You could use vertices, faces, objects, or anything including any modifier that lets you alter the shape of a model to animate using this technique. This tutorial is targeted at mid-level 3DS MAX people who want to get into animation. Open up 3DS MAX or reset it if you have already opened it. Create a plane in the same size as the one displayed below, the size does not have to be exact as you can use anything for this. You can adjust the size of the plane once you have already created it by changing the parameters in the modifier tab. Red Outline : Modifier panel/Parameters Create a "Sphere" and place it near ...
Post a Comment
Read more