Cara buat banner iklan versi jquery

memasang iklan di blog membawa keuntungan tersendiri bagi pengelola blog.terlebih lagi bila blog yang dikelola tersebut sudah memiliki pengunjung yang banyak,dengan begitu akan banyak juga yang melihat iklan yang ditampilkan,ditambah  lagi jika kita mampu menghias tampilan iklan tersebut sehingga terlihat lebih menarik.salah satunya adalah dengan membuat banner iklan dengan sentuhan Jquery,contoh banner iklan dengan sentuhan Jquery seperti pada contoh berikut :

JIka sobat tertarik ingin membuatnya berikut langkah pembuatannya :

1. Masuk dulu ke akun blogger sobat kemudian pilih menu template, Lalu Edit HTML setelah itu centang Centang kotak kecil Expand Widget Templates.

2. Kemudian cari kode  </head> (untuk mempercepat gunakan Ctrl+F pada keyboard) jika sobat sudah menemukan kode tersebut copy kode di bawah ini dan letakan kode tersebut diatas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

3. Copy paste kode berikut dibawah kode tadi.


<script src='http://hapiajavascript.googlecode.com/files/banner-box.js' type='text/javascript'/>

4. Selanjutnya  cari kode kode  ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atas/sebelum kode ]]></b:skin>


.bannerHolder{/* The main banner unordered list */
height:270px;width:270px;
float:left;margin:20px 15px;padding:10px;background:#f7f7f7;border:1px solid #eee;
/* CSS3 rounded corners */
-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
.bannerHolder div{/* Disabling the bullet of the div elements: */list-style:none;display:inline;}
.banner{/* The banner divs */position:relative;width:125px;height:125px;overflow:hidden;float:left;margin:5px;}
.banner img{/* The banner divs */display:block;border:none;}
.banner div{/* The dark animated divs */
position:absolute;z-index:100;background-color:#222;width:60px;height:60px;cursor:pointer;
/* Setting a really big value for border-radiuswill make the divs perfect circles */
-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;}
/* Positioning the animated divs outside thecorners of the visible banner area: */
.banner .cornerTL{ left:-63px;top:-63px; }.banner .cornerTR{ right:-63px;top:-63px; }.banner .cornerBL{ left:-63px;bottom:-63px; }.banner .cornerBR{ right:-63px;bottom:-63px; }
.banner p{/* The "Visit Company" text */
display:none; /* hidden by default */
left:0;top:37px;width:100%;z-index:200;position:absolute;
font-family:Tahoma, Arial, Helvetica, sans-serif;color:white;font-size:11px;text-align:center;cursor:pointer;}

5. Simpan Template sobat. 

6. Masuk pada Tata Letak > Add Gadget > HTML/Java Script dan masukan Kode berikut ke dalamnya..


<div class="bannerHolder">

<div class="banner"><a href="URL IKLAN"><img width="125" height="125" alt="JUDUL IKLAN" src="URL GAMBAR" /></a><p style="display: none;">TEKS YANG AKAN MUNCUL KETIKA DISOROT MOUSE</p><div class="cornerTL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><div class="cornerTR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><div class="cornerBL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><div class="cornerBR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div></div>

 </div></div>

Ganti tulisan yang berwarna KUNING