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>

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.

How to add a professionally designed featured contents box

 Click here to see the demo

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

jon-smoothgallery.zip

  You will need to upload these files to your server.

To add a professionally designed featured content box:

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

2. Add the following javascript and style sheet link below right after the opening head tag of your blog:

 

&lt;link charset='utf-8' href='../jon1012-smoothgallery-205a5d5/css/layout.css' media='screen' rel='stylesheet' type='text/css'/&gt; &lt;link charset='utf-8' href='../jon1012-smoothgallery-205a5d5/css/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/&gt; &lt;span id=&quot;preserve68c91f5ba4a64c469a52dbde125b1f50&quot; class=&quot;wlWriterPreserve&quot;&gt;&lt;script src='../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2.1-core-yc.js' type='text/javascript'/&gt; &lt;script src='../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2-more.js' type='text/javascript'/&gt; &lt;script src='../jon1012-smoothgallery-205a5d5/scripts/jd.gallery.js' type='text/javascript'/&gt;

 

 

 

 

3. Next, you will need to add the following section code below to where you want the featured content box to appear. You can do this by adding a new HTML/JavaScript widget or paste it within your HTML section of your layout.

 

&lt;span id=&quot;preservef5af1b53d44447a484990ddb3d07ef84&quot; class=&quot;wlWriterPreserve&quot;&gt;&lt;script type=&quot;text/javascript&quot;&gt; function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true }); } window.addEvent('domready',startGallery); &lt;/script&gt;&lt;/span&gt; &lt;div class=&quot;content&quot;&gt; &lt;div id=&quot;myGallery&quot;&gt; &lt;div class=&quot;imageElement&quot;&gt; &lt;h3&gt;The CCNA Syllabus - Your steps to becoming a Certified Cisco Network Associate&lt;/h3&gt; &lt;p&gt;Cisco Certified Network Associate (CCNA®) validates the ability to install, configure, operate, and troubleshoot...&lt;/p&gt; &lt;a href=&quot;http://www.cisco.com/web/learning/le3/le2/le0/le9/learning_certification_type_home.html&quot; title=&quot;open image&quot; class=&quot;open&quot;&gt;&lt;/a&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/ccnasyllabus.png&quot; class=&quot;full&quot; /&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/ccnasyllabusmini.png&quot; class=&quot;thumbnail&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;imageElement&quot;&gt; &lt;h3&gt;Cisco Webex&lt;/h3&gt; &lt;p&gt;Join WebEx online meetings in seconds when you're away from the office—no account required...&lt;/p&gt; &lt;a href=&quot;http://www.webex.com/apple/&quot; title=&quot;open image&quot; class=&quot;open&quot;&gt;&lt;/a&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/ciscowebex.png&quot; class=&quot;full&quot; /&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/ciscowebexmini.png&quot; class=&quot;thumbnail&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;imageElement&quot;&gt; &lt;h3&gt;The Cisco Learning Network&lt;/h3&gt; &lt;p&gt;Join others in discussions, find useful documents for downloads, check out the Cisco Learning Network blog, interact with others in the community...&lt;/p&gt; &lt;a href=&quot;https://learningnetwork.cisco.com/index.jspa&quot; title=&quot;open image&quot; class=&quot;open&quot;&gt;&lt;/a&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/learningnetwork.png&quot; class=&quot;full&quot; /&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/learningnetworkmini.png&quot; class=&quot;thumbnail&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;imageElement&quot;&gt; &lt;h3&gt;Linksys Wireless-G Broadband Router - WRT54G2&lt;/h3&gt; &lt;p&gt;Your Price $44.99 - The Linksys Wireless-G Broadband Router is really three devices in one box. First, there's the Wireless Access Point, which lets you connect...&lt;/p&gt; &lt;a href=&quot;http://clickserve.cc-dt.com/link/click?lid=41000000030887739&quot; title=&quot;open image&quot; class=&quot;open&quot;&gt;&lt;/a&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/linksysrouter-abstronicgoog.png&quot; class=&quot;full&quot; /&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/linksysrouter-abstronicgoogmini.png&quot; class=&quot;thumbnail&quot; /&gt; &lt;/div&gt; &lt;div class=&quot;imageElement&quot;&gt; &lt;h3&gt;Cisco TelePresence 3010&lt;/h3&gt; &lt;p&gt;Meet Face To Face Without Moving Place To Place. To deliver an immersive collaborative environment with an in person experience, the Cisco TelePresence System 3010...&lt;/p&gt; &lt;a href=&quot;http://www.cisco.com/en/US/products/ps10753/index.html&quot; title=&quot;open image&quot; class=&quot;open&quot;&gt;&lt;/a&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/telepresence.png&quot; class=&quot;full&quot; /&gt; &lt;img src=&quot;http://ccnacentral.info/ccentral-featured/telepresencemini.png&quot; class=&quot;thumbnail&quot; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

 

 

 

 

 

  The above featured content box is just an example from CCNA Central. You will have to edit the text and images.

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.

This widget is brought to you by JonDesign.

Smooth and versatile horizontal accordion jQuery script

Turn an ordinary UL list into a smooth, versatile, and appealing accordion. This is good for showing off new products or featured contents from your site so readers don’t have to dig around for it. LI lists expands sideways on mouse over while contracting its peers. The HTML markup of the accordion can either be defined inline on the page or inside an external file instead. You can also specify which LI you want to have expanded by default and modify it’s appearance to fit your template.

 

 Click here to see the demo

 

Directions

Step 1: Under the Layout > Edit HTML tab - insert the following section code below right before the closing head tag – </head>

<link href='haccordion/haccordion.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='haccordion.js' type='text/javascript'>

</script>

<style type='text/css'>

/*CSS for example Accordion #hc1*/

#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}

#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

</style>

<script type='text/javascript'>

haccordion.setup({
    accordionid: &#39;hc1&#39;, //main accordion div id
    paneldimensions: {peekw:&#39;50px&#39;, fullw:&#39;400px&#39;, h:&#39;158px&#39;},
    selectedli: [0, true], //[selectedli_index, persiststate_bool]
    collapsecurrent: false //
})

haccordion.setup({
    accordionid: &#39;hc2&#39;, //main accordion div id
    paneldimensions: {peekw:&#39;30px&#39;, fullw:&#39;450px&#39;, h:&#39;150px&#39;},
    selectedli: [-1, true], //[selectedli_index, persiststate_bool]
    collapsecurrent: true //
})

</script>

Note: The code above references 2 external .js files and an image, which you need to download below (right click/ select “Save As”)

 

• haccordion.js
• haccordion.css

Step 2: Navigate over to Layout > Page Elements to add an HTML/JavaScript gadget. Copy and paste the following section code below in the box and select save.

 

Demo 1 -

<h2>Demo 1:</h2>

<div id="hc1" class="haccordion">
    <ul>

    <li>
        <div class="hpanel">
        <img style="float:left; padding-right:8px; width:200px; height:148px" src="mail_receive.png"/>subscribe by email to blogspot vision to receive daily updates, free ebooks, and notice of upcoming contests
        </div>
    </li>

    <li>
        <div class="hpanel">
        <img style="float:left; padding-right:8px; width:200px; height:148px" src="facebook.png"/>connect with us on facebook for website updates and interact with other bloggers around the world 
        </div>
    </li>

    <li>
        <div class="hpanel">
        <img style="float:left; padding-right:8px; width:200px; height:148px" src="twitter.png"/>connect with us on twitter for bite sized updates and other promotions 
        </div>
    </li>

    </ul>
</div>

<p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> </p>

 

 

Demo 2 -

<h2>Demo 2:</h2>

<div id="hc2" class="haccordion">
    <ul>

    <li style="border-right-width:0">
        <div style="padding:10px; width:250px" class="hpanel">
        subscribe by email to blogspot vision to receive daily updates, free ebooks, and notice of upcoming contests
        </div>
    </li>

    <li style="border-right-width:0">
        <div style="padding:10px; width:180px" class="hpanel">
connect with us on twitter for bite sized updates and other promotions 
        </div>
    </li>

    <li style="border-right-width:0">
        <div style="padding:10px; width:350px" class="hpanel">
        connect with us on twitter for bite sized updates and other promotions
        </div>
    </li>

    </ul>
</div>

*Tutorial completed

Source: Dynamic Drive – dhtml scripts for the real world

jQuery Accordion Content script for featured contents

The Accordion Content script enables you to group contents together and reveal them upon demand when the user clicks on their associated headers. Gives the admin an option to specify whether only one content within a group should be open at any given time and also the ability to stylize headers depending on a content’s state. Furthermore, the script allows persistence so the state of the contents is preserved within a browser session. This script enlists the help of the jQuery library for it’s engine.

Click here to see the demo

 

Directions

Step 1: Add the code below right before this code: ]]></b:skin>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}

.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}

.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}

.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}

.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}

</style>

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
    headerclass: "mypets", //Shared CSS class name of headers group
    contentclass: "thepet", //Shared CSS class name of contents group
    revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})

//Initialize 2nd demo:
ddaccordion.init({
    headerclass: "technology", //Shared CSS class name of headers group
    contentclass: "thelanguage", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: false, //persist state of opened contents within browser session?
    toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' style='width:13px; height:13px' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' style='width:13px; height:13px' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})

</script>

Note: The code above references 1 external .js file, which you need to download below (right click/ select “Save As”)

• ddaccordion.js

Step 2: Navigate to Layouts > Page Elements > Add a Gadget > HTML/JavaScript and Insert the sample code below into it’s box:

<h2>Example 1:</h2>
<a href="#" onclick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onclick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onclick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>

<h3 class="mypets">Tips</h3>
<div class="thepet">
<img src="http://photos-e.ak.fbcdn.net/hphotos-ak-snc1/hs148.snc1/5500_124294097717_112216032717_3146361_3910627_n.jpg"/>
    A growing online creative community for all Blogger users.
</div>

<h3 class="mypets">Tutorials</h3>
<div class="thepet">
"Blogger made easy, so you can get on with the better things in life"
</div>

<h3 class="mypets">Templates</h3>
<div class="thepet">
Free Blogger tutorials, templates, widgets, designs, icons, and fonts.
</div>

<p><a href="currentpage.htm?mypets=2">Reload page and select the 3rd content using a URL parameter</a></p>

<br/>

<h2>Example 2:</h2>
<a href="#" onclick="ddaccordion.collapseall('technology'); return false">Collapse all</a>  | <a href="#" onclick="ddaccordion.expandall('technology'); return false">Expand all</a>

<div class="technology">What is our company overview?</div>
<div class="thelanguage">
    A growing online creative community for all Blogger users.
</div>

<div class="technology">Our mission?</div>
<div class="thelanguage">
"Blogger made easy, so you can get on with the better things in life"
</div>

<div class="technology">Our products/service?</div>
<div class="thelanguage">
Free Blogger tutorials, templates, widgets, designs, icons, and fonts.
</div>

<p><a href="currentpage.htm?technology=0,1,2">Reload page and select the 1st, 2nd, and 3rd contents using a URL parameter</a></p>

Note: Save the work and view your template.

 

*Tutorial completed

 

Source: Dynamic Drive – dhtml scripts for the real world

How to add a clean slick featured content slider to your Blogger using jQuery UI

This script allows you to display the most popular or most interesting content of your blog in a nice intuitive way for your readers. Featured contents are commonly displayed on the index or front page, enabling readers to instantly find the “good stuff” of your blog. Furthermore, it offers the ability to customize appearance and functionality.

Click here to see a demo

Steps to follow:

1. Login into your Blogger dashboard > Layouts > Edit HTML

2. Insert the following section code below into your template right before the section code: ]]></b:skin>

#featured{ 
width:400px; 
padding-right:250px; 
position:relative; 
height:250px; 
background:#fff; 
border:5px solid #ccc; 
} 
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

Note: The above code references the external .png and .gif file "transparent-bg.png", "selected-item.gif”, which you need to download (right click, and select "Save As").

3. Next, insert the following section code below right after the section code: ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script>

4. Navigate over to Layout > Page Elements to “Add a Gadget” and paste the following section code into the box

<div id="featured">
          <ul class="ui-tabs-nav">
            <li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src="/image1-small.jpg"/><span>15+ Excellent High Speed</span></a></li>
            <li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src="/image2-small.jpg"/><span>20 Beautiful Long Exposure</span></a></li>
            <li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src="/image3-small.jpg"/><span>35 Amazing Logo Designs</span></a></li>
            <li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="/image4-small.jpg"/><span>Create a Vintage</span></a></li>
          </ul>

        <!-- First Content -->
        <div id="fragment-1" style="" class="ui-tabs-panel">
            <img alt="" src="/image1.jpg"/>
             <div class="info">
                <h2><a href="#">15+ Excellent High Speed</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">read more</a></p>
             </div>
        </div>

        <!-- Second Content -->
        <div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="/image2.jpg"/>
             <div class="info">
                <h2><a href="#">20 Beautiful Long Exposure</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">read more</a></p>
             </div>
        </div>

        <!-- Third Content -->
        <div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="/image3.jpg"/>
             <div class="info">
                <h2><a href="#">35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">read more</a></p>
             </div>
        </div>

        <!-- Fourth Content -->
        <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="/image4.jpg"/>
             <div class="info">
                <h2><a href="#">Create a Vintage</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">read more</a></p>
             </div></div></div>

Note: The above code references the external .jpg file "image4.jpg", "image2.jpg”, “image3.jpg”, “image1.jpg”, “image4-small.jpg”, “image3-small.jpg”, “image2-small.jpg”, “image1-small.jpg”, which you need to download (right click, and select "Save As").

Configuration

If you want to enable pausing the slideshow on hover, simply add the following section code below instead of the one above in steps 3.

$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});

**Tutorial completed