Advertisements

Smooth Jquery Featured Post Slideshow For Blogger

Posted by Lasantha Bandara on February 2nd, 2013 File Under : java script, jquery, widget67 Comments

This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

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

/* ------------------------------------------------------------------------
	s3Slider

	Developped By: Boban Karišik -> http://www.serie3.info/
 CSS Help: Mészáros Róbert -> http://www.perspectived.com/
	Version: 1.0

	Copyright: Feel free to redistribute the script/modify it, as
			   long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

NOTE : To change the speed of slideshow, change the value 4000.

4.Save your template.

5.Now go to Layout-->Page Element and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" /><span>Halo 3 : Play Game Online</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" /><span>Avatar : Watch Movie Now !!!</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li>

<li class="s3sliderImage"></li>
</ul>
</div>

<div class='clear'></div>

NOTE : Replace YOUR-LINK-HERE and images with your content.

Now you have successfully installed this slide show to your site.

File Under : java script, jquery, widget

67 Responses to “Smooth Jquery Featured Post Slideshow For Blogger”

  1. Beben says:

    so smooth...good one slider

  2. Bulma says:

    Really awesome, thanks for sharing i like your tips :)

    http://hapatchan.blogspot.com

  3. Raito says:

    Why do not work in my blogger? -pics

  4. RHS says:

    Can I use this on the welcome message section of my blog. Please help me. I need to use this instead of the welcome message board in my blog. How can I do that.

    • malisa soe says:

      Nice and simple tip with snapshot what else we want i am impressed keep up that good work. I would love to spread this content to others.

  5. Mr. Leon Turpentine says:

    installed quite easily.?
    You know what would be awesome.If you put in option to allow for it to be manually controlled in addition to automatic.That would by far make it the best featured post widget on the web.

    Hope you can add it soon.

  6. Anonymous says:

    Not sure if this might get marked as spam and you'll never see it, but, check out this URL. It's a rip of your post that will make your eyes flutter in your head. LOL http://www.eblogtips.com/smooth-jquery-featured-post-slideshow-for-blogger.htm

  7. PinoywarezDL says:

    hello mate how to change the slide with your own picture? plss help me.

  8. Anonymous says:

    Hi I have an error or do not see anything good, is all black the slide

  9. Umang says:

    It's not working in my blog

    What to do ?

  10. Dan says:

    Excellent post! Works great. But.. any idea why I can only seem to add three featured posts/images? It doesn't seem to cycle through any more than that. I've checked the code, but nothing leaps out at me.

  11. Fauzan says:

    Wow, great slideshow. Thanks for post this, Lasantha. It's make my job easier.

  12. liza says:

    it works! Thanks a lot!

  13. ToTo Antonio says:

    Sir, You are very kind to share the widget. Thank You very much. It worked perferctly in my blog. Easy to install. God Bless You.

    MindFrames and Thoughts

  14. Roy says:

    Hey there is something wrong with the script...... The loop was terminated before the last post. The last post is missing every time....

  15. Oka says:

    It's great but i still confused about jquery hehehe

  16. Jep says:

    Why I can't make it work? HELP!

  17. thanos says:

    man i love your tips...veru usefull for a full time blogger like me...cheers mate

  18. sergingus says:

    grazie molto bello e funzionale.

  19. JD says:

    it is not showing 4th one. ?? can you plz review the code or am i doing something wrong ?

  20. Gregory says:

    THE 4TH SLIDE IS NOT SHOWING UP BECAUSE THERE'S A SMALL MISTAKE IN THE CODE.
    THIS IS THE SOLUTION:
    ON STEP 6 THE RIGHT CODE IS BELOW

    http://paste2.org/p/1001330

    You must always put div class='clears3sliderImage' in the last slide.

  21. Blaine - Moderator says:

    This is working fabulous for me! I was wondering (beginner) if I can change the default sizes? I assume I can but before I get to far into it...I thought I would ask!

  22. Terra says:

    Gregory (or anyone!) I have added the code you suggested and I still can't mine to cycle through the 4th slide - what might I be doing wrong?

  23. Tan Wee Cheng says:

    I have the same problem too. Can't see the 4th slide.

  24. Ariel Barnatan says:

    i added the last slide twice, it shows it then.

  25. Madalin says:

    I found a trick: You can put how many slide you wish but PASTE them somewhere in the middle not at the end of the code. A question for me: I want to see the menu only in main page, not in CONTACT or ABOUT page. Can you help?

  26. Alean Elston says:

    Gregory I tried your solution but it still doesn't work, I ended up going with Ariel's solution. Not the fix I was looking for but it is the easiest. Thanks :)

  27. Ariel Barnatan says:

    yeah, i've been adding and removing items the past month. it's working well.
    check it out: http://www.spiceracks.me <-- cooking website

  28. Yuda says:

    I have used this script in my blog and it worked.
    Thanks.

  29. Joe says:

    Awesome slide show! I'm wondering though if there could be a way to have it up-date automatically so you don't have to manually change the links and images each time you add a post?

    Cheers.

  30. Ibrahim Thalji says:

    thanks for this script , it worked fine with me on firefox , but didnt work at all on internet explorer ,, why!!

  31. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Ibrahim Thalji

    Can you tell me the version of Internet explorer you are using.

  32. Ibrahim Thalji says:

    Internet Explorer 8

  33. Lovefortechnology says:

    Thanks, working fine

  34. Lovefortechnology says:

    I would like to ask is can only appear on the homepage?

    Thank

  35. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Ibrahim Thalji

    I check it on Internet Explorer.It is working fine.Can not see any error.

  36. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Lovefortechnology

    read this:

    http://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

  37. Edigley Alexandre says:

    Deu tudo certo, mas fica um espaço entre o slide e o artigo no meu blog. Como faço para configurar e tirar esse espaço?

    Everything went fine, but it is a space between the slide and the article on my blog. How do I set up and take this space?

  38. Edgar Andres Galindo says:

    Thanks, I was Looking for something like this longtime ago

  39. EMphotography says:

    Something wrong with this codes!! :(
    A black shadow is always there, from some px after the top portion of the image! I don't know what to do.
    Please anyone help me with these! :(

  40. Neena says:

    can we have with slideshow with thumbnails? If yes, how to do that?

  41. 达达 says:

    Please help. I applied the codes as shown on this tutorial, but it did not show properly. I tried tweaking the various style CSS, however I had no luck.

    Please have a look at my test blog http://when2meets2test1.blogspot.com/

    if applied directly using the code from this tutorial, only a small fraction of the image is shown. I can't get the img section to display properly despite modifying the css values ,

    What did I get wrong? Please help

    Many thanks

  42. MoeLord says:

    It's great
    but my pic auto zoom :P

  43. d'adjie_blog says:

    works perfect n awesome,,
    thankss,,

  44. සිව්පෙතියා | Suren එන්. Semage says:

    I would like to ask is can only appear on the homepage? plz answer.

  45. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @සිව්පෙතියා | Suren එන්. Semage

    This will help:

    http://www.bloggertipandtrick.net/2009/05/how-to-show-blogger-widgets-in-homepage.html

  46. සිව්පෙතියා | Suren එන්. Semage says:

    thanx my frnd.

  47. සිව්පෙතියා | Suren එන්. Semage says:

    i want to add Next & previous button to this slide show. how can i do it? plz help me.

  48. SHAZAIN-TECH says:

    Hi I have an error or do not see anything good, is all black the slide

  49. nadeerag says:

    Thanks!!! working perfectly !

  50. TMIAJ Staff says:

    is there a way to center it under the header?

    • Amber @ Lucky Lees says:

      I would like to know how to center it under the header, as well as getting it to be spaced a little bit below my header. It has no space between my header and the slideshow which looks tacky!

      I also have a strange grey space on the left side and bottom of the slideshow that doesn't go away with any of the pictures...

      I would love to get some help with these issues! Thanks!

  51. pebriana says:

    Thanks,.. it's work

  52. Jud says:

    My problem is my image is not centered in the frame. I have a blank space to the left and bottom of the image. Thanks for any help.

  53. Maurice says:

    This is great and exceptionally informative and accurate work. I have used it and appreciate it greatly.

  54. Agnieszka says:

    Works great! Thanks a lot :) Is it possible to add more than 4 slides? I've tried just simply adding next line but it's not working.

  55. Meg says:

    Hi-

    I just tried to install, but images were completely black and not hyperlinked. Could I work with you to figure out how to install correctly?

  56. yoga says:

    works great for me!!

    really appreciate it man!

  57. Akshay says:

    Working here www.techytk.blogspot.in

    Thank You :)

  58. Panos says:

    Very Good and Very Simple!!
    Thank`s a lot....... Works to hidden blogs too!!

    Only one think i would like to Change:
    I`d like to Center it!!!!
    Can we do something on that??!!

    Note: The last post never appears..... So you put it twice :P

  59. Zed says:

    It works, but somehow the last is not shown, I wonder why...
    For example, if I have 4 ...., only the first 3 is in the slide cycle.
    Therefore, I gonna put an extra to get all of my image shown.

    My site: http://my.wolfsirius.info

  60. Honeybee says:

    Very smooth indeed! Thanks. *Big applause

  61. QurSyam says:

    Awesome slider, love it - thx 4 this sharing :)

  62. Ravi says:

    Whoa. Thats one oF the Best Slider Man. Thanks for sharing it.

  63. yash says:

    THANK YOU VERY MUCH SIR.........

  64. Ani says:

    Thanks it works perfectly on my blog! :)

Leave a Reply