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)

]]></b:skin>

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 500×250 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)

</head>

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
$(“.paging”).show();
$(“.paging a:first”).addClass(“active”);

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

//Adjust the image reel to its new size
$(“.image_reel”).css({‘width’ : imageReelWidth});

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

$(“.paging a”).removeClass(‘active’); //Remove all active class
$active.addClass(‘active’); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(“.image_reel”).animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer – this will repeat itself every 3 seconds
$active = $(‘.paging a.active’).next();
if ( $active.length === 0) { //If paging reaches the end…
$active = $(‘.paging a:first’); //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
$(“.image_reel a”).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(“.paging a”).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
});

});
</script>

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>
</div>
<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>

</div>
</div>

</div>

</div>

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.

64 comments:

  1. First.. stylish slider.

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  4. @Daus Visit Here

    Change Post A Comment Message On Blogger With Text Or Image | Spice Up Your Blog

    Keep Visiting Spicupyourblog and Get Useful Tutorial for your blog.

    Thank You..

    ReplyDelete

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

    ReplyDelete

     

    Replies

     

  6. Yes but you need javascript…!

    Delete

  7.  

  8. @ 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.

    ReplyDelete

     

    Replies

     

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

    Delete

  10.  

  11. é isso aí muito legal!

    ReplyDelete

  12. mine failed -.-

    ReplyDelete

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

    thx – david

    ReplyDelete

  14. @ 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.

    ReplyDelete

  15. 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 😀

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  18. @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.

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  21. @ Peonyinlove – Check out this post for how to display it on the home page only.

    ReplyDelete

     

    Replies

     

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

    Delete

  23.  

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

    ReplyDelete

  25. @ Peonyinlove – Great news well done !

    ReplyDelete

  26. Is there a way to get rid of the red counter on the side?
    Thanks!

    ReplyDelete

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

    ReplyDelete

  28. 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!
    Elise

    ReplyDelete

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

    ReplyDelete

  30. 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:
    http://theforkfather.blogspot.com/
    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!!!

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    Cheers

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  38. 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:
    http://catch-mani.blogspot.com/

    ReplyDelete

  39. 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
    🙁

    ReplyDelete

  40. @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….

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  43. awesome work man … works perfectly

    ReplyDelete

  44. A lot of “Thanks” for your tutorial, it really work my bro.

    ReplyDelete

  45. html5 audio playerApril 3, 2012 at 8:12 AM

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

    ReplyDelete

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

    ReplyDelete

  47. Linny @ Linnys LiteratureApril 16, 2012 at 10:06 PM

    This comment has been removed by the author.

    ReplyDelete

  48. www.paydaybox.co.ukApril 21, 2012 at 1:39 PM

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

    ReplyDelete

  49. Thanks

    ReplyDelete

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

    please help me

    ReplyDelete

  51. ΓΙΑΝΝΗΣ ΠΑΠΑΔΟΝΙΚΟΛΑΚΗΣMay 25, 2012 at 9:38 AM

    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.
    http://gr-john.blogspot.com/

    thanks in advance

    ReplyDelete

     

    Replies

     

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

    Delete

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

    Delete

  54.  

  55. New Beginnings AntiquesMay 26, 2012 at 5:21 AM

    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!

    ReplyDelete

  56. New Beginnings AntiquesMay 30, 2012 at 12:30 AM

    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.

    ReplyDelete

     

    Replies

     

  57. Books And BeyondJuly 10, 2012 at 3:41 PM

    This comment has been removed by the author.

    Delete

  58.  

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

    ReplyDelete

  60. Books And BeyondJuly 10, 2012 at 3:39 PM

    This comment has been removed by the author.

    ReplyDelete

  61. this works and looks fabulous! I have modified it to fit my blog 🙂
    Thank you.

    ReplyDelete

  62. Chandra babu ChanduSeptember 7, 2012 at 7:53 AM

    i love you bro….its working perfectly…

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  67. আমার আমিMarch 22, 2013 at 4:25 PM

    good post

    ReplyDelete

  68. How to add image title and description? Thanks

    ReplyDelete

  69. Cianid KolesnikovJuly 16, 2014 at 6:41 AM

    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.

    ReplyDelete