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.

Comments: 0
data:blog.title
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.

<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.

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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

Name

Email *

Message *