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

Labels: , , ,

14 Comments:

Blogger Wesley Soccer said...

This comment has been removed by the author.

December 26, 2009  
Blogger Wesley Soccer said...

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

January 03, 2010  
Blogger Blogspot Vision said...

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

January 04, 2010  
Blogger CRS Entertainments said...

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

January 05, 2010  
Blogger Blogspot Vision said...

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

January 06, 2010  
Anonymous CRS Entertainments said...

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?

January 07, 2010  
Blogger psydex said...

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?

January 23, 2010  
Blogger Muhalif Nesil said...

This comment has been removed by the author.

February 07, 2010  
Blogger Muhalif Nesil said...

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.

February 07, 2010  
Blogger Paul Meara said...

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

February 19, 2010  
Blogger Parteek Thapar said...

thanks......... check my site

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

May 21, 2010  
Anonymous Best mobiles reviews said...

It's very good slider thanks for sharing


Best Mobile Phones

November 19, 2010  
Blogger teste123 said...

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.

January 11, 2011  
Blogger sherlina halim said...

Pengen yang lebih seru ...
Ayo kunjungi wwwasianbet77com
Buktikan sendiri ..

Real Play = Real Money

- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : asianbet77@yahoo.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
http://asianbet77.com/

June 03, 2015  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home