Beautiful Ads Box For Blogger


The philosophy behind much advertising is based on the old observation that every man is really two men - the man he is and the man he wants to be.William Feather

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.




CSS

<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>

HTML

<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 berlatar kuning dengan link anda (misalnya dengan link contact me atau dsb...)
  • "IMAGE_URL" ganti dengan alamat gambar anda
10 Comments
Related Post

Join the Discussion!

Obat Kuat
July 03, 2012 9:58 AM | Delete comment

postingan yang bagus tentang Beautiful Ads Box For Blogger

Zulasyraf Ab Razak
February 27, 2013 10:01 AM | Delete comment

free ads box for blogger: http://zool.ads.in-malaysia.com

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