how to add/Create 125px * 125px hover Ads widget to blogger. Adsense Tips

Beautiful objects of site or web log always attract visitors to stay and crawl the whole site , So in other words they increase web traffic  plus revenue. So today we will learn " how to add hover effect ads widgets to blog". It's very easy and even a non professional person can add it.so let's have a try and give our sites a different look.

Here are the step by step tutorial :

INSTRUCTIONS:

1-Login to Blogger account
2-Go to layout
3- Click on Add Gadget
4-Select  "HTML/JavaScript" Gadget
5-Write Title like "Advertise With Us"
6-Copy the code given below,paste it inside and save , You'r done.

HOVER AD'S CODE:

<style> 
#techportion img { margin: -6px -8px -8px -6px; padding: 1px; text-align: left; border: 3px solid #c0c0c0; -webkit-     border-radius:70px; -moz-border-radius:70px; -o-border-radius:70px; border-radius:70px; -webkit-transition: all 0.45s ease- out; -moz-transition: all 0.45s ease-out; -o-transition: all 0.45s ease-out; transition: all 0.45s ease-out; } #techportion      img:hover { margin: 0px 2px 4px 0px; padding: 2px; text-align: center; border: 3px solid #3399FF; -webkit-border-radius:0px;      -moz-border-radius:0px; -o-border-radius:0px; border-radius:0px; } 
</style>
<div id="techportion" align="left"> <table border="0"  cellpadding="2" cellspacing="2" width="265" bgcolor="#fff"><tbody>      <tr> <td> <center>
<a href="Advertiser URL" rel="nofollow"> <img border="0" alt="AD DESCRIPTION" width="125"      src="Image URL"      height="125"/></a> </center> </td> <td> <center>
<a href="Advertiser URL 2" rel="nofollow"> <img border="0" alt="AD DESCRIPTION" width="125"     src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTPqzijXdjpIyvd8fMqgc5M1g9XGK29DA4nr9U7swjOvObZpxQPP0lZoh2ZNd6z-SGvqVWpY81F9Z4mxVhtYoPojFUoCR2DInphRA_PW-8jr_Vl_2b0Elf61F26vRwUkRTFnil61lYl8/s1600/ad-here.png"     height="125"/></a> </center> </td> </tr> <tr> <td> <center>
<a href="ADVERTISER URL 3" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125"     src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTPqzijXdjpIyvd8fMqgc5M1g9XGK29DA4nr9U7swjOvObZpxQPP0lZoh2ZNd6z-SGvqVWpY81F9Z4mxVhtYoPojFUoCR2DInphRA_PW-8jr_Vl_2b0Elf61F26vRwUkRTFnil61lYl8/s1600/ad-here.png"     height="125"/></a> </center> </td> <td> <center>
<a href="ADVERTISER URL 4" rel="nofollow"> <img border="0" alt="AD DESCRIPTION" width="125"     src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3b5y40Ia-03I-pYVIaF8yUzsO30aBSAtPC7IjTMtYddc2ZlEXKs8Ys4N0I4qrSpzofBqidfl3ML37H_iYpK4JDul4R-0VoLAeqaR03wA7_i05g1ZFM-CpCpIIX2GhIuPfmzlWIjV93cQk/s1600/blue.gif"     height="125"/></a> </center> </td> </tr> </tbody> </table> </div>

1- Advertiser URL
2-AD Description
3-Image URL ( after src) 

Replace Advertiser URL by web link given by Advertiser.
Write Description of AD provided by Advertiser
& and put image url at Image URL place.
 
If you want to play with CSS and HTML code you can try here.
I hope this will be helpful, for more interesting and informative articles , stay tuned.