Smooth Jquery Featured Post Slideshow For Blogger

Posted by Lasantha Bandara File Under : java script, jquery, widget 67 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="https://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="https://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="https://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="https://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.

«
»

67 thoughts on “Smooth Jquery Featured Post Slideshow For Blogger”

  4. 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.

    Reply

    1. 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.

      Reply

  5. 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.

    Reply

  6. 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

    Reply

  10. 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.

    Reply

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

    Reply

  21. 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.

    Reply

  22. 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!

    Reply

  23. 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?

    Reply

  26. 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?

    Reply

  27. 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 🙂

    Reply

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

    Reply

  30. 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.

    Reply

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

    Reply

  38. 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?

    Reply

  40. 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! 🙁

    Reply

  42. 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

    Reply

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

    Reply

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

    Reply

    1. 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!

      Reply

  53. 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.

    Reply

  55. 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.

    Reply

  56. 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?

    Reply

  59. 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 😛

    Reply

  60. 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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.