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


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

Post a Comment
Rounaj said...

Cool info...

Devendra said...

Nice Info..

Unknown said...

Nice Info...But i think too manay js can slow down blogs like mine..please help

Hi
This doesn't contain any JavaScript , its plain HTML and CSS

Thanks for comment :)

Hope you found the tutorial useful , Did you try it on your Blog ?

Thanks again Rounak ^_^

Did you try implementing it on your Blog ?

Anonymous said...

Oh Awesome CSS3 Effect !..Usefull for Advertisers

Thanks verma

eka said...

Nice ^_^

Thanks for commenting

Did you get the time to try it on your blog ?

Thanks Eka
Feel free to ask if you have any problem while implementing it

Anonymous said...

I like it
thanks verma

Teknojest said...

thanks.How to create 2 x 2 square banner

Just Copy the Code from Line 6-8 from above and paste it before the closing unordered list tag ( </ul> )

You are welcome Andreas , In case you face any problems while integrating it in your blog , feel free to ask

Nice one Prayag

Unknown said...

nice one,,will surely implement when i wil be able to get some sponsors :P
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?

Really a simple and good looking banner :)
Thanks.

Hi, how to increase the gap between two square boxes ??

Got it :)

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

Thanks

Glad you found it useful

Feel free to ask if you face any further problems

Thanks Tarun for the comment

Did you implementing it on your blog ?

Unknown said...

thanks

rashed said...

it's really aawesome......
it will be better if you share more Banner ads
thanks