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.

17 Comments

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:

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

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?

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!

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.

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!