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 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("<script src=\"/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=showgalleryposts\"><\/script>");</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.