Dynamic Image Post Slider for Blogger

One of my most requested tutorials is for a dynamic image post slider on Blogger. Today, I’m sharing with you one of the many methods of creating and styling a post slider for Blogger using HTML, CSS and JS to dynamically show your recently published posts.

add a dynamic responsive

Add Post Slider to your Blogger Blog

1. For the slider to work you need to check the following settings:

  • Settings > Basic > Blog Readers > Public
  • Settings > Other > Allow Blog Feed > Full

2. You’ll also need to add Font Awesome to your blog, follow the install instructions here and add the script provided by Font Awesome above the closing head tag (</head>) in your theme.

Now we’ll move on to adding some styling…

The CSS
3. Go to Theme > Edit HTML and find the CSS section of your theme (between <b:skin> and ]]> </b:skin>).

Add the following CSS above the closing ]]> </b:skin> tag.

/* Start XOmisse Blog Slider */
.cycle-slideshow{width:100%;height:400px;display:block;text-align:center;z-index:0;overflow:hidden;margin:0;position:relative;}.cycle-slideshow ul{width:100%;height:100%;height:100vh;padding:0;}.cycle-slideshow li{width:100%;height:100%;margin:0;padding:0;}.cycle-prev,.cycle-next{position:absolute;top:0;width:11%;opacity:.92;filter:alpha(opacity=92);z-index:800;height:100%;cursor:pointer;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s;opacity:0;}.cycle-slideshow:hover .cycle-prev,.cycle-slideshow:hover .cycle-next{opacity:1;}.cycle-prev{left:10px;position:absolute;top:50%;margin-top:-15px;color:#fff;outline:0;z-index:999;border:1px solid #fff;height:30px;width:30px;font-size:16px;line-height:30px;text-align:center;border-radius:50%;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s;}.cycle-next{right:10px;position:absolute;top:50%;margin-top:-15px;color:#fff;outline:0;z-index:999;border:1px solid #fff;height:30px;width:30px;font-size:16px;line-height:30px;text-align:center;border-radius:50%;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s}.slide-inside{display:table;vertical-align:middle;height:100%;padding:0;width:100%;background:transparent;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}.slide-inside:hover{background:rgba(255,255,255,.1)}.slide-title,.slide-title a:hover{display:table-cell;vertical-align:middle}.slide-image{background-position:center;background-size:cover;height:100%;width:100%}.slide-cat{display:inline-block;margin:0 3px 13px;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:2px;padding-bottom:2px}.slide-h2{color:#fff;font-size:24px;line-height:1.4em;font-weight:400;text-transform:uppercase;letter-spacing:3px;margin-bottom:16px;display:block;z-index:9}.slide-excerpt{color:#fff;font-size:12px;font-weight:300;letter-spacing:1px;padding:0 0 20px;display:none}.slide-divider{border-top:2px solid;display:block;max-width:50px;margin:0 auto;color:#fff}.slide-more{display:none;color:#fff;padding:10px 15px;margin:25px auto 10px;font-size:10px;text-transform:uppercase;letter-spacing:2px;border:2px solid #fff;display:inline-block;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}.slide-more:hover{background:#fff;color:#000}#crosscol-overflow{margin:0 auto;}.mobile .cycle-slideshow{height:250px}.mobile .slide-resume,.mobile .slide-more{display:none;}

Adding jQuery
3. Now to add the functionality. Paste the following right above </head>

<!-- include jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'/>
<!-- include Cycle2 -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js' type='text/javascript'/>

If you already call a jQuery library in your theme, you can skip the first line.

4. Underneath that, paste the following:

<!-- include XOmisse Blog Slider -->
<script>
//<![CDATA[
// Written by XOmisse for xomisse.com
// Do NOT remove credits
var showpostthumbnails=!0;var showpostsummary=!0;var random_posts=!1;var numchars=100;var numposts=4;function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i}
if(random_posts==!0){indexPosts.sort(function(){return 0.5-Math.random()})}
if(numposts>numPosts){numposts=numPosts}
for(i=0;i<numposts;++i){var entry=json.feed.entry[indexPosts[i]];var posttitle=entry.title.$t;
if(typeof cate=='undefined'){var cate="uncategorised"}else{var cate=json.feed.entry[i].category[0].term}
for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}
if("content" in entry){var postcontent=entry.content.$t}
s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl=d}else var thumburl='//placehold.it/1000x300';document.write('<li><div class="cycle-slideshow"><a href="'+posturl+'"><div class="slide-image" style="background-image:url('+thumburl+');"/><div class="slide-inside"><div class="slide-title">');document.write('<div class="slide-container">');document.write('<div class="slide-cat">'+cate+'</div>');document.write('<div class="slide-h2">'+posttitle+'</div>');var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==!0){if(postcontent.length<numchars){document.write('<div class="slide-excerpt">'+postcontent+'... </div>')}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontentl=postcontent.substring(0,quoteEnd);document.write('<div class="slide-excerpt">'+postcontent+'... </div>')}
document.write('<div class="slide-divider"></div>');document.write('<div class="slide-more">Read More</div></div></div></div>')}
document.write('</a></div></li>')}
document.write('</ul>');document.write("<div class='cycle-prev'><i class='fa fa-angle-left' aria-hidden='true'></i></div><div class='cycle-next'><i class='fa fa-angle-right' aria-hidden='true'></i></div>")}
//]]>
</script>

The HTML
5. Now go to where you want the slider to appear, either in your theme or in a gadget. Paste the following:

<div class='cycle-slideshow' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-random='true' data-cycle-slides='li' data-cycle-speed='1600' data-cycle-timeout='0'><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts\&quot;&gt;&lt;\/script&gt;&quot;);</script></div><!-- .cycle-slideshow -->

And save! You can now go back and tweak the CSS so that the slider matches your theme branding. The slider will display arrow icons when you hover over an image allowing you to flick through the posts. It will show five posts in total, to change this alter the value for var numposts=4 in the jQuery.

Post last updated:

17 responses to “Dynamic Image Post Slider for Blogger”

  1. thank you! i’ve looking for something like this for awhile šŸ˜€ i have a question a hope you can help, i want a image to appear on mobile site, but it doesn’t no matter if if put the mobile=’yes’, do you know how i could do that? the same thing for he author box, when i tried to put it, just shows on the desktop/tablet version, but no on the mobile, it’s not a widget, i know, do you know if there is a way? thank you! sorry for bothering you D:

  2. You are amazing!!!! I’ve been looking for one of these for ages. Can’t wait to try this out this weekend!

    1. Awh yay! Let me know how it goes, would love to see it šŸ™‚

  3. Hi,

    I’ve tried to add this to my blog but nothing seems to show up apart from the gap where it should be. šŸ™
    I’ve gone over it several times to make sure it’s in the right place but for me it doesn’t seem to be working. Any help would be much appreciated! x

    1. having the same issue! my blog is at nankigrewal.com

  4. Hi! Why this don’t run automatically?
    Can you help me please?
    thank you in advance, love your work ^_^

    p.s. sorry for my english

  5. ok I fixed the problem!

  6. Nara

    First off I just want to thank you for putting this tutorial together. Your site has been invaluable in helping me learn how to customize blogger.

    I managed to get the slider working on both my test blog and my main site. Everything was fine until today when my test blog started throwing out this error: (basically it only loads one post/image instead of 4 like it’s supposed to)

    Uncaught TypeError: Cannot read property ‘0’ of undefined
    at showgalleryposts ((index):2048)
    at default?max-results=4&orderby=published&alt=json-in-script&callback=showgalleryposts:2
    showgalleryposts @ (index):2048
    (anonymous) @ default?max-results=4&orderby=published&alt=json-in-script&callback=showgalleryposts:2

    I know next to nothing about scripting or java so not sure what’s happening šŸ™ I use the exact same code on both my main and test sites but only the test blog gives this error. Could you please help?

  7. Patrik Meixner

    Hello,

    Loving the slider so far!! It’s amazing.

    But if I may have a question, can you tell me how to display more than one category?
    Also, is there possibility to leave it slide automatically?

    Thank you so much and appreciate your great work!

  8. Unfortunately, it didn’t work to me. The slide did not show up http://www.ecofortal.com.br

    1. Hello, the code from step 5 seems to be missing from your theme which is necessary to call the script in order for the slider to show. The code from step 1 is also incorrect, you need to copy your unique code from Font Awesome.

  9. I just added the slideshow and it only works if I put it in crosscol-overflow, but then it shows on every page of my blog instead of just the home page. How can I make it so it only appears on the home page? My blog is http://www.arizonagirl.com/

    1. Hi Shelly! You can use conditional tags to make it only display on the homepage, there’s a tutorial on this here.

  10. Paige

    Hello, I noticed that Font Awesome code is only available for those who bought the license. Is there any free code which slider will work with? Thanks for your answer.

    I tried your tutorial on this blog: https://testdesignsaar.blogspot.com/

    1. Hi Paige! You can still use Font Awesome free on the web, instructions here. There’s quite a lot of alternatives, like Fontello and Line Awesome.

  11. Hello again, I followed all your steps but the slider didnĀ“t show. Can you please tell me what I am doing wrong? Thanks for your answer.

    I tried your tutorial here: https://testdesignsaar.blogspot.com/

  12. It finally works! I didnĀ“t use code in html gadget, because it didnĀ“t work so I tried to put it below and slider showed šŸ™‚ IĀ“m really grateful for this tutorial. Thank you!

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youā€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.