AABI‍TALITA BLOG
1.19.2013

Membuat Banner Iklan 125 dengan 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.



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 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 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 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>
Teks berwarna merah,biru dan hijau adalah teks yang bisa sobat ganti.

7. Terakhir simpan dan sobat bisa lihat hasilnya.
Demikian cara memnuat banner iklan 125 dengan Jquery,selamat mencoba...

2 komentar

Ya sob benar memasang barner iklan sangat menguntungkan bagi pemilik blog itu sendiri. barner iklan yang sobat sediakan disini sangat bagus sob, namun saya belum siap memasang barner dikarenakan belum begitu yakin dengan pengunjung blog yang masih dibawa rata-rata minimal 500 visitor perharinya. demikian saya simpan dulu sob tutornya sob. jika diijinkan.

Terima kasih...

silahkan sob,saya juga berfikir demikian karena blog ini masih jauh dibawah rata rata.trims sob kraeng sdh meluangkan waktu tuk berkunjung..

Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.