Cara Membuat Slider Recent Post by Label di Blog

Cara Membuat Slider Postingan Beradasarkan Label | Codepelajar.com - Selamat datang sobat pelajar di coder blogger sederhana kami ini, sudah lama saya owner codepelajar tidak update tutorial lagi karena kesibukan di duninya nyata.Pada sebelumnya saya sempat membuat tutorial membuat Featured Post dan akhirnya pada kesempatan kali ini saya bisa membuat postingan tentang tutorial cara membuat slider recent post by label dengan menggunakan kombinasi HTML, CSS, dan Javascript Whale JS.


Tutorial Slider Recent Post ini adalah permintaan dari salah satu sobat kita yang ingin dibuat kan sebuah slider yang bisa diisi dengan post berdasarkan label atau kategori tertentu. Jika di blogger, bisa dikatakan ini sebagai widget recent post by label dengan gaya slider. Library yang digunakan adalah Whale JS oleh Zkreations, juga Iory Vanila Js slider. Baiklah tanpa berkata banyak mari kita langsung ke tutorialnya saja

Cara memasang slider postingan berdasarkan label


Pertama kita buka dahulu Dasboard Blogger > Tema > Edit HTML > dan taruh kode CSS berikut di atas tag </head>.

<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 &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>

Selanjutnya kita Masukan kode Javascript berikut tepat diatas tag </body>.

<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>

Jika sudah memasukan kedua kode di atas, maka simpan template lalu pergi ke Dashboard > Tata Letak dan buat 1 Widget HTML/Javascript lalu isikan kode berikut ini dan sesuaikan dengan kebutuhan seperti label dan jumlah postingannya.

<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://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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>

Jika sudah simpan widget dan lihat hasilnya akan terlihat seperti demontrasi gambar berikut ini:


Cara Membuat Slider Recent Post by Label di Blog


Pastikan mengikuti dengan benar tutorial yang telah di berikan agar tidak terjadi kesalahan atau error pada kode template sobat.

Demikian tutorial cara membuat slider recent post by label yang saya bagikan pada pengunjung setia codepelajar. Seperti biasa, jika ada kesulitan ataupun pertanyaan seputar tutorial diatas, jangan sungkan untuk berkomentar di bawah. Sampai jumpa di tutorial anti mainstream berikutnya di Codepelajar.com.



Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel