Add 125x125 Ads Banners with Hover Effects

How to create and add CSS powered 125px X 125px banner widget with hover effect for your Blogger site.

blogger ad banner

If you want to make money from your blog then the best way is to sell ads space. If the ad space looks extra beautiful then the visitor get impress to click on it. So I will share a tutorial for making a 125 X 125 ad banner with hover effect. The coding is totally CSS basis so it load very fast. For Installing this  125x125 ads please follow the below simple steps.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Widget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy and past the below code in "HTML/JavaScript" Widget.

.bsbanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;}
.bsbanner ul li{list-style-type:none;margin: 0px 1px 0px 3px;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%;}
.bsbanner 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%;}
.bsbanner 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%;}
.bsbanner 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;}
<div class="bsbanner ">
<li style="background:#FF9900 !important;">
<img height="120" src="" width="120" /></a></li><li style="background:#FF0D00 !important;">
<img height="120" src="" width="120" /></a></li><li style="background:#00FF04 !important;">
<img height="120" src="" width="120" /></a></li><li style="background:#FF00FF !important;">
<img height="120" src="" width="120" /></a></li>

Step 5 Change the URL ADVERTISERS PAGE with your advertisers links

Step 6 Now Save the widget.

Post a Comment

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *