A Simple Stylish jQuery Featured Slideshow For Blogger


Earlier this week i brought you a very cool jQuery Featured Image Slider that can slide images and videos.In that post i explained how  i hadn't covered featured sliders or slideshows too much but was gonna make up for it.So here we have another featured slider slash slideshow slash image carousel.The slideshow in this post has a simple style but that gives us some extra options, the main one is you can easily make it any size to suit your blog or the images you want to use.

In the demo i have made it quiet small so it will fit above the posts section.But you can have it fit neatly above your posts or you can have it span across your full blog in the cross column zone.

View Demo Button

Pretty nifty, credit goes to Sohtanaka and the download for Wordpress or other platforms can be found there.Lets see how you can add it to Blogger.

Add The Simple Stylish Featured Slideshow To Blogger

Step 1. In your Blogger dashboard click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)


Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

/*--Main Container--*/
.main_view {
float: left;
position: relative;
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
.image_reel {
position: absolute;
top: 0; left: 0;
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(http://1.bp.blogspot.com/-e-v9GYybZSg/TdcdITdapZI/AAAAAAAAD-I/RKqZRg0lSjU/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
.paging a:hover {font-weight: bold;}

Change the size - I currently have the size set to 500x250 as highlighted in the code above.You can change this to make it bigger and remember that size is also the size of the images you add.

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)


Step 5. Copy and Paste the following code Directly Above / Before </head>

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

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
left: -image_reelPosition
}, 500 );


//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation

//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor


Step 6. Save your template.

That's the Script and Css added to your template to make the slider work now we add the html.

Step 1. OK back to your blogs design page and click Add A Gadget > Choose Html/Javascript :

Step 2. Copy and Paste the following code into the Html/Javascript gadget ;

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window">
<div class="image_reel">

<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-1ot3ioCYwow/Tdcf3NzfIHI/AAAAAAAAD-Q/Ckavo7b8GMw/s1600/slider-image-1.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-jm2AH-oMcH4/Tdcf3py1SYI/AAAAAAAAD-U/OGqxPE8eVNA/s1600/slider-image-2.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="http://4.bp.blogspot.com/-TCA28AlpMjI/Tdcf4MHoYuI/AAAAAAAAD-Y/NzvcJOrjM_4/s1600/slider-image-3.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-d_zcV_6OCLY/Tdcf5E4Fu2I/AAAAAAAAD-c/33kU0yD1TYk/s1600/slider-image-4.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-0uxQB121U-A/Tdcf56FpJuI/AAAAAAAAD-g/ltXixg26NtM/s1600/slider-image-6.jpg" alt="" /></a>

<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>




Adding Your Slides

Highlighted in red are the URLs this is were the image will lead to when clicked.
Highlighted in green is the Image URLs replace these with the URLs of your images.

To add more than 5 slides simply add another link and image the same as the ones there now.But make sure to add another number to the pager highlighted in blue.So at the moment there are 5 slides and the pager in blue goes to 5.If you added a 6th slide you would add it like this :

<a href="#" rel="6">6</a>

Once you have your images and links added save the gadget and drag and drop it into position.

That's your simple jQuery slider added to Blogger.

Drop your Comments and Questions below.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. First.. stylish slider.

    Can you make Tutorial about Comment blogger Css Design? Seriously.. i love your comment design

  2. thanks for this great slider :D
    i will use it on my blog http://cargoogler.blogspot.com/
    where i have used all your useful tips (almost all of them) :D

  3. I put it in my test blog, and it works perfectly! Thanks!

  4. @Daus Visit Here


    Keep Visiting Spicupyourblog and Get Useful Tutorial for your blog.

    Thank You..

  5. Is it possible to make this slider where it could be posted only to certain posts?

  6. @ Ey Wade - Do you want it in certain posts or only on the page of certain posts ? To hoe it on only some pages See This Post and the page linked to in the post.

    1. pls how to make it in the center i tried with the gadget code but cant work , pls reply

  7. would this conflict with jQuery Lightbox Image Overlay Pop Out Effect For Blogger?

    thx - david

  8. @ Nini - If it failed I'm afraid you made a mistake somewere.

    @ Anonymous - There is no reason for it to conflict with it, just make sure you only have the main jQuery script added once.

  9. it really worked! But I want the image position align center! How to do that?? The position of it currently align left, I want to center it! I add traditional *div align=''center''* ..... */div* but fail!! help!!
    Second one, is there another image ribbon backround beside the red one?? Thanks :D

  10. @ Anonymous - When you add the html place <center> before it and </center> after it.

  11. i just found a nice slider here. Its a great slider and put it on my school blog but the image turned to the small size.i don't know what's wrong. can you please tell me!!! Thank you.

  12. @Sya - All the images will be resized to the same height however you can choose the height.Look at the code in Step 3 and the explaination below the code for details.

  13. Thank you very much! It's all about the height of the image and now the slider worked perfect. Thanks for your advise and your blog!

  14. Hi thanks for the tutorial for this. I'm able to install this and it perfectly on my blog, however I don't want the slider to appear on every of my page i.e when I hit to one of my blog post I don't want the slider to show up. How am I able to put this code and position the same exact way as it appear on my blog.

  15. Replies
    1. This is a fantastic slider and great post. However, I too have the same issue of the slider appearing on every page. I was hoping to find more information but it appears there's no link to your post above (was probably removed some time ago). Could you kindly post the link again that outlines what to do to configure the slider to appear on only one page (i.e., the home page)?

      Thanks so much!

  16. Paul Crowe thanks a lot you, I got it running and it works perfectly well on my blog.

  17. @ Peonyinlove - Great news well done !

  18. Is there a way to get rid of the red counter on the side?

  19. thank you for the great slide...i have reduced the size from 250-500 to 360-340...but the red line didnt shift, what should i do?
    i wanna use it on my blog http://popcornoflife.blogspot.com/

  20. Hello, thank you so much for your beautifull slider!

    I used it for my blog, it works perfectly with Firefox, but with Chrome and IE I have some problems. Pictures are cut at the top and with IE there is a gap at right.

    My blog adress: http://a-demi-mot.blogspot.com/

    Could you help me? What should I do?

    Thank you!

  21. Thank you so much for this it saved me a lot of grief for my site thanksk again

  22. Thank you a lot for this, it worked like a charm ;)

    I just have one problem. Let's say I leave my blog page open in one tab and I change tab to check on other stuff, when I come back the slideshow keeps on turning restlessly, not waiting for the wait time.
    You can check it out on my blog here:
    Just open it, leave it in a tab and switch to someting else for a couple of minutes, then come back and you'll see what i'm talking about.

    Is there a way to fix this?

    Thanks a lot!!!

  23. I change the slider timing to 30 seconds and it doesnt work! It changes every 3 second! help me plz!

  24. Hi All,
    no one is experiencing the problem I was talking about a few comments ago? I thought I solved it yet it's still there.
    Does this gadget work ok on your pages? I mean, you switch tabs, you leave the page containing that slider inactive, then you come back and it's all right? No messed up animations?

  25. Hello, this is a great post! But i can't make it work, I only got all images appearing on the page and no script at all. I already checked and re-checked every instructions. What can I do? Thanks in advance.

  26. Hi Pedro,
    did you notice that step 5 has a scroll box in it? you need to copy the whole text, not just the part displayed.


  27. I have some problem here. If the images are different in width, how can I make it work so that the slideshow automatically resize it. And how do I set the timer?

  28. I solved my problem posted on August, 25th. It was just the jquery version. I used the 1.6.2 while this script is designed on 1.3. It runs well on 1.4, too

  29. This is really cool but I was wondering how to get pictures when clicked on to show on the same page but popped and nicer with the thumb nails of pictures underneath the one that you clicked on? I had it on my template before but I can't find it now! :-( I was wondering if you knew how to do that?

  30. Awesome.. it works like a Charm.. all Cheers for posting.

    One question here is:- How to add Title/description to the images.. please direct to the post if this is already discussed.

    Thanks and here is my blog:

  31. nice widget.....
    but can't i add more than 7 pictures in the slide...????
    after 7 pics, the number "8" goes outside the ribbon, and looks ugly

  32. @catch mani : u can do it by adding hover text with each image...i have done the same....
    i could hv provided d link of my blog...but it seems 2 be banned here...jst google 4 dis.
    or just add " title="description of image " (without quotes) after the image url....

  33. This is great. Thanks for posting. Is there a way to change the red image?

  34. Thanks for yor nice sharing!!!!

    How can I "aligned center" the entire slide????? The way you specified above is not working!!!!

    Plz solve the problem........

  35. awesome work man ... works perfectly

  36. A lot of "Thanks" for your tutorial, it really work my bro.

  37. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

  38. sir g when i add the code afteer ]]> all code show in the header what wrong with me

  39. This comment has been removed by the author.

  40. Thanks for sharing the information.. it really helped me in soughting out many problems..

  41. Sir. i successfully uploaded this slideshow to ma blog...
    i want to know, how to change the style of slideshow...

    please help me

  42. many thanks.one qusestion wuy after not long time the slider starts to spin faster?.
    i have made changes but i dont think that i chanced someting with the speed.
    beacause it works fine in the start.

    thanks in advance

    1. Hi there,
      I had the same problem, check out my comment from Oct, 3 on how I solved this.

    2. Hi !

      I have the same problem with the speed ... . At first it's work fine, but after some seconds, the slideshow is faster.

      @Totooch, I have read your comment, unfortunatly it doesn't help me :(.

  43. This is just too cool! I've been looking for code like this for months and I finally found this link! It worked great.

    A few pointers.

    1. I had problems with the last slide showing, due to the size of the pics I had. Once I adjusted the size parms, it worked perfectly.
    2. If you need to center it, just embed all of the html inside a regular html 2-column table. Adjust the width of the 1st column and add the code in the second column to make it appear centered. Through some trial and error you'll have a centered slideshow in no time!

  44. Yeah, me again!

    I just modified the code to replace the numbers in the banner with small pics of the slides themselves. So the user can see a small version of the slide they are going to see, as well as be able to see the slide so they can click directly on it. I need to get the red highlighting working a bit better, but I'll get to that on another day. But I think the pics really make it look cool! See www.newbeginningsantiques.com for what it looks like.

    1. This comment has been removed by the author.

  45. This is awesome! I've been trying to find an easy way to do this with manual and auto controls...this is perfect. Thank you!

  46. This comment has been removed by the author.

  47. this works and looks fabulous! I have modified it to fit my blog :)
    Thank you.

  48. i love you bro....its working perfectly...

  49. Thank you very much for this slider. I've tried out a lot but most didn't work or worked poorly. Your explenation was clear and simple. Like some already posted here, I have trouble with centering the slider (preferebly want it to be as wide as my blog itself). I saw the center /center sollution but don't know where to put it and the suggestion about using the 2 collums didn't make sense to me either. It would be great if you could tell me more precise where to put the center /center tags.

  50. Hi, the slider works fine; I'm having trouble fitting my images to it. One images is bleeding into another.

  51. waaaah i didn't work!!! waaaah I think I got the URL wrong but Idk
    can u teach me how to get the URL of the image?

  52. Hi Paul.
    I had been looking for a code like this for my blog. Not only was it easy to perform with my little knowledge, but the design also blends in perfectly with my blog design.

    I am using the slide show to promote current projects and I would like to add a discription to the picture. I know I could add it to the picture before uploading (like in photoshop), but since some of the data changes every now and then (as f.e. a status update) I'd rather change the text in the HTML gadget.

    Could you provide me with the code to perform that? It would be nice if I could also change the font style with it too.

    Thanks a million for your help!

  53. How to add image title and description? Thanks

  54. Oh I'm royally much obliged to you. I was searching for something like it for too many time! This is the ONLY beautiful slider that works in my Blog. Thank you muchly my great sir.


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us