Simple CSS3 powered Ad Banner

Ad BannerA simple Advertisment Banner style using CSS3. Ad Banners have one purpose only and thats to grab the attention of the readers and make them click through. With this in mind I designed a simple one with some simple CSS3 border-radius property.

Demo

To add this Ad Banner Widget into your blog, you can use the one click installer

<style type=”text/css”>
/*<![CDATA[*/
.squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;}.squarebanner 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%;}.squarebanner 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%;}.squarebanner 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%;}.squarebanner 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>
<a href=”http://www.stylifyyourblog.com” title=”Stylify Your Blog” ><img src=”http://img1.blogblog.com/img/blank.gif” /></a> <div class="squarebanner ">
<ul>
<li style="background: blue !important;"><a href="URL"><img height="120" src="http://4.bp.blogspot.com/-CXrtKp4-nm0/T40RMqgmdTI/AAAAAAAAD6U/XwLFnnlCOSA/s1600/Advertise%2BHere.png" width="120" /></a></li>
</ul>
</div>

Or you can add it manually

To do that just add the following CSS and HTML to a HTML/JavaScript widget

<style>
.squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;}.squarebanner 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%;}.squarebanner 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%;}.squarebanner 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%;}.squarebanner 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="squarebanner ">
<ul>
<li style="background: blue !important;">
<a href="URL">
<img height="120" src="http://4.bp.blogspot.com/-CXrtKp4-nm0/T40RMqgmdTI/AAAAAAAAD6U/XwLFnnlCOSA/s1600/Advertise%2BHere.png" width="120" /></a></li>
</ul>
</div> 

Make sure to change the URL in Line 7 with your own

26 Replies to “Simple CSS3 powered Ad Banner”

  1. nice one,,will surely implement when i wil be able to get some sponsors πŸ˜›
    Please tell what code to change to implement it with different sizes.
    Also please explain something about sponsors like when we sell adspace(like on your blog 120*120 is for 10 USD),shall we getting this fixed amount only or for clicks on that space we will get extra money?

    1. To change the size you just have to change the width and height attribute in Line 8. You might have to change the placeholder image if you go for higher sizes .

      See the Advertisement can be of many types

      Pay per click ,where you get paid for the clicks

      Fixed , where you have to have to pay for a defined period of time (like a month )irrespective of clicks

      There can also be a type of advertisement you are talking about ,where you have to pay for the space as well for clicks but that would be for very traffic sites

      On Stylify Your Blog , the Ad Model is a fixed type , you pay for a month

Leave a Reply

Your email address will not be published. Required fields are marked *