Automated Recent posts slider widget blogger support ssl HTTPS

Automated Recent posts slider widget blogger support ssl HTTPS  
This time i want to explain how to create responsive recent post slider widget blogger, make this widget can decrease bounce rate in analystics to increasing your blogger traffic visitors and this widget is responsive and support SSL HTTPS too.
How to create this widget :
Copy and save this css codes in the head tag <head>. This is used homepage conditional so this will display on blogger homepage.

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

<style>

/*<![CDATA[*/

#slides li:nth-child(3),#slides li:nth-child(5){left:75%;width:25%;height:50%}

#featuredpost{margin:15px auto;width:100%;position: relative;}

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#slides li,#slides ul{padding:0;margin:0;list-style:none;position:relative}

#slides ul{height:350px}

#slides li{width:50%;height:100%;position:absolute;display:none}

#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5){display:block}

#slides li:nth-child(1){left:0;top:0}

#slides li:nth-child(2){left:50%;width:25%;height:50%}

#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}

#slides li:nth-child(5){top:50%}

#slides li:nth-child(1) h4{overflow:hidden;font-size:20px;bottom:0;color:#fafafa;width:100%;padding:10px 10px 10px 90px;text-align:left;background:rgba(0,0,0,.3);height:90px;text-shadow:2px 2px 0 rgba(0,0,0,.2);line-height:1.1;left:0}

#slides li:nth-child(1) .label_text{font-size:30px;display:block;bottom:10px;left:10px;padding:0;box-shadow:5px 3px 0 rgba(0,0,0,.2)}

#slides li:nth-child(1) span.dd{display:block;font-size:30px;padding:12px 15px;background:#E53B2C;margin:0}

#slides li:nth-child(1) span.dm{display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0}

#slides li:nth-child(1) span.autname,#slides li:nth-child(1) span.dy{display:none}

#slides a,#slides img{display:block;width:100%}

#slides a{height:100%;overflow:hidden}

#slides img{height:100%;border:0;padding:0;background-color:#333;-moz-transform:scale(1) rotate(0);-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);transition:all .6s linear}

#slides li:nth-child(1) .overlayx,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none}

#slides li a:hover img{-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all .3s linear}

#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifu70Uc4uCO3lHqmnh92_O44YPaWIw18KsMW7TtdUWhyphenhyphen9fq4U3U4WweQyqGnfkmjiQ2_gZ3MhT9cUCeKp3ghI3cteAh5abdtzGHcyUf_JhqKJu2JgEbMXRNkCRps7YRkqS8O7pE9O_Rib1/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x}

#slides .label_text,#slides h4{z-index:3;left:10px;position:absolute;}

#slides h4{bottom:40px;margin:0 10px 0 0;font-size:13px;padding:5px 10px;color:#f9f9f9;line-height:1.1;font-weight:400;background:rgba(41,41,41,.7);text-align:left}

#slides .label_text{font-size:12px;color:#fff;bottom:10px;background:#E53B2C;background:rgba(229,59,44,.8);padding:3px 6px}

#slides .overlayx,#slides li{transition:all .4s ease-in-out}

#slides li:hover .overlayx{opacity:.1}

#featuredpost.loadingxx{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizW-xPNT1NSaSMdynkaTIryWWG7tLBiP6DdJQ8xgvwbM29UjEBBQ_FgqkEAXsrsskfe5x95GK_L1haoQ7czvXVZOxN7IsxPR_6DHG0vdVl-iMyNCOyqBNpEiwuLaUPcY0n_ZNEE9vwbMW-/s1600/loadingbox.gif) no-repeat 50% 50%;}

#buttons{opacity:0;transition:all .4s ease-in-out}

#featuredpost:hover #buttons{opacity:.7}

#nextx,#prevx{position:absolute;top:0;bottom:0;width:60px}

#prevx{left:0;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYjjLGciwfGBmxXtmJ698phPCo0zDf3JZsrS7H64DdYJEHyzydBV_aBYMPGMg2s1H1TZTocFp_FgitoTEx74Ne7dh_dxqTDANZ15cKzjSuvn2yvOLERpwk8MWwaEHe4_p7Fh56uiFn7W3r/s1600/right-sign-codes.png") center no-repeat;background-size:50px 50px}

#nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYjjLGciwfGBmxXtmJ698phPCo0zDf3JZsrS7H64DdYJEHyzydBV_aBYMPGMg2s1H1TZTocFp_FgitoTEx74Ne7dh_dxqTDANZ15cKzjSuvn2yvOLERpwk8MWwaEHe4_p7Fh56uiFn7W3r/s1600/right-sign-codes.png") center no-repeat;background-size:50px 50px}

@media only screen and (max-width:1024px){#slides ul{height:320px}

}

@media only screen and (max-width:800px){#slides li:nth-child(1) h4{font-size:18px;}

}

@media only screen and (max-width:640px){#slides ul{overflow:hidden}

#slides li:nth-child(1){width:100%;height:100%}

#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5){top:0;left:100%;height:100%}

#nextx{right:0;}

}

@media only screen and (max-width:480px){#slides ul{height:200px}

#slides li:nth-child(1) h4{font-size:13px;}

#nextx, #prevx{bottom:50%}

}

/*]]>*/

</style>

</b:if>

After that add this java script bellow above the body tag </body>

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

<script type='text/javascript'>

//<![CDATA[

function FeaturedPost(a){(function(e){var h={blogURL:window.location.origin,MaxPost:15,idcontaint:"#featuredpost",ImageSize:600,interval:4000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRNBy8Mt07epPAL9QCP-DTeRQd5VlYtFrbKYMMhmAqZ4mY9EJB_LttyNAkDtlozwctLuLHtz4TU16d-fJC84OXLSS1UH8qlv76aZkxPZe-Vnm8YiaOhT0hM_g1aMKpZ5ufxaWrukrrHK8Y/s1600/nothumb_large.png",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize)}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e());e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')

$(document).ready(function () {

FeaturedPost();

});

//]]>

</script>

</b:if>

If you want sliding on change autoplay:false to be autoplay:off. Put this html code <div id="featuredpost></div> on the below of head, you can use htm widget blogger dashboard to display this.