Colorful css hover effect to 125x125 Advertisements

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

I just want to share on how to make 125x125 ads spot with colorful background with hover effects. This widget can attract Advertisers, and it is made up of CSS and HTML. You can customize and control this by changing the CSS and HTML according to your need. I recommend you to place this 125x125 ads in the top sidebar of your blog or website.Basically its all about drawing readers attention. While reading this particular posts too, you might have noticed the AdSpots in the header and sidebar. The CSS3 stylization makes the reader click the ads more than the usual styling.Thus the more clicks your ads gets, the more chances are for you that your Ads get renewed next month too by the advertisers (if they are satisfied with the results).This is the very purpose of providing this CSS3 leaf effect code, that was asked by many readers too.

Live Demo

How to add this in Blogger

• Login to your Blogger Dashboard.
• Click the drop-down menu and select "Layout".
• Click on an "Add a Gadget" link.
• Scroll and find "HTML/JavaScript" element from the pop-up gadget list.
• Copy the code below and paste it inside the "Content Box".

<!--CSS Hover Effects To 125x125 Advertisement Banners By CoolDoodTricks-->
<style>
.CoolDoodTricks-Ads ul{
list-style-type:none;
margin: 0px auto;
padding: 10px 0px 10px 0px;
width:300px;
overflow:hidden;
}
.CoolDoodTricks-Ads ul li{
list-style-type:none;
margin: 0px 5px 10px 5px;
float:left;
display:inline;
background:orange;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
border-radius:100%;
-webkit-border-radius:100%;
-moz-border-radius:100%;
-o-border-radius:100%;
}
.CoolDoodTricks-Ads ul li:hover {
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
-o-border-radius:15%;
-webkit-border-radius:15%;
-moz-border-radius:15%;
border-radius:15%;
}
.CoolDoodTricks-Ads ul li:active {
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-o-border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
.CoolDoodTricks-Ads 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="CoolDoodTricks-Ads">
<ul>
<li style="background:#e42b2b !important;">
<a href=" ADVERTISER URL " rel="nofollow">
<img height="125" src="BANNER URL" width="125" />
</a></li>
<li style="background:#FFE500 !important;">
<a href=" ADVERTISER URL " rel="nofollow">
<img height="125" src="BANNER URL" width="125" />
</a></li>
<li style="background:#a800ff !important;">
<a href=" ADVERTISER URL " rel="nofollow">
<img height="125" src="BANNER URL" width="125" />
</a></li>
<li style="background:#41d05f !important;">
<a href=" ADVERTISER URL " rel="nofollow">
<img height="125" src="BANNER URL" width="125" />
</a></li>
</ul>
</div>
<!--CSS Hover Effects To 125x125 Advertisement Banners By CoolDoodTricks-->

• Click "Save".

Customization 

• Replace ADVERTISER URL with the website of your advertiser.
• Replace BANNER URL With the Image link of your advertisers banner.

Kindly Bookmark this Post using your favorite Bookmarking service: