Friday, November 27, 2009

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

FeaturedContentSliderjQuery 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

13 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. got it to work on one site...but not my everyday blog

    ReplyDelete
  3. hey wesley, sorry for the late reply. did you still need some help?

    ReplyDelete
  4. hey there im going to get this to work in a similar way to http://www.hiphopdx.com but i cant seem to get the featured content and the other two sidebars to co-exist on the same line, the featured content keeps pushing the sidebars to the line below... any ideas please?

    Joe

    ReplyDelete
  5. hey joe, im not quite sure what you mean by the other two sidebars. are you talking about the video and audio sidebars?

    ReplyDelete
  6. CRS EntertainmentsJanuary 07, 2010

    hey there, yeah thats what im going for the hiphopdx is someone elses site im using as a reference,

    i can make a 3 column profile and add the two side bars but as soon as i add the featured content widget to two side bards move to the line below as if the featured content is too wide,

    but even after been resized it still isnt working, is there perhaps a width figure that im missing?

    ReplyDelete
  7. really nice , thank you!
    one question , my background is dark (with white letters) , so how can i make the slider to be filled with dark collor and borders to be white?

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Hey,

    Firstly, thank you very much for "featured content slider".

    I did all directions on your blog. But i have a problem that enable pausing the slideshow on hover.

    (I did not add the following section code below instead of the one above in steps 3.)

    so where is the problem? :)

    i mean it is pausing

    thanks.

    ReplyDelete
  10. Nice Slider but I have a problem. My slider is all grey and it wont go from picture to picture.

    You can see it at paulmeara.com

    ReplyDelete
  11. thanks......... check my site

    http://www.photoshoppers101.co.cc/

    ReplyDelete
  12. Hello, I would like to know what sizes of images to be placed in locations "image4.jpg" and "image3-small.jpg" For I have set my "featured content slider" and the images do not appear when I insert the gadget. Thank you for reading my comment.

    ReplyDelete