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