Saturday, November 6, 2010

Make your HTML Lists stand out with CSS enhancement

csslist_tutorialHere is a simple tutorial on how you can make your plain HTML lists stand out to catch readers attention and possibly increase click-through rates (CTR), which in turn raises return on investments (ROI). Designs not only makes your blog appealing, it can also capture your readers curiosity and/or clicks. This tutorial provides a foundation for you to build upon with your own touch and style so that it will fit that of your site. Of course, we will leave the creativity up to you.

page_html Demonstration | page_package Download RAR

CSS section code (This section should be placed right before the closing head tag)

<style type='text/css'>
#navcontainer2 ul{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

#navcontainer2 li { margin: 0 0 3px 0; }

#navcontainer2 a{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #999;
background-image: url(/images/images.jpg);
}

#navcontainer2 a:link, #navlist a:visited{
color: #EEE;
text-decoration: none;
font-weight: bold;
}

#navcontainer2 a:hover{
border: 1px solid #333;
background-color: orange;
background-image: url(/images/images2.jpg);
color: #333;
font-weight: bold;
}

#active2 a:link, #active2 a:visited, #active2 a:hover {
border: 1px solid #333;
background-color: orange;
background-image: url(/images/images.jpg);
color: #333;
font-weight: bold;
}
</style>

HTML section code (This section should be placed where you would like the list to appear. This can be done by adding a new gadget under page elements, or applied directly within the HTML section of the template.)

<table width="38%" border="0">
  <tr>
    <td width="19%"><div id="navcontainer2">
<ul id="navlist2">
<li id="active"><a href="http://www.thomasnjr.com/" id="current">tnjr - thomasnjr.com</a></li>
<li><a href="http://beben-koben.blogspot.com/">Prodigy of Head</a></li>
<li><a href="http://www.ccnacentral.info/">CCNA Central</a></li>
<li><a href="http://www.myworld4free.co.cc/">My World4Free</a></li>
</ul>
</div></td>
    <td width="81%"><div id="navcontainer2">
<ul id="navlist2">
<li><a href="http://www.chiefdoodle.com">Chiefdoodle Art</a></li>
<li><a href="http://seopowered.blogspot.com/">SEO Powered</a></li>
<li><a href="#">Get featured here</a></li>
<li><a href="#">Get featured here</a></li>
</ul>
</div></td>
  </tr>
</table>

Note: All images should be uploaded and replaced with your link, and as always is open for customizations.

2 comments: