Slider Post Responsive Keren Sesuai Label di Blog

"Slider Post" adalah penggeser otomatis yang sederhana yang biasanya muncul di Homepage / Beranda blogger. Kali ini kode yang saya bagikan memuat konten slider dihasilkan dari feed blog secara otomatis, berdasarkan Label. Ini sepenuhnya responsif. Karena merupakan Slider Dinamis, konten slider diperbarui setiap kali ada posting baru (jika sesuai dengan posting baru Label yang terkait).

• Demo

Fitur Slider Blogger:
- Dinamis - Konten Slider Secara Otomatis
- Sepenuhnya Responsif
- Slider sesuai Label Tertentu
- Slider dengan Posting Terbaru
- Pengaturan & Kustomisasi yang mudah

Petunjuk Pemasangan:

1. Masuk / Login ke akun Blogger

2. Pilih Tema >> kemudian Edit HTML

3. Copy kode dibawah ini sebelum </head>

<style>/*<![CDATA[*/
/*=== CSS | WINFOKU ===*/
.top-entry.slider.js_multislides.multislides{margin:14px 0}
.slides,.js_slide{display:inline-block}
.js_slide img{width:100%;transition:all .5s}
.js_slide img:hover{width:100%;transition:all .5s}
.frame{position:relative;line-height:0;overflow:hidden;white-space:nowrap}
.next,.prev{position:absolute;cursor:pointer;top:50%;font-size:1rem;background:rgba(255,255,255,.5);-webkit-transition:background .2s;padding:10px;font-weight:700;border-radius:50px;transform:translate(0,-50%)}
.next::before,.prev::before{display:block}
.next:hover,.prev:hover{background:rgba(255,255,255,.3)}
.next{right:1%}
.prev{left:1%}
.frame{width:100%}
.js_slide{width:33.333%;position:relative}
.js_slide:not(:last-child){margin-right:4px}
/*entrys*/
.entrys{padding:0;margin:0;display:block}
.top-entry{position:relative}
.entrys li &gt;a{display:block;position:relative;overflow:hidden}
.entrys li &gt;a &gt;span{display:block;line-height:1.5;font-size:20px;top:50%;left:50%;position:absolute;padding:5%;text-align:center;width:100%;white-space:normal;text-transform:uppercase;transform:translate(-50%,-50%);letter-spacing:1px;-webkit-transition:background .2s;transition:background .2s;background:rgba(68,68,68,0.3)!important}
.wjs-rel__title{display:block;line-height:1.5;font-size:20px;bottom:0;left:0;position:absolute;padding:5px 10px;text-align:center;width:100%;white-space:normal;text-transform:uppercase;letter-spacing:1px;-webkit-transition:background .2s;transition:background .2s}
.wjs-rel__title{font-size:.8rem}
h3.recent-post-title{position:absolute;bottom:0;font-size:14px;color:#fff;text-align:center;width:100%;margin:0;padding:5px 5px;line-height:1.5;background:rgba(0,0,0,.3)}
.postedon{display:inline-block;position:absolute;z-index:2;top:5px;left:5px;background:#04a4ec;font-size:12px;color:#fff;font-weight:bold;padding:5px 8px;border-radius:30px;line-height:1.2}
span.dett{position:absolute;top:5px;right:5px;display:inline-block;line-height:1.2;font-size:12px;color:#fff;padding:5px 10px;background:#444;border-radius:30px;font-weight:bold}
span.dett a{display:inline-block;color:#fff}
/* RESPONSIVE */
@media (max-width:640px){.js_slide{width:50%}}
@media (max-width:480px){.js_slide{width:100%}}
/*]]>*/</style>

4. Dan kode di bawah ini sebelum </body>

<script type="text/javascript">/*<![CDATA[*/
/* Javascript | winfoku.blogspot.com
 * Postby : Winfoku
 */
var whale=function(){"use strict";function e(t,n){return e.addElements(t,n)}function t(e,t){for(var n=0,a=e.length;a>n&&!1!==t.call(e[n],n,e[n]);n++);return e}function n(e){return e.trim()}function a(e){return(" "+(e.getAttribute("class")||"")+" ").replace(/[\t\r\n\f]/g," ")}function l(e,t){return-1<a(e).indexOf(t)}function s(e,s){var c=a(e);t(s.split(" "),function(t,a){a=n(a),l(e,a)||(c+=a+" ")}),e.setAttribute("class",n(c))}function c(e,l){t(l.split(" "),function(t,l){e.setAttribute("class",n(a(e).replace(" "+n(l)+" "," ")))})}function i(e,n){t(n.split(" "),function(t,n){(l(e,n)?c:s)(e,n)})}return e.extend=function(e){var t,n,a,l,s=1,c=arguments.length;for(s===c&&(e=this,s--);c>s;s++)if(null!=(t=arguments[s]))for(a in t)n=t[a],l=e[a],n!==l&&(e[a]=n);return e},t([s,c,i],function(e,n){n.collection=function(e,a){t(e,function(e,t){n(t,a)})}}),e.components={},e.addElements=function(t,n){var a;if(n)e.components[t]=n;else for(a in t)e.components[a]=t[a];return this},e.extend({trim:n,forEach:t,hasClass:l,addClass:s,removeClass:c,toggleClass:i}),window.addEventListener("load",function(){var t,n=e.components;for(t in n)for(var a=0,l=document.querySelectorAll("."+t),s=l.length,c=n[t];s>a;a++)new c(l[a],a,t)}),e}();!function(){"use strict";function e(e){var t=this.classes;whale.forEach(e.querySelectorAll("a"),function(e,n){var a=n.parentNode,l=a.querySelectorAll("ul"),s=a.querySelectorAll("a"),c=l[0];l.length&&(whale.addClass(a,t.parent),n.addEventListener("click",function(e){e.preventDefault(),whale.hasClass(c,t.active)?(whale.removeClass.collection(l,t.active),whale.removeClass.collection(s,t.active)):whale.addClass.collection([n,c],t.active)}))})}function t(e){var t=this.classes,n=e.querySelectorAll("."+t.item),a=e.querySelectorAll("."+t.panel);n.length&&whale.forEach(n,function(l,s){var c=s.href.split("#")[1],i=e.querySelector("#"+c);i&&(whale.hasClass(i,t.active)&&whale.addClass(s,t.active),s.addEventListener("click",function(e){e.preventDefault(),whale.forEach([n,a],function(e,n){whale.removeClass.collection(n,t.active)}),whale.addClass.collection([s,i],t.active)}))})}function n(e){var t=this.classes,n=e.getAttribute(this.data.target),a=document.getElementById(n);e.addEventListener("click",function(n){if(n.preventDefault(),whale.hasClass(a,t.active))whale.removeClass.collection([e,a],t.active);else{whale.addClass.collection([e,a],t.active);var l=function(s){var c=s.target;s!==n&&c!==a&&c.parentNode!==a&&(whale.removeClass.collection([e,a],t.active),document.removeEventListener("click",l))};document.addEventListener("click",l)}})}function a(e){var t=this.classes,n=e.querySelector("."+t.button),a=e.querySelector("."+t.content),l=t.active;whale.hasClass(a,l)&&whale.addClass(n,l),n.addEventListener("click",function(){whale.toggleClass.collection([n,a],l)})}function l(e){var t=this.defaults,n=t.width,a=t.height,l="left="+(screen.width-n)/2+",top="+(screen.height-a)/2+",width="+n+",height="+a;e.addEventListener("click",function(e){e.preventDefault(),window.open(this.href,this.target,l)})}e.prototype={classes:{active:"is-active",parent:"is-parent"}},t.prototype.classes={item:"wjs-item",panel:"wjs-panel",active:"is-active"};var s=n.prototype={classes:{active:"is-active"},data:{target:"data-target"}},c={};whale.forEach(["addClass","removeClass","toggleClass"],function(e,t){c[t]=function(e){var n,a=e.getAttribute(s.data.target),l=document.querySelectorAll("."+a);l&&e.addEventListener("click",function(){n=whale[t],n(e,s.classes.active),n.collection(l,s.classes.active)})}}),a.prototype={classes:{active:"is-active",content:"wjs-container",button:"wjs-button"}},l.prototype={defaults:{width:600,height:400}},whale.addElements(c).addElements({"wjs-menu":e,"wjs-tab":t,"wjs-spoiler":a,"wjs-outsite":n,"wjs-window":l})}();
  /*]]>*/</script>
<b:if cond='data:blog.pageType != "static_page"'>
<script>/*<![CDATA[*/
/*
 * WINFOKU SLIDER with Winfoku.js | Javascript | winfoku.blogspot.com
 */
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){function n(e,t){var n=D,o=n.classNameActiveSlide;e.forEach(function(e,t){e.classList.contains(o)&&e.classList.remove(o)}),e[t].classList.add(o)}function o(e){var t=D,n=t.infinite,o=e.slice(0,n),i=e.slice(e.length-n,e.length);return o.forEach(function(e){var t=e.cloneNode(!0);B.appendChild(t)}),i.reverse().forEach(function(e){var t=e.cloneNode(!0);B.insertBefore(t,B.firstChild)}),B.addEventListener(O.transitionEnd,y),v.call(B.children)}function i(t,n,o){(0,c["default"])(e,t+".winfoku."+n,o)}function a(e,t,n){var o=B&&B.style;o&&(o[O.transition+"TimingFunction"]=n,o[O.transition+"Duration"]=t+"ms",O.hasTranslate3d?o[O.transform]="translate3d("+e+"px, 0, 0)":o[O.transform]="translate("+e+"px, 0)")}function d(e,t){var o=D,r=o.slideSpeed,s=o.slidesToScroll,d=o.infinite,c=o.rewind,l=o.rewindSpeed,u=o.ease,f=o.classNameActiveSlide,m=r,p=t?A+1:A-1,h=Math.round(N-S);i("before","slide",{index:A,nextSlide:p}),"number"!=typeof e&&(e=t?A+s:A-s),e=Math.min(Math.max(e,0),_.length-1),d&&void 0===t&&(e+=d);var b=Math.min(Math.max(-1*_[e].offsetLeft,-1*h),0);c&&Math.abs(M.x)===h&&t&&(b=0,e=0,m=l),a(b,m,u),M.x=b,_[e].offsetLeft<=h&&(A=e),!d||Math.abs(b)!==h&&0!==Math.abs(b)||(t&&(A=d),t||(A=_.length-2*d),M.x=-1*_[A].offsetLeft,P=function(){a(-1*_[A].offsetLeft,0,void 0)}),f&&n(v.call(_),A),i("after","slide",{currentSlide:A})}function l(){i("before","init"),O=(0,s["default"])(),D=r({},u["default"],t);var a=D,d=a.classNameFrame,c=a.classNameSlideContainer,l=a.classNamePrevCtrl,m=a.classNameNextCtrl,p=a.enableMouseEvents,E=a.classNameActiveSlide;j=e.getElementsByClassName(d)[0],B=j.getElementsByClassName(c)[0],k=e.getElementsByClassName(l)[0],T=e.getElementsByClassName(m)[0],M={x:B.offsetLeft,y:B.offsetTop},_=D.infinite?o(v.call(B.children)):v.call(B.children),f(),E&&n(_,A),k&&T&&(k.addEventListener("click",h),T.addEventListener("click",b)),B.addEventListener("touchstart",x),p&&(B.addEventListener("mousedown",x),B.addEventListener("click",g)),D.window.addEventListener("resize",C),i("after","init")}function f(){var e=D,t=e.infinite,n=e.ease,o=e.rewindSpeed;N=B.getBoundingClientRect().width||B.offsetWidth,S=j.getBoundingClientRect().width||j.offsetWidth,S===N&&(N=_.reduce(function(e,t){return e+t.getBoundingClientRect().width||t.offsetWidth},0)),A=0,t?(a(-1*_[A+t].offsetLeft,0,null),A+=t,M.x=-1*_[A].offsetLeft):a(0,o,n)}function m(e){d(e)}function p(){return A-D.infinite||0}function h(){d(!1,!1)}function b(){d(!1,!0)}function E(){i("before","destroy"),B.removeEventListener(O.transitionEnd,y),B.removeEventListener("touchstart",x),B.removeEventListener("touchmove",L),B.removeEventListener("touchend",w),B.removeEventListener("mousemove",L),B.removeEventListener("mousedown",x),B.removeEventListener("mouseup",w),B.removeEventListener("mouseleave",w),B.removeEventListener("click",g),D.window.removeEventListener("resize",C),k&&k.removeEventListener("click",h),T&&T.removeEventListener("click",b),i("after","destroy")}function y(){P&&(P(),P=void 0)}function x(e){var t=D,n=t.enableMouseEvents,o=e.touches?e.touches[0]:e;n&&(B.addEventListener("mousemove",L),B.addEventListener("mouseup",w),B.addEventListener("mouseleave",w)),B.addEventListener("touchmove",L),B.addEventListener("touchend",w);var r=o.pageX,a=o.pageY;z={x:r,y:a,time:Date.now()},R=void 0,F={},i("on","touchstart",{event:e})}function L(e){var t=e.touches?e.touches[0]:e,n=t.pageX,o=t.pageY;F={x:n-z.x,y:o-z.y},"undefined"==typeof R&&(R=!!(R||Math.abs(F.x)<Math.abs(F.y))),!R&&z&&(e.preventDefault(),a(M.x+F.x,0,null)),i("on","touchmove",{event:e})}function w(e){var t=z?Date.now()-z.time:void 0,n=Number(t)<300&&Math.abs(F.x)>25||Math.abs(F.x)>S/3,o=!A&&F.x>0||A===_.length-1&&F.x<0,r=F.x<0;R||(n&&!o?d(!1,r):a(M.x,D.snapBackSpeed)),z=void 0,B.removeEventListener("touchmove",L),B.removeEventListener("touchend",w),B.removeEventListener("mousemove",L),B.removeEventListener("mouseup",w),B.removeEventListener("mouseleave",w),i("on","touchend",{event:e})}function g(e){F.x&&e.preventDefault()}function C(e){f(),i("on","resize",{event:e})}var M=void 0,N=void 0,S=void 0,_=void 0,j=void 0,B=void 0,k=void 0,T=void 0,O=void 0,P=void 0,A=0,D={};"undefined"!=typeof jQuery&&e instanceof jQuery&&(e=e[0]);var z=void 0,F=void 0,R=void 0;return l(),{setup:l,reset:f,slideTo:m,returnIndex:p,prev:h,next:b,destroy:E}}Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};t.winfoku=i;var a=n(2),s=o(a),d=n(3),c=o(d),l=n(5),u=o(l),v=Array.prototype.slice},function(e,t){(function(e){"use strict";function n(){var t=void 0,n=void 0,o=void 0,i=void 0;return function(){var r=document.createElement("_"),a=r.style,s=void 0;""===a[s="webkitTransition"]&&(o="webkitTransitionEnd",n=s),""===a[s="transition"]&&(o="transitionend",n=s),""===a[s="webkitTransform"]&&(t=s),""===a[s="msTransform"]&&(t=s),""===a[s="transform"]&&(t=s),document.body.insertBefore(r,null),a[t]="translate3d(0, 0, 0)",i=!!e.getComputedStyle(r).getPropertyValue(t),document.body.removeChild(r)}(),{transform:t,transition:n,transitionEnd:o,hasTranslate3d:i}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n}).call(t,function(){return this}())},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t,n){var o=new a["default"](t,{bubbles:!0,cancelable:!0,detail:n});e.dispatchEvent(o)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=i;var r=n(4),a=o(r)},function(e,t){(function(t){function n(){try{var e=new o("cat",{detail:{foo:"bar"}});return"cat"===e.type&&"bar"===e.detail.foo}catch(t){}return!1}var o=t.CustomEvent;e.exports=n()?o:"function"==typeof document.createEvent?function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n}:function(e,t){var n=document.createEventObject();return n.type=e,t?(n.bubbles=Boolean(t.bubbles),n.cancelable=Boolean(t.cancelable),n.detail=t.detail):(n.bubbles=!1,n.cancelable=!1,n.detail=void 0),n}}).call(t,function(){return this}())},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={slidesToScroll:1,slideSpeed:300,rewindSpeed:600,snapBackSpeed:200,ease:"ease",rewind:!1,infinite:!1,classNameFrame:"js_frame",classNameSlideContainer:"js_slides",classNamePrevCtrl:"js_prev",classNameNextCtrl:"js_next",classNameActiveSlide:"active",enableMouseEvents:!1,window:window}}])});
////
/*!winfoku*/function startAnimating(e){fpsInterval=500/e,then=Date.now(),startTime=then,animate()}function animate(){requestAnimationFrame(animate),now=Date.now(),elapsed=now-then,elapsed>fpsInterval&&!stop&&(then=now-elapsed%fpsInterval,winfokuSlider.next())}function resetTimer(){now=Date.now(),elapsed=now-then,then=now-elapsed%fpsInterval}var slidesToScroll=4,slider=document.querySelector(".js_multislides"),stop=!1,frameCount=0,fps,fpsInterval,startTime,now,then,elapsed,winfokuSlider=winfoku(slider,{infinite:0,rewind:!0,enableMouseEvents:!0});startAnimating(.2),slider.addEventListener("mouseover",function(){stop=!0}),slider.addEventListener("mouseout",function(){resetTimer(),stop=!1});
  /*]]>*/
</script>
</b:if>

Jika Sudah Simpan Perubahan.

5. Buka Tata Letak >> Tambahkan Gadget dibawah Header dan masukan kode dibawah ini

<script>
/*== SLIDER POST | JAVASCRIPT | WINFOKU.BLOGSPOT.COM ==*/
var posts_no = 6; /* Untuk mengatur jumlah postingannya */
var labelnya = "Label"; /* Isikan nama labelnya */
var showpoststhumbs = true; /* Tampilkan thumnail (tidak disarankan mengubahnya) */
var thumbwidth=300; /* Lebar thumbnail */
var thumbheight=200; /* Tinggi thumbnail*/
var readmorelink = false; /* tampilkan readmorelink */
var showcommentslink = true; /* tampilkan comment count */
var posts_date = false; /*  tampilkan post date */
var post_summary = false; /* tampilkan summary / snippet */
var summary_chars = 0; /* jumlah karakter dari snippet */
function showlatestpostswiththumbs(t){document.write('<div class="top-entry slider js_multislides multislides"><div class="frame js_frame"><ul class="entrys slides js_slides recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/w"+thumbwidth+"-h"+thumbheight+"-c")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+130),d=s.substr(b+130,c-b-130),u=-130!=a&&-130!=b&&-130!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDk0Y7XScnRBsyAX0uMoY3lAquGfi-hv80QlK_QvdPYivMSgpPePuGvZdNqi8F7ZtpHM0l7nhnMVXBCGRKqKU1jAe5cmrOfVnF5pIW02S7qJGrJY3DIWVdWGwiANllxbx5A2ppN3eMypY9/s640/no-image.png"}
var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list js_slide"><div class="postedon"><span>'+labelnya+'</span></div><a href="'+r+'">'),
1==showpoststhumbs&&document.write('<img class="recent-post-thumb" src="'+u+'"/>'),
document.write('<h3 class="recent-post-title"><span>'+i+"</span></h3></a>"),
"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";
var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);
var y=A.lastIndexOf(" ");A=A.substring(0,y),
document.write(A+"...")}var _="",$=0;
document.write('<span class="dett">'),
1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),
1==readmorelink&&(1==$&&(_+=" </span>"),
_=_+'<span class="redmore"><a href="'+r+'" class="urls" target ="_top">Selengkapnya</a></span>',$=1),
1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comment"==l&&(l="1 Comment"),"0 Commments"==l&&(l="No Comments"),
l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),
document.write(_),document.write(""),document.write("</li>")}document.write("</ul></div><span class='js_prev prev dan-arrow-left fa fa-arrow-left'></span><span class='js_next next dan-arrow-right fa fa-arrow-right'></span></div>")}
document.write("<script src=\/feeds\/posts\/default/-/"+labelnya+"?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs><\/script>");
document.write("<script type=\'text\/javascript\'>\/\/<![CDATA[\r\n$(document).ready(function() {$(\'img.recent-post-thumb\').attr(\'src\', function(i, src) \r\n{return src.replace( \'s200-c\', \'w300-h190-c\' );});});\r\n\/\/]]><\/script>");
</script>

Ket:
Label : Diganti dengan nama label yang ingin ditampilkan.
6 : Mengatur jumlah konten yang ingin ditampilkan.

Simpan dan lihat hasilnya.