Cara membuat benner iklan dengan Jquery

Unknown

Blogger, Google, Google Adsense

Sunday, 22 December 2013

Belum ada komentar

Krik Krik Krik mau post apa yh hari ini? nanya ama kaca ...
It's right kenapa tidak posting artikel tentang cara membuat banner iklan dengan Jquery ajh yah, hehehehhe suka bingung karena sudah banyak blogger blogger hebat dan terkemuka sudah memposting artikel ini, jadi minder. Tapi tak apalah saya akan meluangkan waktu saya untuk membuat posting ini .

....:::::Kita pergi ke TKP ajh yh gan::::...

• Tahap Pertama
• Seperti biasa buka blogger
• Pilih template lalu edit HTML
• cari kode </head> Gunakan ctrl+f atau tekan F3 agar lebih cepat
• masukan kode dibawah ini sebelum kode </head>

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

• Selanjutnya cari kode ]]></b:skin>

• Lemudian masukan kode dibawah ini tepas diatas 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;}

• Simpan Template

Tahap Kedua 

• Buka Layout/ Tata Letak
• Lalu pilih add Element/ Tambah Elemen Pilih HTML/Javascript
• Kemudian masukan kode ini di dalamnya

<div class="bannerHolder">
<div class="banner"><a href="url iklan"><img width="125" height="125" alt="Judul" src="url Gambar" title="Deskripsi gambar"/></a><p style="display: none;">Teks yang akan muncul ketika ada 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>

• Klik simpan

Note : Ganti kata yang cetak miring dan tebal sesuai keinginan anda