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.

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.
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.
<style>.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;}</style><div class="bsbanner "><ul><li style="background:#FF9900 !important;"><a href=”URL ADVERTISERS PAGE”><img height="120" src="http://1.bp.blogspot.com/-M2TEg9zrmSc/UOPr_G_ratI/AAAAAAAABN4/4T0zgrbUA7g/s1600/Advertise-Here125%2BX%2B125.png" width="120" /></a></li><li style="background:#FF0D00 !important;"><a href=”URL ADVERTISERS PAGE”><img height="120" src="http://1.bp.blogspot.com/-M2TEg9zrmSc/UOPr_G_ratI/AAAAAAAABN4/4T0zgrbUA7g/s1600/Advertise-Here125%2BX%2B125.png" width="120" /></a></li><li style="background:#00FF04 !important;"><a href="URL ADVERTISERS PAGE"><img height="120" src="http://1.bp.blogspot.com/-M2TEg9zrmSc/UOPr_G_ratI/AAAAAAAABN4/4T0zgrbUA7g/s1600/Advertise-Here125%2BX%2B125.png" width="120" /></a></li><li style="background:#FF00FF !important;"><a href="URL ADVERTISERS PAGE"><img height="120" src="http://1.bp.blogspot.com/-M2TEg9zrmSc/UOPr_G_ratI/AAAAAAAABN4/4T0zgrbUA7g/s1600/Advertise-Here125%2BX%2B125.png" width="120" /></a></li></ul></div>
Step 5 Change the URL ADVERTISERS PAGE with your advertisers links
Step 6 Now Save the widget.
Add 125x125 Ads Banners with Hover Effects
BloggerSpice

Open Comment Box
Contact Form
Let's Connect
Trending
- How to Float 2 Wide Skyscraper Ad banner on Left and Right Side?
- How to Make YouTube Video Responsive in Blogger Site?
- How to Submit Website to DMOZ (The Open Directory Project)?
- Float AdSense and other Ads on left or right side of your Blog
- 15 Hot SEO Google Chrome Extensions for Website SEO Analysis and Audit
- How to Add 2-Step Verification in Google Account?
- 6 Killer Tips on How to Get More Views on YouTube for Free
- How to Fix Bengali Font Problem in Google Chrome Browser?
- How to add Google progress scrollbar on top of your BlogSpot page?
- The Insider's Guide to Generate Your Blog Traffic by 110%