Skip to main content

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( left center no-repeat}
#imgnext {right:0; background:url( right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url( center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url( center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url( 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'>

<p>New artwork coming soon</p>
<a href='#'><img alt='chiefdoodle' height='70' src='' width='90'/></a>
<p>Stay tuned for version 3</p>

<img alt='chiefdoodle' height='70' src='' width='90'/>
<p>New apparels coming soon</p>
<a href='#'><img alt='chiefdoodle' height='70' src='' width='90'/></a>

<p>Deck out just about anything with Chiefdoodle</p>
<a href='#'><img alt='chiefdoodle' height='70' src='' width='90'/></a>

<p>You see it on Facebook.. get yours!</p>
<img alt='Blue Fish' height='70' src='' width='90'/>

<p>Sneak-peak of whats coming</p>
<a href='#'><img alt='chiefdoodle' height='70' src='' width='90'/></a>

<p>Elevate your life..</p>
<a href='#'><img alt='chiefdoodle' height='70' src='' width='90'/></a>
<h3>&quot;Tap into the mind of the unconscious&quot;</h3>
<p>Where creativity sparks innovations</p>
<a href='#'><img alt='chiefdoodle' height='70' src='' width='90'/></a>
<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'>
<div id='thumbnails'>
<div id='slideleft' title='Slide Left'/>

<div id='slidearea'>
<div id='slider'/>
<div id='slideright' title='Slide Right'/>
<script src='' type='text/javascript'/>
<script type='text/javascript'>
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);
Note: All images should be replaced with that of yours, and as always is open for customizations.


  1. nice slide with tiny script ;)

  2. thanx B, haha i like your gravatar. one of my clients is actually an artist and can draw you from a picture if you want to check him out. aka chiefdoodle

  3. I make from online gravatar maker...xixixixi :))


Post a Comment

Popular posts from this blog

How to add a calendar icon as date header

From this tutorial, you will be able to add your very own calendar icon to your blogger! If you’re going to show the date on every post, why not do it with a little style and make it a little more appealing to viewers? If you want your calendar icon to appear on every post, read Blogspot Vision’s post on how to do that by clicking here to go to the post. Let’s get started but first and foremost, make sure you back-up your existing template, just in case it doesn’t turn out as expected. Steps to follow:1. Login to your Blogger dashboard2. Go to Layout > Edit HTML (Click on “expand widgets” box)3. Search for the following section code: ]]></b:skin>
and add the following section code below right before .date {
    height: 50px;
    width: 45px;
    background: url( no-repeat;
    font: normal 22px Arial;
    color: #666666;
    text-align: center;

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]>
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px;…

How To Show The Post Date On Every Post

From this tutorial, you will be able to show the post date on every last one of your posts. As we all know, Blogger’s default templates only show a single date for every post that was posted that day. Some readers will find it convenient to have that quick glance at the date on each post, but some will not even notice. This tutorial is definitely handy if you plan to use a calendar icon as your post date, since the timestamp can be modified. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.

Steps to follow:
1.Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Now search for the red line of code or similar code:Note: If you can’t seem to find the line in red, try the second section code in blue.<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>