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="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


Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

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

Post a Comment

Cool info...

Nice Info..

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 ?

techgod8 said...

Oh Awesome CSS3 Effect !..Usefull for Advertisers

Thanks verma

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

I like it
thanks verma

ehl-i blog 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

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 ?

thanks

I found this post useful.I was trying to find this. Really refreshing take on the information. Thanks a lot
http://www.hyipworthy.com/

rashed said...

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