A Slick New Featured Posts Image Slider For Blogger




| | 52 comments

Blogger Logo RoundIn the past I have provided Blogger users with a number of different Image sliders or featured posts sliders.Recently while working on a blog design job I had a client looking for a very specific slider to display some of their best images.The slider needed to have some specific specifications which were not covered by my previous efforts.I also needed to make the slider lightweight and easy to edit so the client could quickly change the images and links.

So we were looking for the slider to be :

1. Full Width - so it spans the entire width of the blog but also for this tutorial I wanted the width to be easily changed.

2. Auto and manual scroll - We wanted the slider to scroll through images automatically, the slide would stop on hover and also visitors would have the option to scroll at their own pace.

3. Two ways to scroll - We wanted to have the classic Next/Previous buttons but also bullets below the slider to skip to any image.

4. Easy to edit - The HTML code for the slider can be accessed via the layout page rather than buried within the template.

So in this post I have to tutorial to add this new slider to your blog.You can see a live demo of the slider by following the like below :

View Demo Button

And here is the tutorial to add the slider to your blog.

Add Featured Slider To Your Blog


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

Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.


Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

Note - The only changes you may want to make to this code are in yellow at the top and set the width and height.When you set your width and height here make sure your images match those dimensions.


<!--New Featured Slider From http://www.spiceupyourblog.com -->
.fp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.fp-slides, .fp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: url("http://3.bp.blogspot.com/-T2u14ZkViVc/UDVDYSb6qoI/AAAAAAAAA4U/xgSh7zYVwGY/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("http://1.bp.blogspot.com/-J0WXZkvU9Fw/TwL174uF0sI/AAAAAAAACGU/3zCFSpAL1Xo/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("http://4.bp.blogspot.com/-q6d5ARd-gto/TwL18nZpBkI/AAAAAAAACGY/b1BSQrPbsHA/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("http://2.bp.blogspot.com/-OpDIcNy43XA/TwL16dnar-I/AAAAAAAACGM/pGYlPIxfbE8/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}
<!--New Featured Slider From http://www.spiceupyourblog.com -->

Step 3. Now In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

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 Blogger Template Template)
</head>

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

Note- If you have previously added jquery to your template remove the line of code in yellow.

<!--New Featured Slider From http://www.spiceupyourblog.com -->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='http://yourjavascript.com/3304001418/slider-code-3.js' type='text/javascript'/>
<script src='http://yourjavascript.com/0412100943/slider-code-1.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3060311041/slider-code-2.js' type='text/javascript'/>
<!--New Featured Slider From http://www.spiceupyourblog.com -->

OK with that we have added the CSS and the scripts for the slider.You can forget about them unless you want to change the width in future you will not need to make any edits.

Now we add the HTML that holds your images, links and descriptions.We add these to a HTML/Javascript gadget as shown below.This is the section you will edit to change the images in your slider

Add The HTML


Step 1. In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste In The Code as shown in the video below :


Code :

Note - See Instructions to change images, links and text below the code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--New Featured Slider From http://www.spiceupyourblog.com -->

<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://4.bp.blogspot.com/-LFb-cS9tI8Q/UWgJtdGn7nI/AAAAAAAALYE/otSeRtUYutk/s1600/spice-slider-image-1.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title Here</a>
</h3>
<p>
Write your description and information for the first image here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://3.bp.blogspot.com/-8IlLRAqMWx4/UWgJtijXkgI/AAAAAAAALYI/HrefDvHYqa8/s1600/spice-slider-image-2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title For Image Two Here</a>
</h3>
<p>
Write Your Description For Image Two Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://3.bp.blogspot.com/-M3aVVXPdNtM/UWgJtgOIbPI/AAAAAAAALYA/TGsigrwxD1o/s1600/spice-slider-image-3.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title For Image Three Here</a>
</h3>
<p>
Write Your Description For Image Three Here.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://3.bp.blogspot.com/-20aaiHxLnNQ/UWgJuEf0JrI/AAAAAAAALYU/34qAJSeKnPg/s1600/spice-slider-image-4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title For Image Four Here</a>
</h3>
<p>
Write Your Description For Image Four Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://www.spiceupyourblog.com/'><img src="http://2.bp.blogspot.com/-jJLMd6xIRVw/UWgJuBDFaEI/AAAAAAAALYQ/0o21Xx_O-FQ/s1600/spice-slider-image-5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='http://www.spiceupyourblog.com/'>Place Your Title For Image Five Here</a>
</h3>
<p>
Write Your Description For Image Five Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>

</div>
</div>
<div style='clear:both;'/>
<!--New Featured Slider From http://www.spiceupyourblog.com --></div>
</b:if>

Show The Slider On All Pages :

The slider is set to be on the home page only.If you want it on all pages remove the code highlightd in red at the start and end.

If the slider is still showing on all pages follow the steps in the video below :


This is the post mentioned in the video - Display Gadgets On Only The Home Page Or Post Pages In Blogger.

Change the slides :

I have highlighted the parts that need to be changed for the first slide you will need to change the same areas for the other four slides.

Images - I have the image URL highlighted in yellow change this for the image you want to use.

Text - I have the Title and Description highlighted in blue change this for the title and description of your image.

Links - Both the image and title can link to a page or post on your blog.I have the links highlighted in green change these for the links you want.Remember you will have to add the link to two parts of each slide.If you want it to link to the image simply add the image URL in both spots.

And that's it a really cool new featured posts slider for your blogger blog.Make sure to check out some more of our Blogger Gadgets.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


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

Stay Connected With Free Updates

Subscribe via Email

52 comments:

  1. This is a nice slider but it never seems to amaze me with the some of the useful resources you provide you readers with. You have took the blogger blog concept to the next level. Thanks for providing and sharing your skills.

    ReplyDelete
  2. Can we have such a slider in CSS instead of Jquery?

    ReplyDelete
  3. People are often afraid of these sliders at blogger, they think that slider is hard for them, that is wrong.

    ReplyDelete
  4. Really great post, might have to try this out

    ReplyDelete
  5. Thanks! I put this on my sidebar. Still working out some things (w/ my pictures) but I really like it! http://myjourneytolivingwell.blogspot.com

    ReplyDelete
  6. That's great!works perfectly!

    ReplyDelete
  7. I've tried putting it up in my blog. Looks great on homepage but the problem is it continues to appear in post page as well which looks rather gawky. Could you suggest any way for it's appearance limited to just homepage?

    ReplyDelete
    Replies
    1. Hi,

      I have changed the tutorial for the slider to only appear on the home page.

      As you have already added it to your blog this is how you can make it show on the home page only.

      Go to the HTML code you added witht he image URLs etc..(The code you added to a HTML/Javescript gadget).

      Paste this before all that code :

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      And Paste this below all that code :

      </b:if>

      That will do the trick !

      Delete
    2. I have just added a video to the bottom of the post showing exactly how to have the slider only show on the home page of your blog.

      Delete
  8. Any idea why I might get a white blank slide after each of my content slides?

    ReplyDelete
  9. I can't get this to work with or without the Jquery line. Has anyone else had a problem? (my site is www.siouxwire.com)

    ReplyDelete
  10. I have successfully programmed your slider on my blog, you can check it out here: http://aflockofbluedoves.blogspot.com However, I would lake to make it into an automatic updated recent post slider. How can I do this without having to manually change the links titles and description?

    ReplyDelete
  11. Hi ! I think it is better if every captions of the slides show with auto-hide effect.

    ReplyDelete
  12. This looks cool and works great in Chrome and Firefox. But in IE pictures are frozen and wrong captions show, even on your sample page.
    Any idea why other than IE sucks.

    ReplyDelete
  13. Hey, thanks so much for this slider. You make it so east to just plug and play the scripts!

    ReplyDelete
  14. Hi, I've used this on my blog and it works fine but I'm just wondering how do you not make it show up on all my blog posts? I just want it to show up on my home page if possible? My blog is http://duobeauty.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Hi Emma,

      I have changed the tutorial for the slider to only appear on the home page.

      As you have already added it to your blog this is how you can make it show on the home page only.

      Go to the HTML code you added witht he image URLs etc..(The code you added to a HTML/Javescript gadget).

      Paste this before all that code :

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      And Paste this below all that code :

      </b:if>

      That will do the trick !

      Delete
    2. HI Paul, thank you so much for sharing this slider. I just have one problem, the coding that you have above for having the slider only on the homepage is not working, it still is showing on all of the other pages. What would be the reason it isn't working?

      Thank you

      Delete
    3. I'm also having the same issue. It shows up on all my pages as well, even with the above added code. Is this maybe because I have a static Home Page? Any help would be greatly appreciated! Thanks! :)

      Delete
    4. Same issue for me. Slider showing up on all pages even with coding you provided inserted into the widget HTML coding.

      Delete
    5. I have just added a video to the bottom of the post showing exactly how to have the slider only show on the home page of your blog.

      Delete
    6. Hey Paul!

      I followed your instructions in the video, but it still didn't work on my blog :(

      It's still showing on all pages...

      Any other suggestions?

      Thanks!

      Delete
  15. Hi, it works perfectly except for the fact that the images load slowly while the slide changes and it looks bad. How can i make my images load smoothly and quickly or how can I delay the change speed so that the images load properly? Thanks.

    ReplyDelete
  16. please how do I upload the image to be display

    ReplyDelete
    Replies
    1. You can upload them to a blog post or a site like imgur.com Tobi.

      Delete
  17. Paul thank you for posting this.

    Would it be possible to have the text appear to the right of the slider? I would greatly appreciate it.

    ReplyDelete
  18. Hello! I successfully applied the slider to my blog, but I really wish the images would take a little more time to slide. I'd like to increase the time that each picture appears. Would that be possible? Thank you!

    ReplyDelete
    Replies
    1. Nadia in the first section of code you will see : speed: 200,
      delay: 800 increase this to increase the delay.

      Delete
  19. Hi, I'm trying to put this below the header of my blog but haven't posted it live yet, as it's 30 pixels displaced from the left and bottom. Was trying to fiddle around in the CSS to fix it, but havent been able to figure it out.

    Example of my issue: http://i.imgur.com/1fwFfCJ.png

    ReplyDelete
    Replies
    1. I have this issue too - be cool if there was a fix :)

      Delete
  20. Hi, I was wondering how to remove the arrows and the dots on the bottom? I've successfully added this to my blog but want to remove the arrows and the bullets on the bottom.

    ReplyDelete
  21. Hi Paul - awesome slider! Have you found a solution to the Gadget appearing on all pages, even with your new code added?

    ReplyDelete
    Replies
    1. Wayne I have just added a video to the bottom of the post showing exactly how to have the slider only show on the home page of your blog.

      Delete
  22. Excellent slider thanks! Quick question is there anyway to get images to auto-adjust so that they fill th e slider, or do you just have to search for the right sized images every time??

    ReplyDelete
  23. Hi,

    Thanks Paul for the slider. I have implemented on my blog. The trick to not have it show up on all the pages is to include the if statement directly into the HTML code, not the widget. Like this...






    Question, how do you get the slider to not cache?

    Thanks!

    Kin

    ReplyDelete
  24. how can I change the text float ?! I mean Right or Left ?!

    I have tried and tried but I couldn't find :\ !

    ReplyDelete
  25. Hi Paul, Thank you for the tutorial and updated video. The slider looks great and is a wonderful addition to my site @ http://www.craftedspacesweddings.com. I will be changing some the images later, but I am so happy with it. As I've posted before, I love visiting "Spice Up Your Blog" and I always find the posts to be very helpful. Thanks again!

    ReplyDelete
  26. Well I NEVER EVER write comments on peoples blog posts so you are my first :-) That being said you deserve a HUGE credit. Why? Because there are a million people out there trying to each us newbies and non-techies how to spice up our blogs but YOU actually make sense, make it easy and make it fun too. When something is easy and fun we end up feeling such success and that is a great gift you give!

    Congrats on the great website, great tips and wonderful teaching abilities.

    ReplyDelete
  27. Hi Paul, great post and its almost working. Its displaying on my home page and all other pages. Could this be because of the naming convensions I have used vs what you have in your tutorial?
    www.ducomedia.co.uk

    thanks for all your help

    ReplyDelete
  28. ohh great slider thank you, ı use this slider.

    ReplyDelete
  29. Hi Paul,

    a really great and simple slider. Implementing and changing links and pictures were as simple as they could be.
    Unfortunately my tries to give the whole thing a small border with radiused corners didn't work. Maybe I missed something, but I hope you can help.

    Thanks a lot,
    Julian

    ReplyDelete
  30. Hi Paul! Thank you for these instructions. I was wondering if there is a chance to add the slider and then have the title of the post and a few lines of the post displayed next to the picture of each slider and then have the option @read more@ just under the lines of the post? {Does that make sense to you?}
    Thanks!
    Ana

    ReplyDelete
  31. Hi Paul! I installed the code as you've explained, but it doesn't work. The automatic slide doesn't work, plus when I click the arrow to go forward nothing happens. My blog is www.thebudgetdiary.com. I would really appreciate it if you can have a look to see what I did wrong!

    ReplyDelete
  32. I do not know how to thank you, you saved me!!!! :)

    ReplyDelete
  33. I have just one problem: after having add it, the option Lead more posts in the homepage has disappeared, I do not know why :(

    ReplyDelete
  34. Wow!!! great can't wait to try this. Thanks Paul.

    ReplyDelete
  35. Thank you so much for this tutorial...
    www.thespratlyjournal.com

    ReplyDelete
  36. Is there any way I can change the dark grey slider bar to a colour of my choice?

    ReplyDelete
  37. The featured posts css code is there by default in my template. So, I just tried to add the javascript. When I did, it was not slising, it was just placed down and down. What is wrong????

    ReplyDelete



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