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 MWcrew kali ini.


Seperti yang dibahas pada postingan MWcrew 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 "Image_Url" 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 "#" dengan link anda (misalnya dengan link contact me atau dsb...)
  • Ganti "Image_Url" dengan Url gambar anda (Jika tidak diperlukan biarkan saja seperti itu)


Jangan lupa disimpan. Selamat mencoba.....






"MWcrew:
5 Comments
Related Post

Join the Discussion!

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan