Advertise box (Hover Effect)

 Adsense box..?? ada yang sudah tahu? atau bahkan sudah memasangnya di blog?, yup jika sudah maka saya tidak perlu menjelaskannya lagi dengan panjaaaang lebaar, tetapi pada adsense box anda cukup hanya dengan coding atau masih menggunakan gambar biasa? jika masih menggunakan gambar yang tentu saja akan menambah berat blog kalian maka kalian perlu meminimalisir berat blog anda dengan melihat tutorial dari saya kali ini.


Seperti yang dibahas pada postingan saya yang berjudul Adsense Box as like as Buysellads, postingan kali ini hampir sama dengan postingan sebelumnya tetapi letak keunggulan postingan kali ini adalah sebagai berikut :

• Tidak menggunakan gambar satupun
• Lebih mudah dipakai
• Lebih user friendly
• Hanya memakai widget (tanpa edit html)
• Cocok untuk pemula

Tetapi apabila anda mau menambahkan gambar bisa saja dengan catatan ganti kode yang berwarna biru dengan Url gambar anda jika tidak biarkan saja begitu.
tertarik untuk membuatnya?? Simak tutorialnya....

1. Pada Dasbor blog anda masuk ke Rancangan > Tambah gadget > Html / Java Script.
2. Masukkan kode dibawah ini.

Code :

<style>
/*----MWcrew ads box start----*/
.ads {
display: block;
width: 280px;
}
.ads a {
width: 125px;
}
.ads a img {
padding: 0;
}
.ads a em {
font-style: normal;
}
.ads a {
color: #888888;
display: block;
float: left;
font-family: verdana,sans-serif;
font-size: 11px;
margin: 0 7px 7px 0;
overflow: hidden;
text-align: center;
text-decoration: none;
}
.ads img {
border: 0 none;
clear: right;
}
.ads a.image {
background: none repeat scroll 0 0 #E7E7E7;
border: 1px solid #CCCCCC;
color: #666666;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.ads a.image:hover {
background: none repeat scroll 0 0 #DDDDDD;
border: 1px solid #999999;
color: #333333;
}
.ads a {
line-height: 100%;
}
.ads a.image {
height: 125px;
line-height: 1000%;
width: 125px;
}
html > body .ads a.image {
height: 123px;
width: 123px;
}
#credits {
float: right;
font-size: 10px;
margin-right: 35px;
margin-top: -10px;
}
/*----MWcrew ads box end----*/
</style>
<div id="advert">
<div class="ads">

<a href="#" class="image">Advertise here<img src="Image_Url" /></a>
<a href="#" class="image">Advertise here<img src="Image_Url" /></a>
<a href="#" class="image">Advertise here<img src="Image_Url" /></a>
<a href="#" class="image">Advertise here<img src="Image_Url" /></a>
</div>
<div id="credits">
<p>Widget by <a href="http://mwcrew10.blogspot.com">MWcrew</a></p>
</div>
</div>

Note :

• Ganti kode yang berwarna Orange dengan link anda (misalnya dengan link contact me atau dsb...)
• Kode yang berwarna Biru dengan Url gambar anda (Jika tidak diperlukan biarkan saja seperti itu)

Jangan lupa disimpan. Selamat mencoba.....

Artikel Terkait Lainnya :