Enhanced Css Ad Banner 125x125px V2 for Blogger

Views

This is the enhanced version of the CSS Ad Banner that I posted few months ago, you can have a look on it here “Stylish CSS ad Banner V1”. This enhanced Ad banner size is 125px x 125px ,and has a default image and a color background that can always be replaceable. And, what I added in here is the hover effect on it. On hover, the leaf shape background will resize bigger and on mouse out, it will slowly go back to leaf shape. If you want this gadget installed on your blogger…Just Keep reading.

FOR LIVE DEMO CLICK HERE

INSTALLATION OF THE CSS AD BANNER

• Go to your Blogger Dashboard
• Layout
• Add a Gadget
• Choose HTML/JAVASCRIPT
• and insert this code

<style type="text/css">
.adssidebar td
{
margin:10px 5px 10px;
padding:10px;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out; 
border:0px solid #a1a1a1;
background:#20B2AA;
width:125px;
height:125px;
border-radius:100px 2px 100px 2px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
.adssidebar td:hover
{
border-radius:50px 5px 50px 5px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
<div class="adssidebar">
<table border="0" cellspacing="0" cellpadding="0" width="300"><tbody>
    <tr height="125">
      <td valign="top" width="89”>YOUR ADVERTISER BANNER HERE<td>

  <td valign="top" width="551”>YOUR ADVERTISER BANNER HERE</td>
    </tr>

    <tr>
      <td valign="top" width="89”>YOUR ADVERTISER BANNER HERE</td>

   <td valign="top" width="551”>YOUR ADVERTISER BANNER HERE</td>
    </tr>
</tbody></table>
</div>
<center>
<span style='color#000000' font-size='14px'><b><a href="http://theyellowbulb.blogspot.com/">GRAB THIS.....</a></b></span></center>

NOTE: MAKE SURE TO COPY ALL THE CODE

CUSTOMIZATION OF YOUR CSS AD BANNER

• Change the Bolded Blue to your own (Background:#20B2AA, Size:300px to fit on your sidebar, Image URL, Advertiser Page).

YOU CAN SAVE YOUR TEMPLATE NOW

And see it working on your blog.

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.