Thêm tiện ích bài viết theo nhãn dạng trượt ngang cho Blogspot (Slider recent post by label)

Thêm tiện ích bài viết theo nhãn dạng trượt ngang cho Blogspot (Slider recent post by label)

TruongBlogger đã đăng
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Hướng dẫn

  • Trong bài viết này mình sẽ hướng dẫn các bạn thêm một thủ thuật cho blogspot, bạn có thể tạo dạng bài viết theo nhãn hiển thị ngoài trang với dạng trượt ngang. Với thủ thuật này có thể hiển thị được nhiều bài viết hơn với bố cục gọn gàng cho blog của  bạn. Nào cùng đi vào với hướng dẫn phía dưới nhé!

    Hướng dẫn cách thêm tiện ích bài viết theo nhãn dạng trượt ngang

    Bước 1: Bạn đăng nhập vào Blogger sau đó chọn Chủ đề -> Chỉnh sửa HTML và đặt mã CSS sau phía trên thẻ </head>
    <style>
    /* CSS */
    .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:rgbaundefined255,255,255,.5);-webkit-transition:background .2s;padding:10px;font-weight:700;border-radius:50px;transform:translateundefined0,-50%)}
    .next::before,.prev::before{display:block}
    .next:hover,.prev:hover{background:rgbaundefined255,255,255,.3)}
    .next{right:1%}
    .prev{left:1%}
    .frame{width:100%}
    .js_slide{width:33.333%;position:relative}
    .js_slide:notundefined: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:translateundefined-50%,-50%);letter-spacing:1px;-webkit-transition:background .2s;transition:background .2s;background:rgbaundefined68,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:rgbaundefined0,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 undefinedmax-width:640px){.js_slide{width:50%}}
    @media undefinedmax-width:480px){.js_slide{width:100%}}
    </style>
    
    Bước 2: Bạn tìm đến thẻ </body> và chèn đoạn code sau lên phía trên nó:
    <script type="text/javascript">
    /* INCLUDE : WHALE JS by Zkreation
     * VERSION : 1.5.3
     */
    var whale=functionundefined){"use strict";function eundefinedt,n){return e.addElementsundefinedt,n)}function tundefinede,t){forundefinedvar n=0,a=e.length;a>n&&!1!==t.callundefinede[n],n,e[n]);n++);return e}function nundefinede){return e.trimundefined)}function aundefinede){returnundefined" "+undefinede.getAttributeundefined"class")||"")+" ").replaceundefined/[\t\r\n\f]/g," ")}function lundefinede,t){return-1<aundefinede).indexOfundefinedt)}function sundefinede,s){var c=aundefinede);tundefineds.splitundefined" "),functionundefinedt,a){a=nundefineda),lundefinede,a)||undefinedc+=a+" ")}),e.setAttributeundefined"class",nundefinedc))}function cundefinede,l){tundefinedl.splitundefined" "),functionundefinedt,l){e.setAttributeundefined"class",nundefinedaundefinede).replaceundefined" "+nundefinedl)+" "," ")))})}function iundefinede,n){tundefinedn.splitundefined" "),functionundefinedt,n){undefinedlundefinede,n)?c:s)undefinede,n)})}return e.extend=functionundefinede){var t,n,a,l,s=1,c=arguments.length;forundefineds===c&&undefinede=this,s--);c>s;s++)ifundefinednull!=undefinedt=arguments[s]))forundefineda in t)n=t[a],l=e[a],n!==l&&undefinede[a]=n);return e},tundefined[s,c,i],functionundefinede,n){n.collection=functionundefinede,a){tundefinede,functionundefinede,t){nundefinedt,a)})}}),e.components={},e.addElements=functionundefinedt,n){var a;ifundefinedn)e.components[t]=n;else forundefineda in t)e.components[a]=t[a];return this},e.extendundefined{trim:n,forEach:t,hasClass:l,addClass:s,removeClass:c,toggleClass:i}),window.addEventListenerundefined"load",functionundefined){var t,n=e.components;forundefinedt in n)forundefinedvar a=0,l=document.querySelectorAllundefined"."+t),s=l.length,c=n[t];s>a;a++)new cundefinedl[a],a,t)}),e}undefined);!functionundefined){"use strict";function eundefinede){var t=this.classes;whale.forEachundefinede.querySelectorAllundefined"a"),functionundefinede,n){var a=n.parentNode,l=a.querySelectorAllundefined"ul"),s=a.querySelectorAllundefined"a"),c=l[0];l.length&&undefinedwhale.addClassundefineda,t.parent),n.addEventListenerundefined"click",functionundefinede){e.preventDefaultundefined),whale.hasClassundefinedc,t.active)?undefinedwhale.removeClass.collectionundefinedl,t.active),whale.removeClass.collectionundefineds,t.active)):whale.addClass.collectionundefined[n,c],t.active)}))})}function tundefinede){var t=this.classes,n=e.querySelectorAllundefined"."+t.item),a=e.querySelectorAllundefined"."+t.panel);n.length&&whale.forEachundefinedn,functionundefinedl,s){var c=s.href.splitundefined"#")[1],i=e.querySelectorundefined"#"+c);i&&undefinedwhale.hasClassundefinedi,t.active)&&whale.addClassundefineds,t.active),s.addEventListenerundefined"click",functionundefinede){e.preventDefaultundefined),whale.forEachundefined[n,a],functionundefinede,n){whale.removeClass.collectionundefinedn,t.active)}),whale.addClass.collectionundefined[s,i],t.active)}))})}function nundefinede){var t=this.classes,n=e.getAttributeundefinedthis.data.target),a=document.getElementByIdundefinedn);e.addEventListenerundefined"click",functionundefinedn){ifundefinedn.preventDefaultundefined),whale.hasClassundefineda,t.active))whale.removeClass.collectionundefined[e,a],t.active);else{whale.addClass.collectionundefined[e,a],t.active);var l=functionundefineds){var c=s.target;s!==n&&c!==a&&c.parentNode!==a&&undefinedwhale.removeClass.collectionundefined[e,a],t.active),document.removeEventListenerundefined"click",l))};document.addEventListenerundefined"click",l)}})}function aundefinede){var t=this.classes,n=e.querySelectorundefined"."+t.button),a=e.querySelectorundefined"."+t.content),l=t.active;whale.hasClassundefineda,l)&&whale.addClassundefinedn,l),n.addEventListenerundefined"click",functionundefined){whale.toggleClass.collectionundefined[n,a],l)})}function lundefinede){var t=this.defaults,n=t.width,a=t.height,l="left="+undefinedscreen.width-n)/2+",top="+undefinedscreen.height-a)/2+",width="+n+",height="+a;e.addEventListenerundefined"click",functionundefinede){e.preventDefaultundefined),window.openundefinedthis.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.forEachundefined["addClass","removeClass","toggleClass"],functionundefinede,t){c[t]=functionundefinede){var n,a=e.getAttributeundefineds.data.target),l=document.querySelectorAllundefined"."+a);l&&e.addEventListenerundefined"click",functionundefined){n=whale[t],nundefinede,s.classes.active),n.collectionundefinedl,s.classes.active)})}}),a.prototype={classes:{active:"is-active",content:"wjs-container",button:"wjs-button"}},l.prototype={defaults:{width:600,height:400}},whale.addElementsundefinedc).addElementsundefined{"wjs-menu":e,"wjs-tab":t,"wjs-spoiler":a,"wjs-outsite":n,"wjs-window":l})}undefined);
    </script>
    <b:if cond='data:view.isHomepage'>
    <script>
    /*
     * IORY SLIDER with Vanila.js | Javascript
     */
    !functionundefinede,t){ifundefined"object"==typeof exports&&"object"==typeof module)module.exports=tundefined);else ifundefined"function"==typeof define&&define.amd)defineundefined[],t);else{var n=tundefined);forundefinedvar o in n)undefined"object"==typeof exports?exports:e)[o]=n[o]}}undefinedthis,functionundefined){return functionundefinede){function tundefinedo){ifundefinedn[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].callundefinedi.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",tundefined0)}undefined[functionundefinede,t,n){e.exports=nundefined1)},functionundefinede,t,n){"use strict";function oundefinede){return e&&e.__esModule?e:{"default":e}}function iundefinede,t){function nundefinede,t){var n=D,o=n.classNameActiveSlide;e.forEachundefinedfunctionundefinede,t){e.classList.containsundefinedo)&&e.classList.removeundefinedo)}),e[t].classList.addundefinedo)}function oundefinede){var t=D,n=t.infinite,o=e.sliceundefined0,n),i=e.sliceundefinede.length-n,e.length);return o.forEachundefinedfunctionundefinede){var t=e.cloneNodeundefined!0);B.appendChildundefinedt)}),i.reverseundefined).forEachundefinedfunctionundefinede){var t=e.cloneNodeundefined!0);B.insertBeforeundefinedt,B.firstChild)}),B.addEventListenerundefinedO.transitionEnd,y),v.callundefinedB.children)}function iundefinedt,n,o){undefined0,c["default"])undefinede,t+".lory."+n,o)}function aundefinede,t,n){var o=B&&B.style;o&&undefinedo[O.transition+"TimingFunction"]=n,o[O.transition+"Duration"]=t+"ms",O.hasTranslate3d?o[O.transform]="translate3dundefined"+e+"px, 0, 0)":o[O.transform]="translateundefined"+e+"px, 0)")}function dundefinede,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.roundundefinedN-S);iundefined"before","slide",{index:A,nextSlide:p}),"number"!=typeof e&&undefinede=t?A+s:A-s),e=Math.minundefinedMath.maxundefinede,0),_.length-1),d&&void 0===t&&undefinede+=d);var b=Math.minundefinedMath.maxundefined-1*_[e].offsetLeft,-1*h),0);c&&Math.absundefinedM.x)===h&&t&&undefinedb=0,e=0,m=l),aundefinedb,m,u),M.x=b,_[e].offsetLeft<=h&&undefinedA=e),!d||Math.absundefinedb)!==h&&0!==Math.absundefinedb)||undefinedt&&undefinedA=d),t||undefinedA=_.length-2*d),M.x=-1*_[A].offsetLeft,P=functionundefined){aundefined-1*_[A].offsetLeft,0,void 0)}),f&&nundefinedv.callundefined_),A),iundefined"after","slide",{currentSlide:A})}function lundefined){iundefined"before","init"),O=undefined0,s["default"])undefined),D=rundefined{},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.getElementsByClassNameundefinedd)[0],B=j.getElementsByClassNameundefinedc)[0],k=e.getElementsByClassNameundefinedl)[0],T=e.getElementsByClassNameundefinedm)[0],M={x:B.offsetLeft,y:B.offsetTop},_=D.infinite?oundefinedv.callundefinedB.children)):v.callundefinedB.children),fundefined),E&&nundefined_,A),k&&T&&undefinedk.addEventListenerundefined"click",h),T.addEventListenerundefined"click",b)),B.addEventListenerundefined"touchstart",x),p&&undefinedB.addEventListenerundefined"mousedown",x),B.addEventListenerundefined"click",g)),D.window.addEventListenerundefined"resize",C),iundefined"after","init")}function fundefined){var e=D,t=e.infinite,n=e.ease,o=e.rewindSpeed;N=B.getBoundingClientRectundefined).width||B.offsetWidth,S=j.getBoundingClientRectundefined).width||j.offsetWidth,S===N&&undefinedN=_.reduceundefinedfunctionundefinede,t){return e+t.getBoundingClientRectundefined).width||t.offsetWidth},0)),A=0,t?undefinedaundefined-1*_[A+t].offsetLeft,0,null),A+=t,M.x=-1*_[A].offsetLeft):aundefined0,o,n)}function mundefinede){dundefinede)}function pundefined){return A-D.infinite||0}function hundefined){dundefined!1,!1)}function bundefined){dundefined!1,!0)}function Eundefined){iundefined"before","destroy"),B.removeEventListenerundefinedO.transitionEnd,y),B.removeEventListenerundefined"touchstart",x),B.removeEventListenerundefined"touchmove",L),B.removeEventListenerundefined"touchend",w),B.removeEventListenerundefined"mousemove",L),B.removeEventListenerundefined"mousedown",x),B.removeEventListenerundefined"mouseup",w),B.removeEventListenerundefined"mouseleave",w),B.removeEventListenerundefined"click",g),D.window.removeEventListenerundefined"resize",C),k&&k.removeEventListenerundefined"click",h),T&&T.removeEventListenerundefined"click",b),iundefined"after","destroy")}function yundefined){P&&undefinedPundefined),P=void 0)}function xundefinede){var t=D,n=t.enableMouseEvents,o=e.touches?e.touches[0]:e;n&&undefinedB.addEventListenerundefined"mousemove",L),B.addEventListenerundefined"mouseup",w),B.addEventListenerundefined"mouseleave",w)),B.addEventListenerundefined"touchmove",L),B.addEventListenerundefined"touchend",w);var r=o.pageX,a=o.pageY;z={x:r,y:a,time:Date.nowundefined)},R=void 0,F={},iundefined"on","touchstart",{event:e})}function Lundefinede){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&&undefinedR=!!undefinedR||Math.absundefinedF.x)<Math.absundefinedF.y))),!R&&z&&undefinede.preventDefaultundefined),aundefinedM.x+F.x,0,null)),iundefined"on","touchmove",{event:e})}function wundefinede){var t=z?Date.nowundefined)-z.time:void 0,n=Numberundefinedt)<300&&Math.absundefinedF.x)>25||Math.absundefinedF.x)>S/3,o=!A&&F.x>0||A===_.length-1&&F.x<0,r=F.x<0;R||undefinedn&&!o?dundefined!1,r):aundefinedM.x,D.snapBackSpeed)),z=void 0,B.removeEventListenerundefined"touchmove",L),B.removeEventListenerundefined"touchend",w),B.removeEventListenerundefined"mousemove",L),B.removeEventListenerundefined"mouseup",w),B.removeEventListenerundefined"mouseleave",w),iundefined"on","touchend",{event:e})}function gundefinede){F.x&&e.preventDefaultundefined)}function Cundefinede){fundefined),iundefined"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&&undefinede=e[0]);var z=void 0,F=void 0,R=void 0;return lundefined),{setup:l,reset:f,slideTo:m,returnIndex:p,prev:h,next:b,destroy:E}}Object.definePropertyundefinedt,"__esModule",{value:!0});var r=Object.assign||functionundefinede){forundefinedvar t=1;t<arguments.length;t++){var n=arguments[t];forundefinedvar o in n)Object.prototype.hasOwnProperty.callundefinedn,o)&&undefinede[o]=n[o])}return e};t.lory=i;var a=nundefined2),s=oundefineda),d=nundefined3),c=oundefinedd),l=nundefined5),u=oundefinedl),v=Array.prototype.slice},functionundefinede,t){undefinedfunctionundefinede){"use strict";function nundefined){var t=void 0,n=void 0,o=void 0,i=void 0;return functionundefined){var r=document.createElementundefined"_"),a=r.style,s=void 0;""===a[s="webkitTransition"]&&undefinedo="webkitTransitionEnd",n=s),""===a[s="transition"]&&undefinedo="transitionend",n=s),""===a[s="webkitTransform"]&&undefinedt=s),""===a[s="msTransform"]&&undefinedt=s),""===a[s="transform"]&&undefinedt=s),document.body.insertBeforeundefinedr,null),a[t]="translate3dundefined0, 0, 0)",i=!!e.getComputedStyleundefinedr).getPropertyValueundefinedt),document.body.removeChildundefinedr)}undefined),{transform:t,transition:n,transitionEnd:o,hasTranslate3d:i}}Object.definePropertyundefinedt,"__esModule",{value:!0}),t["default"]=n}).callundefinedt,functionundefined){return this}undefined))},functionundefinede,t,n){"use strict";function oundefinede){return e&&e.__esModule?e:{"default":e}}function iundefinede,t,n){var o=new a["default"]undefinedt,{bubbles:!0,cancelable:!0,detail:n});e.dispatchEventundefinedo)}Object.definePropertyundefinedt,"__esModule",{value:!0}),t["default"]=i;var r=nundefined4),a=oundefinedr)},functionundefinede,t){undefinedfunctionundefinedt){function nundefined){try{var e=new oundefined"cat",{detail:{foo:"bar"}});return"cat"===e.type&&"bar"===e.detail.foo}catchundefinedt){}return!1}var o=t.CustomEvent;e.exports=nundefined)?o:"function"==typeof document.createEvent?functionundefinede,t){var n=document.createEventundefined"CustomEvent");return t?n.initCustomEventundefinede,t.bubbles,t.cancelable,t.detail):n.initCustomEventundefinede,!1,!1,void 0),n}:functionundefinede,t){var n=document.createEventObjectundefined);return n.type=e,t?undefinedn.bubbles=Booleanundefinedt.bubbles),n.cancelable=Booleanundefinedt.cancelable),n.detail=t.detail):undefinedn.bubbles=!1,n.cancelable=!1,n.detail=void 0),n}}).callundefinedt,functionundefined){return this}undefined))},functionundefinede,t){"use strict";Object.definePropertyundefinedt,"__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 startAnimatingundefinede){fpsInterval=500/e,then=Date.nowundefined),startTime=then,animateundefined)}function animateundefined){requestAnimationFrameundefinedanimate),now=Date.nowundefined),elapsed=now-then,elapsed>fpsInterval&&!stop&&undefinedthen=now-elapsed%fpsInterval,lorySlider.nextundefined))}function resetTimerundefined){now=Date.nowundefined),elapsed=now-then,then=now-elapsed%fpsInterval}var slidesToScroll=4,slider=document.querySelectorundefined".js_multislides"),stop=!1,frameCount=0,fps,fpsInterval,startTime,now,then,elapsed,lorySlider=loryundefinedslider,{infinite:0,rewind:!0,enableMouseEvents:!0});startAnimatingundefined.2),slider.addEventListenerundefined"mouseover",functionundefined){stop=!0}),slider.addEventListenerundefined"mouseout",functionundefined){resetTimerundefined),stop=!1});
    </script>
    </b:if>
    
    Bạn chú ý trong đoạn Javascript phía trên hoạt động tại trang chủ nếu muốn hiển thị tại trang khác thì xóa hoặc dùng thẻ điều kiện để việc tối ưu tốt hơn nhé.
    Bước 3: Bạn lưu mẫu lại sau đó vào phần Bố cụcThêm tiện ích HTML mới, thêm đoạn code phía dưới và lưu lại:
    <script>
    /*== SLIDER POST | JAVASCRIPT ==*/
    var posts_no = 8; /* Để đặt số lượng bài viết */
    var labelnya = "blogspot"; /* Điền vào tên của nhãn */
    var showpoststhumbs = true; /* Hiển thị hình thu nhỏ undefinedkhông nên thay đổi) */
    var thumbwidth=300; /* Chiều rộng hình thu nhỏ */
    var thumbheight=200; /* Chiều cao hình thu nhỏ */
    var readmorelink = false; /* Hiển thị readmorelink undefinedtrue/false) */
    var showcommentslink = true; /* Hiển thị số bình luận undefinedtrue/false) */
    var posts_date = false; /*  Hiển thị ngày đăng undefinedtrue/false) */
    var post_summary = false; /* Tóm tắt / đoạn trích undefinedtrue/false) */
    var summary_chars = 0; /* Số lượng ký tự từ đoạn trích */
    function showlatestpostswiththumbsundefinedt){document.writeundefined'<div class="top-entry slider js_multislides multislides"><div class="frame js_frame"><ul class="entrys slides js_slides recent-posts-container">');forundefinedvar e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;ifundefinede==t.feed.entry.length)break;forundefinedvar o=0;o<n.link.length;o++){ifundefined"replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;ifundefined"alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url.replaceundefined/\/s[0-9]+\-c/g,"/w"+thumbwidth+"-h"+thumbheight+"-c")}catchundefinedh){s=n.content.$t,a=s.indexOfundefined"<img"),b=s.indexOfundefined'src="',a),c=s.indexOfundefined'"',b+130),d=s.substrundefinedb+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.substringundefined0,4),g=p.substringundefined5,7),v=p.substringundefined8,10),w=new Array;ifundefinedw[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.writeundefined'<li class="recent-posts-list js_slide"><div class="postedon"><span>'+labelnya+'</span></div><a href="'+r+'">'),
    1==showpoststhumbs&&document.writeundefined'<img class="recent-post-thumb" src="'+u+'"/>'),
    document.writeundefined'<h3 class="recent-post-title"><span>'+i+"</span></h3></a>"),
    "content"in n)var A=n.content.$t;else ifundefined"summary"in n)var A=n.summary.$t;else var A="";
    var k=/<\S[^>]*>/g;ifundefinedA=A.replaceundefinedk,""),1==post_summary)ifundefinedA.length<summary_chars)document.writeundefinedA);else{A=A.substringundefined0,summary_chars);
    var y=A.lastIndexOfundefined" ");A=A.substringundefined0,y),
    document.writeundefinedA+"...")}var _="",$=0;
    document.writeundefined'<span class="dett">'),
    1==posts_date&&undefined_=_+w[parseIntundefinedg,10)]+" "+v+" "+f,$=1),
    1==readmorelink&&undefined1==$&&undefined_+=" </span>"),
    _=_+'<span class="redmore"><a href="'+r+'" class="urls" target ="_top">Selengkapnya</a></span>',$=1),
    1==showcommentslink&&undefined1==$&&undefined_+=" <br> "),"1 Comment"==l&&undefinedl="1 Comment"),"0 Commments"==l&&undefinedl="No Comments"),
    l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),
    document.writeundefined_),document.writeundefined""),document.writeundefined"</li>")}document.writeundefined"</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.writeundefined"<script src=\/feeds\/posts\/default/-/"+labelnya+"?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs><\/script>");
    document.writeundefined"<script type=\'text\/javascript\'>\/\/<![CDATA[\r\n$undefineddocument).readyundefinedfunctionundefined) {$undefined\'img.recent-post-thumb\').attrundefined\'src\', functionundefinedi, src) \r\n{return src.replaceundefined \'s200-c\', \'w300-h190-c\' );});});\r\n\/\/]]><\/script>");
    </script>
    
    Bạn lưu ý các đoạn code sau và chỉnh sửa cho phù hợp
    var posts_no = 8; /* Để đặt số lượng bài viết */
    var labelnya = "blogspot"; /* Điền vào tên của nhãn */
    var showpoststhumbs = true; /* Hiển thị hình thu nhỏ undefinedkhông nên thay đổi) */
    var thumbwidth=300; /* Chiều rộng hình thu nhỏ */
    var thumbheight=200; /* Chiều cao hình thu nhỏ */
    var readmorelink = false; /* Hiển thị readmorelink undefinedtrue/false) */
    var showcommentslink = true; /* Hiển thị số bình luận undefinedtrue/false) */
    var posts_date = false; /*  Hiển thị ngày đăng undefinedtrue/false) */
    var post_summary = false; /* Tóm tắt / đoạn trích undefinedtrue/false) */
    var summary_chars = 0; /* Số lượng ký tự từ đoạn trích */
    
    Cuối cùng lưu lại và nhấn xem blog để xem kết quả!!!
    Bạn nên làm theo hướng dẫn từng bước để có kết quả như mong muốn nhé, nếu không thực hiện được có thể bình luận phía dưới minh sẽ hỗ trợ.
    Source: codepelajar.com
    Trên đây là bài viết Thêm tiện ích bài viết theo nhãn dạng trượt ngang cho Blogspot (Slider recent post by label). Chúc bạn thực hiện thành công. Nếu thấy bài viết hữu ích đừng quên chia sẻ đến bạn bè nhé!
    Tóm tắt nội dung
      Lưu ý:
      Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
      Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
      Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
      Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]
      Viết bình luận (0)

      Trường Blogger

      Pass giải nén mặc định: truongblogger