Add CSS Hover Effect To Ad Banners

Almost all the blogs have an Ad section in the sidebar or other sections of the blog. It is a good source of income for the bloggers. However I don't like the plain ad block that is placed in the blog. It is better if we add some CSS hover effects to the ad block so that it looks better. Another reason for adding the CSS hover effects is that I like it a lot. I love to waste my time moving the mouse over the ad and seeing the hover effects :)  . Adding CSS hover effect to ads on a Blogger/Blogspot blog is damn easy as you will see very soon.


Before you add any effects, you will need code for the adding Advertise Here banners on your blog. Check this post first to  Add an Advertise Here Section To Your Blog.
Once you have added the Ad banner on your blog, you will have to add some CSS code for the hover over effect for the ad banners. Add the following code in the same HTML/JavaScript gadget in which you added the code for the ad banner.

<style type='text/css'>
.borders11 {border:4px solid #d0cfcf;}

.borders11:hover {
border:4px solid #a4a4a4;
}
</style>

After you add the CSS code, you will also have to make some changes to the ad code. I have highlighted a part in the code given below. You just have to add class="borders11" in the img section of the code.

<a href="http://www.cooltricksntips.com/2008/05/advertise-here.html" rel="nofollow" target="_blank"><img src="http://i39.tinypic.com/23mnfyv.png" class="borders11" alt="Advertise Here" /></a>

If you want to change the colour of the border for the ad banners, just change the hexadecimal values in bold. You can also try the Polaroid Photo Effect for the ads. That's it, now click on Save and check your blog.