How To Add CSS Hover Effect In Sidebar Ad Banners ~ The Next Generation Blog

Home » blogger_tricks » How To Add CSS Hover Effect In Sidebar Ad Banners

How To Add CSS Hover Effect In Sidebar Ad Banners

Hi friends, if you are a blogger, then you must know that one of the best way to earn money from your blog is by selling advertisement space in your blog. Good content always attracts visitors and increases the traffic of your blog and good traffic attracts advertisers who pay you for displaying their ads in your site.
So, you can make your advertisement banners more attractive by applying CSS Effects with them, and now I am going to show you how can you apply CSS effects with your ad banners. Let's start:
> Login to your blogger account.
> Now go to LAYOUT > ADD A GADGET.
> Now, select "HTML/JAVASCRIPT" element to add in your blogger layout.
> Now, copy the following code and paste in the html gadget box:

<style>
.thenextgeneration-Ads ul{
list-style-type:none;
margin: 0px auto;
padding: 10px 0px 10px 0px;
width:300px;
overflow:hidden;
}
.thenextgeneration-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%;
}
.thenextgeneration-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%;
}
.thenextgeneration-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%;
}
.thenextgeneration-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="thenextgeneration-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>

> Click SAVE and then click SAVE ARRANGEMENT.
> Now, see your blog.
NOTE:
1) Replace ADVERTISER URL with the website of your advertiser.
2) Replace BANNER URL With the Image link of your advertisers banner.
CLICK HERE TO SEE DEMOKeep visiting for more tips and tricks. subscribe to my updates via email using the subscription box below.