Stylish 125x125 Ad Space Using CSS

515 loyal readers

RSS feed | E-mail

1058 followers

Follow us on Twitter!

260 followers

Join us on Facebook!

Demo

How to install it;

1. Login to Blogger
2. Layout / Add gadget
3. Select HTML / JavaScript
4. Paste the following code:

<style>
#adspace {
margin: 0px;
padding: 5px;
text-align: center; }
#adspace img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}
#adspace img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
}
</style>
<div id="adspace">
<a target="_blank" href="#"><img height="115" alt="banner ads" src="http://3.bp.blogspot.com/-uSnrfkDrToM/UOUa0-zMthI/AAAAAAAAAGQ/AqUQt9HJ9SM/s1600/ad-125x125.gif" width="115" border="0"/></a>
<a target="_blank" href="#"><img height="115" alt="banner ads" src="http://3.bp.blogspot.com/-uSnrfkDrToM/UOUa0-zMthI/AAAAAAAAAGQ/AqUQt9HJ9SM/s1600/ad-125x125.gif" width="115" border="0"/></a>
<a target="_blank" href="#"><img height="115" alt="banner ads" src="http://3.bp.blogspot.com/-uSnrfkDrToM/UOUa0-zMthI/AAAAAAAAAGQ/AqUQt9HJ9SM/s1600/ad-125x125.gif" width="115" border="0"/></a>
<a target="_blank" href="#"><img height="115" alt="banner ads" src="http://3.bp.blogspot.com/-uSnrfkDrToM/UOUa0-zMthI/AAAAAAAAAGQ/AqUQt9HJ9SM/s1600/ad-125x125.gif" width="115" border="0"/></a>
</div>

Change the RED # with ad Link and Image URL with your ad URL.