A Cool Any Size jQuery Powered Featured Posts Slider For Blogger



Over the last few weeks i have published some cool jQuery Gadgets and Widgets for your Blogs.In this post i have taken the jQuery Easy Slider, a stylish slide show with some neat options and turned it into a kinda mini slider with the option to go large.We previously published the Blogger jQuery Anything Slider that had the option to add videos or images as slides and a Simple But Stylish Blogger Featured Posts Slider.So i wanted to continue with a slide show that could be easily re sized from spanning the width of your blog to the miniature example i have here.

This jQuery Featured Posts Slider also has features like auto scroll, continues scroll plus next slide and previous slide buttons for manual scroll.The original Easy Slider script and code was created by the very cool Css Globe, below is a live demo of our version.

Scripts Updated : 16 April 2014.

View Demo Button

As you can see i have gone small in the demo but it could be even smaller and of course much much bigger.

Add The Any Size jQuery Slider To Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

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 – How To Find Code In A Blogger Template)

]]></b:skin>

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

/*Slider Css*/
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{

width:320px;
height:111px;

overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;

top:15px;

}
#nextBtn{
left:320px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(http://1.bp.blogspot.com/-fH1rGWYTkbU/Tf6MbKOD9JI/AAAAAAAAEbc/Wz-cdPzr2Ik/s1600/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(http://1.bp.blogspot.com/-5zuaXipw548/Tf6MahaUqII/AAAAAAAAEbY/rToQ90dXLU8/s1600/btn_next.gif) no-repeat 0 0;
}
/*Slider Css Info @ http://www.spiceupyourblog.com*/



Change the size of the slider – The width and height are highlighted in yellow so you change these to your required dimensions.You will also have to change the position of the next and previous buttons which is a little more tricky.

Highlighted in red you can see i have the buttons 15px from the top, if you made the slider bigger you would increase the margin from the top.So for example if you made the slider 222px high you would make this 30px.You can try a few margins until you get it right.

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 – How To Find Code In A Blogger Template)

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

Note – If you have previously added jQuery to your template you can leave out the section in green.

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’ type=’text/javascript’/>

<script src=’http://yourjavascript.com/26744101421/easy-slider-new-suyb.js’/>
<script>
$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true
});
});
</script>

That’s the Css and Script added for the slider now we add the Html for the actual images.

The Html, Links And Images

This is the html for the actual slider in the demo blog, you can see the links and images highlighted.You can copy and paste this code into a Html / Javascript gadget from your design page, add your links then save and drag and drop into position.

<div id=”slider”> <ul>

<li><a href=”http://www.spiceupyourblog.com“><img src=”http://1.bp.blogspot.com/-u_WOZqWHpEU/Tf6MYCU1eXI/AAAAAAAAEbE/FIPXIj7ReFc/s320/01.jpg” width=”320px” height=”111px” /></a></li>

<li><a href=”http://www.bestbloggertemplates.net“><img src=”http://4.bp.blogspot.com/-oedOSjhiv5U/Tf6MYgwd2bI/AAAAAAAAEbI/9FMLkdZ-rck/s320/02.jpg” width=”320px” height=”111px”/></a></li>

<li><a href=”http://www.socialiconstudio.com“><img src=”http://2.bp.blogspot.com/-jImc67oxQp0/Tf6MZIdfrcI/AAAAAAAAEbM/BLfEQP710O0/s320/03.jpg” width=”320px” height=”111px” /></a></li>

<li><a href=”http://www.spiceupyourblog.com“><img src=”http://1.bp.blogspot.com/-wc4HttM7_jc/Tf6MZqCtRnI/AAAAAAAAEbQ/A5KrplnQrvU/s320/04.jpg” width=”320px” height=”111px” /></a></li>

<li><a href=”http://www.bestbloggertemplates.net“><img src=”http://2.bp.blogspot.com/-13IJB7gKbvY/Tf6MaGxbeII/AAAAAAAAEbU/fpQwnFerrLs/s320/05.jpg” width=”320px” height=”111px” /></a></li>

</ul>
</div>

Note – The links are in yellow and the image URLs in red, change these to your links and images.

Note 1 – If you do change the size of the slider you need to change the width and height in each slide above to the same dimensions.

Add More Slides – To add more slides you simply add another link and image like this after the <ul> tag above :

<li><a href=”http://www.bestbloggertemplates.net“><img src=”http://2.bp.blogspot.com/-13IJB7gKbvY/Tf6MaGxbeII/AAAAAAAAEbU/fpQwnFerrLs/s320/05.jpg” width=”320px” height=”111px” /></a></li>

That’s it for the versatile jQuery Easy Slider and this Blogger Tip.Once again thanks to Css Globe, and make sure to check out more of our jQuery Gadgets and Blogger Gadgets.

33 comments:

  1. can i use this for ads? 125×125 ads…

    ReplyDelete

  2. I have problem with all slider codes!!

    ReplyDelete

  3. nice post. i will try this later

    ReplyDelete

  4. Urdu Movies TeamJune 21, 2011 at 5:07 AM

    what a nice , slide show,, can I use it for blogger,,
    Thanks Brother
    May God bless you more

    ReplyDelete

  5. Very useful information, nice post. I will try it.

    ReplyDelete

  6. Urdu Movies TeamJune 21, 2011 at 7:27 PM

    can we add captions under this slide show????

    ReplyDelete

  7. Paul, you can teach me to make an admin symbol in your comment box! please teach me

    ReplyDelete

  8. paul, please teach me make a symbol admin in the comments box? I beg you, because I think it’s very interesting

    ReplyDelete

  9. Unfortunatelly theres no space for post title text yea?? Or Could you tell me how to do it with this cool slider, Bro?

    ReplyDelete

  10. Any idea how I can put the slider in the centre instead of on the left?

    ReplyDelete

     

    Replies

     

  11. blogging-heaven.comDecember 22, 2012 at 2:53 PM

    Just cover it with the center tag like before code enter < center > and after the code at the end type it will be in the center Peace 🙂

    Delete

  12.  

  13. Never mind. Don’t need to.

    ReplyDelete

  14. BJ and Cathy SchultzJuly 6, 2011 at 4:42 PM

    Thanks a lot for this slider. Works great on my site.
    I am wanting to slow down the slide changes. Is there a command to include that would cause it to delay longer between slides?

    ReplyDelete

  15. @ Bj and Cathy – I have edited the main script to reduce the speed you can see if it works.

    Replace this in step 5 – http://spiceupyourblogextras.googlecode.com/files/suyb-easyslider-blogger-v3.js

    With this – http://spiceupyourblogextras.googlecode.com/files/suyb-easyslider-blogger-v5.js

    Do let me know if it has the desired effect.

    ReplyDelete

  16. Thanks once again! Is it possible to get a longer delay between slides? Like 4-5 seconds? How can I change that? Thanks!

    ReplyDelete

  17. Also, can titles be added?

    ReplyDelete

  18. @Paul: I replaced the previous code with the v5 one, but it’s still moving just as fast. Is it just me?

    ReplyDelete

  19. Anirudh ~ Except Nothing |July 27, 2011 at 6:19 AM

    Cool Gadget , But i want to know how to give a border of the Slider .

    ReplyDelete

  20. is it possible to have this widget based on feed rss?

    ReplyDelete

  21. Hey its not working properly.. Please help.. see my blog freekerz.blogspot.com

    ReplyDelete

     

    Replies

     

  22. The code in the tutorial is the very same as the code in the demo so it is working.Make sure to back up your template and try again..

    Delete

  23.  

  24. sir if i add this into my blogger? arrows are placed above. help me sir

    ReplyDelete

  25. how can align it the center of my blog.. now it comes left aligned… plss help

    ReplyDelete

  26. Nice Share…. I like This…
    STC Technologies

    ReplyDelete

  27. Can we use latest post script in slider?

    ReplyDelete

  28. Hi, I’m having a problem adding my own prev and next buttons. I got them there, but the fixed position places them on weird places in my blog. I want to use the slider when im showing several images in the same blogpost, but a this moment the only place i’ve gotten my buttons to show up in working condition is leftaligned on top of each other. This doesnt look good to be honest. Everything else works fine, and Im very thankfull that you’ve taken the time to do such a tutorial.

    ReplyDelete

  29. I am going to use this in my blog and for each post as well so i want to known 1 thing.

    How long blogger keep my uploaded images if i use them only in slide in a post ?

    ReplyDelete

  30. Hi,
    My pictures in the slider are streched , it is not nice…. how can i configure it so that they keep their original dimensions .
    Thanks

    ReplyDelete

  31. But does this update autom,atically or do I have to add links every single rim I make a post?

    ReplyDelete

     

    Replies

     

  32. You Have to add the links and images.

    Delete

  33.  

  34. Its is a nice post….. let me give it a try !!!

    ReplyDelete

  35. But unfortunately…. it is not working here

    ReplyDelete

     

    Replies

     

  36. Thanks for the heads up Hassan I have updated the scripts so it is working now.

    Delete

  37.