recent posts slider by label
Updated on 13 May
First we first open the Blogger → Dashboard → Themes → Edit HTML and put the following CSS code above the </head> tag.
<style>/*<![CDATA[*/
/*=== CSS | CODEPELAJAR ===*/
.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 >a{display:block;position:relative;overflow:hidden}
.entrys li >a >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>
<script type="text/javascript">/*<![CDATA[*/
/* Javascript | Codepelajar.com
* INCLUDE : WHALE JS by Zkreation
* VERSION : 1.5.3
*/
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:view.isHomepage'>
<script>/*<![CDATA[*/
/*
* IORY SLIDER with Vanila.js | Javascript | Codepelajar.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+".lory."+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.lory=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}}])});
////
/*!lory*/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,lorySlider.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,lorySlider=lory(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>
<script>
/*== SLIDER POST | JAVASCRIPT | CODEPELAJAR.COM ==*/
var posts_no = 8; /* Untuk mengatur jumlah postingannya */
var labelnya = "Wallpaper"; /* 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/AVvXsEi8UdinElRy_xfcov-6ToAW2B_qyTcm3UjlzZWLnzJLhPk7m7LIPJtXbobGvi4VwKdEsyt42O_FCbZYRV5vAgV4M6-c4kkbgZaNOw9LKBWYYFNjKkFG1Mi7HDsYKeteQJOy1cGudUHPOPia/s1600/no-thumb.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>
Source: Codepelajar.com
0 comments for recent posts slider by label