Add a Clean/Dark Featured Content Slider to Blogger with CSS and JavaScript

Here's another clean featured content using CSS and JavaScript. This featured content slider holds a mini-gallery for previews right underneath it's images which can also be used for navigation. Right above the mini-gallery there's also another mini-navigation with an "i" embedded right in the middle. Readers can click on this "i" for more information on the featured content.

Add these scripts to your header:

<script src='http://www.stunicholls.com/gallery/slides/jquery-1.4.2.min.js' type='text/javascript'/>

<script src='http://www.stunicholls.com/gallery/slides/multi-slide.js' type='text/javascript'/>

Provided here is the CSS and HTML section code to implement this tutorial.
CSS section code (This section code should be placed right before the closing head tag.)

<style type="css/text">/* ================================================================ 

This copyright notice must be untouched at all times.

Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.

=================================================================== */

#slideshow {width:579px; height:465px; margin:0 auto; position:relative; background:#222;

-o-box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);

-icab-box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);

-khtml-box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);

-moz-box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);

box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);

-o-border-radius: 10px;

-icab-border-radius: 10px;

-khtml-border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

#thumbs {width:510px; height:48px; overflow:hidden; position:absolute; left:49px; top:400px; z-index:10;}

#thumbHolder {position:relative; top:0; left:0; width:490px;}

#thumbs img {display:block; float:left; margin-right:8px; margin-bottom:6px; display:inline; padding:1px; background:#aaa; cursor:pointer; width:60px; height:40px;}

#images {width:510px; height:320px; position:absolute; left:35px; top:25px; overflow:hidden; z-index:10; border:1px solid #888; background:#222 url(http://www.stunicholls.com/gallery/slides/loading.gif) no-repeat 230px center;}

#images img {position:absolute; left:510px; top:0;}

#txt {position:absolute; left:36px; top:26px; width:509px; height:320px; width:517px; z-index:20;overflow:hidden;}

#opacity {position:absolute; left:0; top:-360px; width:509px; height:322px; background:#000; z-index:10;}

#txt p {padding:5px; margin:0; width:500px; height:310px; color:#ddd; font-family:arial, sans-serif; font-size:12px; line-height:18px; position:absolute; z-index:20; top:-360px; left:0;}

#txt p span {font-weight:bold; font-size:14px; color:#fff; display:block; padding-bottom:10px;}

#txt a {color:#0ae;}

#txt a:hover {text-decoration:none;}

#pad {width:48px; height:48px; background:url(http://www.stunicholls.com/gallery/slides/pad.gif); position:absolute; left:268px; top:348px;}

#pad p {margin:0; position:absolute; width:14px; height:0; padding-top:14px; overflow:hidden; cursor:pointer;}

#pad p#previous {left:0; top:17px;}

#pad p#next {right:0; top:17px;}

#pad p#scrollUp {left:17px; top:0;}

#pad p#scrollDown {left:17px; bottom:0;}

#pad #info {left:17px; top:17px; width:16px; height:0; padding-top:16px;} </style>

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

<div id="slideshow">

<div id="thumbs">

<div id="thumbHolder">

<img src="http://blogspotvision.com/featured/november2010/featured-projecticons-thumb.jpg" alt="featured-project-icons" width="64px" height="42px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-csslist-thumb.jpg" alt="featured-css-list" width="64px" height="42px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-childishicons-thumb.jpg" alt="featured-childish-icons" width="64px" height="42px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-procsshover-thumb.jpg" alt="featured-professional-css-hover" width="64px" height="42px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-csscrease-thumb.jpg" alt="featured-project-icons" width="64px" height="42px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-cssdivcomment-thumb.jpg" alt="featured-css-div-comments" width="64px" height="42px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-cssdivcomment-thumb.jpg" alt="featured-project-icons" width="64px" height="42px"/> 

</div>

</div>

<div id="txt">

<div id="opacity"></div>

<p><span>Photograph No.1</span> Lorem ipsum dolor sit amet, <a href="#url">consectetur adipiscing elit</a>. Fusce viverra ante tincidunt velit dictum consectetur. Nulla facilisi. Mauris odio magna, egestas nec convallis ut, adipiscing quis elit. Integer gravida ultrices nunc, in consequat arcu iaculis iaculis. Aliquam vitae augue vitae dui gravida lacinia ac suscipit ipsum. <a href="#url">Aliquam erat</a> volutpat. Phasellus quis dui libero. Praesent sodales tristique urna, ut condimentum dolor varius ac. Donec id tellus est. Nam tincidunt sem nec neque cursus eget convallis libero condimentum. Nam feugiat iaculis libero sit amet fermentum. Vivamus pharetra bibendum rutrum. Suspendisse dolor mi, pellentesque sit amet laoreet et, aliquet in ligula. </p>

<p><span>Photograph No.2</span> Maecenas cursus ornare mauris, eget lacinia quam sollicitudin ac. Nullam nec ipsum vel nibh fringilla facilisis. Fusce dapibus libero dolor. Fusce id leo dolor, id dapibus quam. Nulla cursus semper quam, iaculis ornare dolor eleifend eu. <a href="#url">Suspendisse turpis diam</a>, cursus mollis facilisis nec, aliquam eu tortor. Quisque tincidunt tristique odio et semper. Cras aliquet, quam eget iaculis volutpat, nulla lorem pulvinar sapien, vel dignissim magna turpis nec felis.</p>

<p><span>Photograph No.3</span> Phasellus dignissim ullamcorper libero eget convallis. Aliquam ut libero est. Aenean leo risus, gravida rhoncus ultricies non, vehicula eget risus. Curabitur sit amet est metus. Vestibulum posuere nisl eu risus hendrerit rhoncus. Maecenas in molestie eros. <a href="#url">Vestibulum erat quam</a>, pulvinar eu congue et, aliquam vitae quam. Morbi ornare, nunc et tristique egestas, ligula leo placerat lectus, a suscipit tortor magna quis felis.</p>

<p><span>Photograph No.4</span> Suspendisse risus sapien, iaculis et rutrum eget, feugiat sit amet tellus. In sed dolor sem. Proin hendrerit, turpis a mollis blandit, purus purus lobortis mauris, dignissim aliquet metus erat eu lacus. Vestibulum lobortis fringilla nisi, non blandit mauris porta at. Donec in dapibus elit. <a href="#url">Integer interdum</a>, sapien quis posuere dapibus, magna eros volutpat ligula, ut volutpat libero magna lobortis tortor. Ut sagittis placerat vestibulum. Nulla vitae libero ut sapien tempus egestas.</p>

<p><span>Photograph No.5</span> Pellentesque suscipit velit eget quam sagittis faucibus. Quisque sed urna at sapien tristique commodo. Suspendisse potenti. Duis laoreet viverra ligula, et posuere urna vehicula ut. Nam ullamcorper erat a lectus lobortis aliquet mattis sit amet ipsum. <a href="#url">Nam vel tellus vitae</a> tortor molestie dapibus et ultricies nisl. In in tincidunt urna.</p>

<p><span>Photograph No.6</span> Sed ac gravida ante. Phasellus viverra consectetur diam, et commodo nibh fermentum a. Sed lobortis diam eu enim scelerisque pretium. <a href="#url">Aliquam eleifend</a> vestibulum lacus eu egestas. Donec non justo nibh, sed mollis orci. Proin eget lacinia sem. Sed sollicitudin metus in nisi lobortis at elementum mi pellentesque. Etiam nec est at urna bibendum malesuada. Ut tincidunt, tellus non vulputate consequat, felis sapien luctus tellus, iaculis hendrerit risus enim quis diam.</p>

<p><span>Photograph No.7</span> Ut eget justo ultrices lacus viverra lacinia at non nisl. Donec pulvinar egestas nibh, id rhoncus dui facilisis in. Suspendisse potenti. Mauris ullamcorper nunc aliquam nisi mollis venenatis. Nullam pulvinar tristique lacus vitae elementum. <a href="#url">Nullam vulputate</a> risus sed magna fringilla at lacinia mauris ornare. Nullam ut congue magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

</div>

<div id="images">

<img src="http://blogspotvision.com/featured/november2010/featured-projecticons.jpg" alt="featured-project-icons" width="510px" height="320px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-csslist.jpg" alt="featured-css-list-enhancement" width="510px" height="320px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-childishicons.jpg" alt="featured-childish-icons" width="510px" height="320px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-procsshover.jpg" alt="featured-professional-css-hover" width="510px" height="320px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-csscrease.jpg" alt="featured-css-page-crease" width="510px" height="320px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-cssdivcomment.jpg" alt="featured-css-div-comment-box" width="510px" height="320px"/>

<img src="http://blogspotvision.com/featured/november2010/featured-projecticons.jpg" alt="featured-project-icons" width="510px" height="320px"/>

</div>

<div id="pad">

<p id="previous">previous</p>

<p id="next">next</p>

<p id="scrollUp">up</p>

<p id="scrollDown">down</p>

<p id="info">info</p>

</div>

</div>

Project Icons by Smashing Magz

Specifications Category: Project Icons Format: .PNG Pixels: 32x32, 48x48, 64x64, 128x128 Total Files: 18  Download Zipped Files - View All Icons

Make your HTML Lists stand out with CSS enhancement

Here 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.

Demonstration

|

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.

Creative Childish Web-development Icons Pack

Specifications Category: Web-development Format: .PNG Pixels: 32x32, 48x48, 64x64, 128x128 Total Files: 270 Download Zipped Files - View All Icons

Featured Contents with Bottom Thumbnails Scroll

This professional featured contents with bottom scrolling thumbnails is a good fit for any style website. If your website gives off a professional vibe, then you should create professional looking images for your featured contents. On the hand, if you have a creative art style, it's better to use creative arts as your images for your featured contents. Either way, it adds some funtionality to your website and allows your main topics to stand out so visitors know what to expect from your websit before digging in any further. Another nice featured content slider you can add to your collection.

Demo Page

Provided here is the CSS and HTML section code to implement this tutorial.
CSS section code (This section code should be placed right before the closing head tag.)

#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(http://blogspotvision.com/TinySlideshow/images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(http://blogspotvision.com/TinySlideshow/images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(http://blogspotvision.com/TinySlideshow/images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(http://blogspotvision.com/TinySlideshow/images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(http://blogspotvision.com/TinySlideshow/images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}

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

<ul id='slideshow'>
<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/20265_277851771584_504491584_3259111_1375205_n.jpg</span>

<p>New artwork coming soon</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/20265_277851771584_504491584_3259111_1375205_n.jpg' width='90'/></a>
</li>
<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/59556_433785324635_239454609635_4840367_771304_n.jpg</span>
<p>Stay tuned for Chiefdoodle.com version 3</p>

<img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/59556_433785324635_239454609635_4840367_771304_n.jpg' width='90'/>
</li>
<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/tees.jpg</span>
<p>New apparels coming soon</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/tees.jpg' width='90'/></a>

</li>
<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/laptop.jpg</span>
<p>Deck out just about anything with Chiefdoodle</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/laptop.jpg' width='90'/></a>
</li>

<li>
<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/cdavatar.jpg</span>
<p>You see it on Facebook.. get yours!</p>
<img alt='Blue Fish' height='70' src='http://blogspotvision.com/bspotvision/cd3/cdavatar.jpg' width='90'/>
</li>
<li>

<h3>@theCDLP</h3>
<span>http://blogspotvision.com/bspotvision/cd3/48060_446898311584_504491584_4989864_6379255_n.jpg</span>
<p>Sneak-peak of whats coming</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/48060_446898311584_504491584_4989864_6379255_n.jpg' width='90'/></a>
</li>
<li>
<h3>@theCDLP</h3>

<span>http://blogspotvision.com/bspotvision/cd3/58383_446682166584_504491584_4984734_3817816_n.jpg</span>
<p>Elevate your life..</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/58383_446682166584_504491584_4984734_3817816_n.jpg' width='90'/></a>
</li>
<li>
<h3>&quot;Tap into the mind of the unconscious&quot;</h3>
<span>http://blogspotvision.com/bspotvision/cd3/elevatelife.jpg</span>
<p>Where creativity sparks innovations</p>
<a href='#'><img alt='chiefdoodle' height='70' src='http://blogspotvision.com/bspotvision/cd3/elevatelife.jpg' width='90'/></a>
</li>
</ul>
<div id='wrapper'>
<div id='fullsize'>
<div class='imgnav' id='imgprev' title='Previous Image'/>
<div id='imglink'/>

<div class='imgnav' id='imgnext' title='Next Image'/>
<div id='image'/>
<div id='information'>
<h3/>
<p/>
</div>
</div>
<div id='thumbnails'>
<div id='slideleft' title='Slide Left'/>

<div id='slidearea'>
<div id='slider'/>
</div>
<div id='slideright' title='Slide Right'/>
</div>
</div>
<script src='http://blogspotvision.com/TinySlideshow/compressed.js' type='text/javascript'/>
<script type='text/javascript'>
$(&#39;slideshow&#39;).style.display=&#39;none&#39;;
$(&#39;wrapper&#39;).style.display=&#39;block&#39;;
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link=&quot;linkhover&quot;;
slideshow.info=&quot;information&quot;;
slideshow.thumbs=&quot;slider&quot;;
slideshow.left=&quot;slideleft&quot;;
slideshow.right=&quot;slideright&quot;;
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active=&quot;#fff&quot;;
slideshow.init(&quot;slideshow&quot;,&quot;image&quot;,&quot;imgprev&quot;,&quot;imgnext&quot;,&quot;imglink&quot;);
}
</script>

Note: All images should be replaced with that of yours, and as always is open for customizations.

Professional CSS Hover Menu with images

This professional hover menu is designed on pure CSS. For pages that already contains a high volume of code and is already almost surpassing the page speed limit, this hover menu can help you add that featured content without tampering with latency. Like most featured contents, this hover menu also allows you to input keywords that will help you rank better in search engines. Let's get started, but first and foremost, always remember to back-up your current existent template in case it doesn't turn out as expected.

Click here to view a demo

Download the entire zip file
(Zip files include entire codings along with images needed to implement this tutorial.)

CSS SECTION CODE
(Section code below should be placed in the CSS part of your template, located right before your closing head tag.)

<style type="text/css">
#holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border:1px solid #004479;z-index:100;}
#holder table {border-collapse:collapse; margin:-1px;}
#holder ul {float:left; padding:0; margin:0; list-style:none;}
#holder ul.sub {margin-bottom:-4px;}
#menuOuter li a.lv1-a {background:blue; zoom:1;}
#menuOuter li a.lv1-a:hover {direction:ltr;}

#holder ul.sub {float:left;}
#holder ul.sub ul {position:absolute; left:-9999px; top:180px;}
#holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;}

#holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;}
#holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;}
#holder ul.sub li.sub-li a.a1 {background:#000000;}
#holder ul.sub li.sub-li a.a2 {background:#000000;}
#holder ul.sub li.sub-li a.a3 {background:#000000;}
#holder ul.sub li.sub-li a.a4 {background:#000000;}
#holder ul.sub li.sub-li a.a5 {background:#000000;}

#menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter li:hover ul.sub li.current ul {left:-9999px;}
#menuOuter li:hover ul.sub li.current a img {left:-9999px;}

#menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter a:hover ul.sub li.current ul {left:-9999px;}
#menuOuter a:hover ul.sub li.current a img {left:-9999px;}

#holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;}
#holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;}

#holder ul.sub li.current a {margin-top:0; height:350px;}
#holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;}

#menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;}
#menuOuter li:hover ul.sub li.current:hover ul {left:0;}
#menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

#menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;}
#menuOuter a:hover ul.sub li.current a:hover ul {left:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

#holder ul.sub li {position:relative;}
#holder ul.sub li.sub-li:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.sub-li a:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.current ul {left:0; width:130px;}
#holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}

#holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#fff; text-decoration:none; font-size:11px;}
#holder ul.sub li.p1 span {background:#d7d7d7;}
#holder ul.sub li.p2 span {background:#d7d7d7;}
#holder ul.sub li.p3 span {background:#d7d7d7;}
#holder ul.sub li.p4 span {background:#d7d7d7;}
#holder ul.sub li.p5 span {background:#d7d7d7;}
</style> 

HTML SECTION CODE
(section code below should be placed in your desired location but in your HTML section code, you can also use "Add a Gadget" under Page Elements and move it to your desired location.)

<div id="holder">
<ul id="menuOuter">
<li class="lv1-li">
<!--[if lte IE 6]><a class="lv1-a" href="#url1"><table><tr><td><![endif]-->
<ul class="sub">
<li class="sub-li p1"><a class="a1" href="#url"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKw8-JUV6InexPODIwDR0V_zlO3TL7-cLUOGXAwx7Tdr_2PRNpyuOyERiZ96mxajgq8Jib7nG880ZDAKDBrsFbaDCdCdIZ6wjEBg4w3sHibX0sshiIucHT72XaI_DetlHYGCUqluJj8DJe/" /><b>Womens Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <ul>
<li><a href="#url">Dresses</a></li>
<li><a href="#url">Coats &amp; Jackets</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Knitwear</a></li>
<li><a href="#url">Shirts &amp; Blouses</a></li>
<li><a href="#url">Skirts</a></li>
<li><a href="#url">Shoes</a></li>
</ul>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nunc dolor. Morbi vestibulum volutpat porttitor.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p2"><a class="a2" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUUNV2j1F3PS5hjzBWPLesjPA1YvnHOB13EdrA4LgeaMG8KtWHTGq6S83tNAQjrTtCwvOHoV1SlR5HjOp-DIlGi3XWHAbX89aL4CCs-JLFVFXJNWELLO5H7umJAlji4zgeoZ6hnjf11s8g/" /><b>Mens Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Jackets</a></li>
<li><a href="#url">Trousers</a></li>
<li><a href="#url">Shirts</a></li>
<li><a href="#url">Suits</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Shoes</a></li>
</ul>
<span>Morbi eget purus elit, sed interdum diam. Maecenas ultricies, nisi ac scelerisque sagittis, est eros euismod nulla.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p3"><a class="a3" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKy04DOmgvEb2PTVw2b6QSJS5jWyPW0e0pEoWDZL4E3zvGqB_47ac9TWptS78cWM9HGLHzrfTjC1duyEQ-5EgxtRxBMCKeyL7fK_QiB6IiEkJ_oaL1eFkv2DSa33A0RT9KQlmSjErQDne4/" /><b>Boys Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Shirts</a></li>
<li><a href="#url">Jumpers</a></li>
<li><a href="#url">Trousers &amp; Jeans</a></li>
<li><a href="#url">Trainers</a></li>
<li><a href="#url">School Wear</a></li>
</ul>
<span>Vestibulum at ultricies mauris. Suspendisse potenti. Suspendisse potenti. Fusce lacinia sem et ipsum mattis mollis.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p4"><a class="a4" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-xQBnbCtt2ZYiVJJBUUtfUapjH-aBJo9PPMVn6BAi2Dq3vnwAbepBQJxwmEPWMKAIbWHk-jtYpWlusddAo8LSl86ANIUFnywWh8NqZDiEx6TdVtL2Yy0jdfXnledesSiMEFeWbDnJGrR/" /><b>Girls Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dresses &amp; Skirts</a></li>
<li><a href="#url">'T' Shirts</a></li>
<li><a href="#url">Coats</a></li>
<li><a href="#url">Jeans</a></li>
<li><a href="#url">Accessories</a></li>
<li><a href="#url">Belts</a></li>
<li><a href="#url">Trainers &amp; Shoes</a></li>
</ul>
<span>Nulla vitae enim nisl, sed vestibulum neque. Praesent eu malesuada nunc. Aenean fermentum, nulla ut convallis lacinia.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="sub-li p5 current"><a class="a5" href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw3xtmIESO-UCIXt1yXgm10RZrnzfQUYKtn1yCJDaxitvQp4gciaw2Di6L4xEky8k67Bt-MQAGZCkrwYQbUGx3bqav59kQ0v0KnM4hhup1vN9DmYk8YB-RVzFNW3IcA3UgPTvyjHxB3ugj/" /><b>Baby Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Sleep Suits</a></li>
<li><a href="#url">Baby Grows</a></li>
<li><a href="#url">Vests</a></li>
<li><a href="#url">Socks &amp; shoes</a></li>
<li><a href="#url">Coats &amp; Jackets</a></li>
<li><a href="#url">Hats</a></li>
<li><a href="#url">Jumpers</a></li>
</ul>
<span>Sed convallis lobortis porttitor. Morbi congue, est ac fermentum elementum, augue tortor tristique libero, quis lobortis erat elit eu eros.</span>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

Questions or Comments? Just ask or leave a note, I'd be glad to help you out or take any advice.

Page crease for DIV boxes using CSS

This tutorial is will produce those page crease containers you usually see on most blogs/site. This tutorial allows you to do just that to any DIV elements located anywhere on your blog/site. It does so by using relative positioning to slightly offset a DIV to the bottom right while using it's background image (in this case, the creased image) as its border of the outer DIV. Let's get started, but first and foremost, always remember to back-up your current existent template in case it doesn't turn out as expected.



Click here to view a demo
(Although the demo is not showing the border, when implemented in Blogger, border will be visible.)

Download the entire zip file
(Zip files include entire codings along with images needed to implement this tutorial.)

CSS SECTION CODE
(Section code below should be placed in the CSS part of your template, located right before your closing head tag.)

<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}

.curlycontainer .innerdiv{
background: transparent url(media/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>

HTML SECTION CODE
(section code below should be placed in your desired location but in your HTML section code, you can also use "Add a Gadget" under Page Elements and move it to your desired location.)

<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here.
</div>
</div>

NOTE: Remember that you can always modify the CSS part of the section code to your desired styles.

Questions or Comments? Just ask or leave a note, I'd be glad to help you out or take any advice.

CSS DIV Arrow Comment Box

Add a simple arrow comment box using css and an "arrow" image and sub texts right beneath it. It's a nice interface to use for your blog's comment boxes, for example. The arrow image is being used as a background image, meaning you can control how much of it is shown by adjusting it's horizontal and vertical positions.

/ demo / - / download /



CSS Code

.commentbox{
background-color: #ececec;
width: 450px;
padding: 10px;
}

.commentfooter{
background: url(media/arrow.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}

HTML Code

<div class="commentbox">
This is some comment.<br />This is some comment.<br />This is some comment.
</div>
<div class="commentfooter">Posted by Author on 05/10, 03:39 AM</div>

CSS DIV boxes with gradient shadow

This example integrates javascript with CSS to create a gradient shadow effect for containers or elements on your page with a customizable shadow depth and coloring. To enable the effect; simply add the "shadow" class name tags to your desired element.

[ download files ] - [ demo ]



CSS Code

<style type="text/css">

.shadow{ border:1px solid silver; font:10pt arial; position:relative; display:inline; background:white; z-index:100 }

.shadow_inner{ overflow:hidden; position:absolute; top: -1000px; filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/ opacity:0.1; /*firefox 1.5 opacity*/ -moz-opacity:0.1; /*mozilla opacity*/ -khtml-opacity:0.1; /*opacity*/ z-index:10 }

</style>

<script type="text/javascript">

var gradientshadow={} gradientshadow.depth=6 //Depth of shadow in pixels gradientshadow.containers=[]
gradientshadow.create=function(){ var a = document.all ? document.all : document.getElementsByTagName('*') for (var i = 0;i < a.length;i++) { if (a[i].className == "shadow") { for (var x=0; x<gradientshadow.depth; x++){ var newSd = document.createElement("DIV") newSd.className = "shadow_inner" newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth) if (a[i].getAttribute("rel")) newSd.style.background = a[i].getAttribute("rel") else newSd.style.background = "black" //default shadow color if none specified document.body.appendChild(newSd) } gradientshadow.containers[gradientshadow.containers.length]=a[i] } } gradientshadow.position() window.onresize=function(){ gradientshadow.position() } }

gradientshadow.position=function(){ if (gradientshadow.containers.length>0){ for (var i=0; i<gradientshadow.containers.length; i++){ for (var x=0; x<gradientshadow.depth; x++){ var shadowdiv=document.getElementById("shadow"+i+"_"+x) shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px" shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px" shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px" shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px" } } } }

if (window.addEventListener) window.addEventListener("load", gradientshadow.create, false) else if (window.attachEvent) window.attachEvent("onload", gradientshadow.create) else if (document.getElementById) window.onload=gradientshadow.create

</script>

HTML Code

<p class="shadow" style="display: block" rel="red">This is some paragraph.<br />Set display="block" inside it.<br />This is some paragraph.</p>

<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" class="shadow" rel="blue" /><br />

<p><a href="http://www.blogspotvision.com" class="shadow" rel="green">Some link</a></p>

CSS DIV boxes with drop shadows

This example shows how to add a drop shadow style to any container element using CSS. It does this by wrapping the desired content in a DIV with its background color set to a color of the desired color for the shadow. Another DIV is set for your content and is shifted slightly upwards and to the left to expose the shadow. The "master" DIV wraps it all up but is shifted to the right and downwards, returning the entire markup to it's original page position.

IE6 is not compatible with this example, but you can apply conditional HTML to hide the effect in that browser. In contrast, IE7 is compatible with this example for finally updating to proper CSS.

Note: If you will be using an image for your content, you should give ".shadowcontainer" an explicit height, reflecting that of the image's for fixed and set location when viewed.



CSS Code

<![if !IE 6]>
.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 300px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}
<![endif]>

HTML Code

<div class="shiftcontainer">
<div class="shadowcontainer">
<div class="innerdiv">
<b>Your Header</b> <br />
Your content here. Your content here.<br />
Your content here. Your content here.<br />
Your content here. Your content here.<br />
Your content here. Your content here.
</div>
</div>
</div>

Meta tags for Blogger Blogspot

Meta tags are used on websites as a source of information to help search engines decide on the order of listing and ranking of your website(s). Meta tags only provides metadata about the HTML document; typically used by search engines to specify page description, keywords, author, etc, and will not be displayed on your blog. Though not mandatory, meta tags should be implemented in the sense that it does impact your listing and ranking in search engines, thus the higher your page rank, the more traffic you can drive. All meta tags should be placed inside your head element.

Meta tags definition and usage

Page Title
Your page title is the most important attribute for rankings. Your page title should be more than your actual page title and contain words located within the page contents.

*Blogger Blogspot handles the title for you.

Description Meta Tag
Description tags should contain a coherent description of your page, and should also contain words that are located within the page contents.

<meta content='Description Goes Here' name='description'/>

Keywords Meta Tag
A list of keywords that describes your page. For better results, select between 10 to 15 of the most popular and relevant keywords to that particular page. Keywords can be words and/or paraphrases related to your page and should not contain more than 20, otherwise, search engines won't be able to detect the main theme of your page, thus watering your page relevancy down. The ordering of your keywords also impacts it's ranking or listing so use the most important first and least important last. To determine each keywords relevancy, use Google Analytics or Webmasters Tools.

<meta content='Keywords Goes Herename' name='keywords'/>

Copyright Meta Tag
This tag simply indicates that your page and information is copy righted. For example, Copyright YOUR-BUSINESS - 2010.

<meta content='Copyright Company Goes Here - 2010' name='copyright'/>

Author Meta Tag
This tag is used to indicate the name of the webmaster, blogger, or company.

<meta content='Author Goes Here' name='author'/>

Email Meta Tag
This tag is used to display the relevant contact address for your page or blog.

<meta content='Email Goes Here' name='email'/>

Character Set Meta Tag
This tag is used to let the browser know which character set to use for the particular page. Different character sets will render your page differently.

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

Rating Meta Tag
Rating meta tags enables search engines to set an audience content rating for your page.

<meta content='General' name='Rating'/>

Robots Meta Tag
Robots are used to either allow or disallow index and/or crawl of a page.

<meta content='index,follow' name='Robots'/>

Revisit Meta Tag
Because your page could be indexed and/or crawled several times a minute; the revisit meta tag will tell search engines when you want them to come back next after the first index/crawl.

<meta content='7 Days' name='Revisit-after'/>

Expires Meta Tag
This tag is used to tell search engines when the page and it's content is no longer valid or available.

<meta content='Enter Date Here' name='expires'/>

Use the traffic estimator tool for keyword research

Are you really getting the most out of your money by bidding higher on max CPC? While it is logical to believe that by doing so, you can reduce competition, but look again. For Google AdWords, bidding higher or lower goes hand in hand with Daily Budgets. Each keyword or paraphrase you plan to use should be carefully reviewed and tested before running your campaigns to ensure maximum returns on investments.

Max CPC at 12.00
Daily Budget at 100.00

Max CPC at 1.00
Daily Budget at 100.00

You can experiment with the traffic estimator tool to come up with keywords that will actually produce a return and perform the best for your website niche. You can find keywords suggestions through Google Analytics and the Webmaster Tools provided straight from Google. It's also a good idea to use and analyze other sources that provides keywords or paraphrases for your site such as Alexa and other page rank webpages.

Four must have social media share buttons

http://blogspotvision.com
socialshare.jpg
With millions of other blogs on the internet trying to compete for PR, it’s almost impossible for your website to show up on searches, let alone be deemed relevant by search engines such as Google and Yahoo. If you want to compete with other sites in your niche, one approach you can take is by adding the top social networks share buttons to your site. This allows your readers, who is already interested in your content, to share what they find interesting on your site with their friends. This is one method to target your audience and find people who is actually trying to find your information.
To add these social media share buttons, just copy and paste the section codes below to where you’d like the buttons to appear.
Facebook Share Button

<div style='float:left;padding:1px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>

Twitter Re-tweet Button

<div style='float:left;padding:1px;'>
  <script type='text/javascript'>
tweetmeme_style = &#39;default&#39;;
tweetmeme_source = &#39;blogspotvision&#39;;
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
  <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

Digg This Button

<div style='float:left;padding:1px;'><script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

Google Buzz Button

<div style='float:left;padding:1px;'><a class='google-buzz-button' data-button-style='normal-count' expr:data-url='data:post.url' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/> </div>

Check out what it’s done for http://blogspotvision.com at alexa.com.

How to add a “bookmark this site” hyperlink

From this tutorial, you will be able to add a hyperlink for readers and visitors to easily bookmark your website for later use.

BOOKMARK THIS WEBSITE

You will need these file(s) for this tutorial:

bookmarkthis.js

You will need to upload these files to your server.

To add a “bookmark this site” hyperlink:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Under Edit HTML, add the following javascript right after your opening head tag.

 

<script src='…/scripts/bookmarkthis.js' style='text/javascript'/>

 

 

 

 

3. For the next step, you will use this link form to link any text or image of your choice to have the browser automatically trigger the bookmark function.

 

<a href="javascript:bookmarksite('YOUR WEBSITE NAME GOES HERE', 'http://www..YOUR-URL-HEREcom')">Bookmark this site</a>

 

 

 

 

4. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.

Source: http://www.dynamicdrive.com/dynamicindex9/addbook.htm

How to add image rotation with JavaScript

From this tutorial, you will be able to filter images through a single script. This is a handy script for not only web-development but also online marketing. By filtering affiliate ad’s through the script, you will be able to gain valuable insights on your readers interest and which ads are actually generating clicks and leads for you or vice versa.

 Click here to see the demo

To add the image rotation:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. From Page Elements, select Add HTML/JavaScript and then add the following JavaScript below after modifying it with your images:

 

<script language='javascript'>
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
<!--
i=0;
var ads = new Object();
var header='<CENTER><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0><TR><TD '
+ 'ALIGN=CENTER><FONT SIZE=2 FACE=Arial>';
ads[i++] = header

+'<A HREF="THE HEADER LINK" TARGET="_top">HEADER TITLE</A>'
+'</TD><TR></TR><TD><A HREF="THE IMAGE LINK" TARGET'
+'="_top"><CENTER><IMG SRC="THE LINK TO YOUR DESIRED IMAGE TO BE DISPLAYED"></CENTER>'
+'</A></TD></TR></TABLE></CENTER>';

ads.length = i;
dat = new Date();
dat = (dat.getTime()+"").charAt(8);
if (dat.length == 1)
ad_num = dat%ads.length;
else
ad_num = 0;
document.write(ads[ad_num]);
// –>
</script>

 

You can add more images by simply adding the section code below right after the middle section code above.

 

ads[i++] = header +'&lt;a href=&quot;THE HEADER LINK&quot; target=&quot;_top&quot;&gt;HEADER TITLE&lt;/a&gt;' +'&lt;/td&gt;&lt;tr&gt;&lt;/tr&gt;&lt;td&gt;&lt;a href=&quot;THE IMAGE LINK&quot; +?=&quot;_top&quot; TARGET?=&quot;TARGET?&quot;&gt;&lt;/a&gt;&lt;center&gt;&lt;img src=&quot;THE LINK TO YOUR DESIRED IMAGE TO BE DISPLAYED&quot; /&gt;&lt;/center&gt;' +'&lt;/p&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;center&gt;&lt;/center&gt;';

 

 

 

 

 

4. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.

Source: http://simplythebest.net/scripts/

Little Twitter Birdie Icon Set

 

DOWNLOAD THIS

FEATURES
Name	Little Twitter Birdie Icon Set
Number of icons	12 count / 64X64
Type of icons	.PNG
Categories	Twitter

  ICONS CONTAINED IN PACK

Glassy Diamond RSS Icons

 

DOWNLOAD THIS

FEATURES
Name	Glassy Diamond RSS Icons
Number of icons	4 count
Type of icons	.PNG, .PSD
Categories	RSS

  ICONS CONTAINED IN PACK

Mini Web-development Icons by Asher

 

DOWNLOAD THIS

FEATURES
Name	Mini Web-development Icons by Asher
Number of icons	18 count
Type of icons	.png
Categories	Web-development

  ICONS CONTAINED IN PACK