Add 125x125 Ads Banners with Hover Effects

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.