Create a Zero Dollar Ads Page using CSS and HTML

SEE THE LIVE DEMO

This tutorial will show you how to add a zero dollar ads page using CSS and HTML. Each grid space is 70x20 expanding with a white border to 75x25 with mouse over. Each image will be placed to the right of the previous one and can be linked to any specified page; serving as a good advertising or back linking widget. 

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

<style type='text/css'> #adsdiv { border:10px solid #ccc; border-width:10px 22px 18px 15px; width:710px; margin:50px auto 30px auto; } #adverts { padding:0; margin:0; width:710px; position:relative; border-top:1px solid #eee; border-left:1px solid #eee; } * html #adverts {width:711px; w\idth:710px;} #adverts li { list-style-type:none; width:71px; height:21px; float:left; } #adverts a { background:#eee; position:absolute; width:71px; height:21px; display:block; font-size:5px; } #adverts a img { width:70px; height:20px; border:0; } #adverts a:hover { width:90px; height:35px; z-index:500; } #adverts a:hover img { background:#eee; position:absolute; width:75px; height:25px; border:8px solid #fff; border-width:5px 8px; left:-12px; top:-7px; } * html #adverts a:hover img { width:91px; height:35px; width/**/:75px; height/**/:25px; } .clear {clear:both;} .advert {background:#eee;} #info em {display:block; clear:both; font-size:0.6em; text-align:right; padding-right:1em;} #info p {text-align:center;} #info p.col4 {text-align:left;} </style>

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

<div id="adsdiv"> <ul id="adverts"> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/2.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/3.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/4.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/5.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/6.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/7.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/8.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/9.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/10.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/11.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/12.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/13.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/14.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/15.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/16.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/17.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/18.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/19.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/2.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/3.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/4.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/5.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/6.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/7.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/8.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/9.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/10.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/11.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/12.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/13.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/14.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/15.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/16.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/17.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/18.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/19.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/2.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/3.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/4.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/5.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/6.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/7.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/8.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/9.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/10.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/11.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/12.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/13.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/14.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/15.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/16.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/17.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/18.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/19.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/2.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/3.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/4.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/5.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/6.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/7.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/8.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/9.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/10.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/11.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/12.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/13.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/14.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/15.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/16.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/17.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/18.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/19.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/1.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/2.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/3.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/4.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/5.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/6.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/7.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/8.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/9.jpg" width="75px" height="25px"/></a></li> <li><a href="http://blogspotvision.com/" target="_blank"><img src="http://blogspotvision.com/posts/images/freead/10.jpg" width="75px" height="25px"/></a></li> </ul> <div class="clear"></div></div>

Note: Change link and images. Each image will appear to the right of the the previous one.