Beautiful Ads Box For Blogger

Ads Space? bukannya sudah di posting berkali-kali? eeits... jangan salah yang satu ini beda dari yang sebelumnya, kalau yang sebelumnya MWcrew telah mempostingAdvertise box (Hover Effect)     ,yang boxnya hanya satu warna saja kali dengan berwarna-warni gan...dan juga mempunyai efek yang membuat tampilannya semakin elegant.

Mungkin sudah banyak sobat melihat di blog-blog lain menggunakan ads Space seperti ini tapi belum tahu bagaimana cara membuatnya bukan?? Nah dengan menyimak sedikit tutorial dibawah ini maka sobat akan tahu bagaimana cara membuatnya dan jangan hanya diam dan termenung mengaguminya saja tapi langsung diterapkan di blog sobat masing-masing. cekidot....

Preview :

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

Code :

<style type="text/css" >
.squarebanner {
width:296px;
padding:10px 10px 10px 10px;
background:#fff;
border:1px solid #ddd;
margin-bottom:10px;
}
.squarebanner ul{
list-style-type:none;
margin: 0px auto;
padding: 10px 0px 0px 0px;
width:300px;
overflow:hidden;
}
.squarebanner ul li{
list-style-type:none;
margin: 0px 7px 0px 7px;
float:left;
padding:5px;
display:inline;
background:#e42b2b;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-webkit-border-top-left-radius:80px;
-webkit-border-bottom-right-radius:80px;
-moz-border-radius-topleft:80px;
-moz-border-radius-bottomright:80px;
border-top-left-radius:80px;
border-bottom-right-radius:80px;
}
.squarebanner ul li:hover{
-webkit-border-top-left-radius:40px;
-webkit-border-bottom-right-radius:40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-bottomright:40px;
border-top-left-radius:40px;
border-bottom-right-radius:40px;
}

.squarebanner ul li a img{
-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);
box-shadow:0 0 8px rgba(0,0,0,0.5);
padding:3px;
}
</style>

<div class="squarebanner ">
<ul>
<li><a href="LINK" ><img src="IMAGE_URL" /></a></li>
<li><a href="LINK" ><img src="IMAGE_URL" /></a></li>
</ul>
</div>

Note :

• Ganti kode yang berwarna Biru dengan link anda (misalnya dengan link contact me atau dsb...)
• Kode yang berwarna Merah dengan Url gambar anda.

Semoga berhasil...

Artikel Terkait Lainnya :