Simple CSS3 powered Ad Banner

A 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifOhlUYIfw3xCBsq4uL4EOQTDNwYWKSiwuuZ0NeKryiUX50qCgQqZE7OSJMrzOm5lS-HQCtxSL1g3UdWQXfAW58EZ_-p2hN8lESygX8qkr9sV4e-tNig5e81fYZywEXdRUjEplD5rk4z8/s1600/Advertise+Here.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifOhlUYIfw3xCBsq4uL4EOQTDNwYWKSiwuuZ0NeKryiUX50qCgQqZE7OSJMrzOm5lS-HQCtxSL1g3UdWQXfAW58EZ_-p2hN8lESygX8qkr9sV4e-tNig5e81fYZywEXdRUjEplD5rk4z8/s1600/Advertise+Here.png" width="120" /></a></li>
</ul>
</div> 

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

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox