Thủ thuật Biến Popular Post thành Carousel Image Slider cho blogspot

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn biến popular post thành carousel image slider cho blogspot

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Vào trang Chỉnh sửa HTML và thêm đoạn code bên dưới vào chỗ bạn muốn nó hiển thị

<b:section class='carousel' id='carousel' preferred='yes'>
  <b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts' version='1'>
    <b:widget-settings>
      <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
      <b:widget-setting name='showThumbnails'>true</b:widget-setting>
      <b:widget-setting name='showSnippets'>true</b:widget-setting>
      <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
                <b:if cond='data:title != &quot;&quot;'><h2><div><data:title/></div></h2></b:if>
  <div class='widget-content popular-posts'>
<div class='slider slider-nav autoplay'>
<b:loop values='data:posts' var='post'>
        <b:if cond='!data:showThumbnails'>
          <div><b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <h3><a expr:href='data:post.href'><data:post.title/></a></h3>
            <p><data:post.snippet/></p>
            </b:if></div>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
            <div class='popular_content'><b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 640, &quot;2:1&quot;) : data:post.thumbnail' var='image'>
                    <img expr:alt='data:post.title' expr:data-lazy='data:image' height='320' width='640'/>
                  </b:with><h3><data:post.title/></h3>
                  </a>
              </b:if></div>
        </b:if>
      </b:loop>
    </div>
  </div>
</b:includable>
  </b:widget>
</b:section>

Bước 2: Tiếp đến tìm thẻ </body> và thêm đoạn js dưới đây lên trên nó

<script type='text/javascript'>
//<![CDATA[
// Popular Post Slider
function downloadJSAtOnload() {
    var _0x5f2ex8 = document.createElement("script");
    _0x5f2ex8.src = "https://rawcdn.githack.com/Arlina-Design/redvision/master/slick.js", document.body.appendChild(_0x5f2ex8)
}
window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload
document.getElementById('popular-post').addEventListener('load', function () {
    localStorage.setItem('carousel-image-slider', popularpost);
});
//]]>
</script>

Bước 3: Bước cuối, hãy thêm đoạn css bên dưới lên trên thẻ ]]></b:skin>

/* Popular Post Slider */
.slick-list,.slick-slider,.slick-track{position:relative;display:block;height:100%}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{content:'';display:table}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{object-fit:cover;display:block;width:100%;height:100%;padding:0}.slick-slide img:hover{transform:translate(0,-2px) scale(1.1)}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block;overflow:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:slick;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-loading .slick-list{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupZ_e-FXoC30kWGY4dY4FHLzdXocjMMWknmmTwLDbFAzabDkyT9KcX6JO0dG6sMhcZ8kuWPWVrShz7lQI3f2lHvLomtwdA3a5bhDLfn8Gr-hw_RX3W680sSYRJ1IdwOleu_EmbIBpmQY/s1600/download.gif) center center no-repeat #fff}.slick-next,.slick-prev{font-size:0;line-height:0;top:50%;;height:34px;width:34px;border-radius:2px;background:transparent;transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-size:2rem;line-height:1;color:#fff}.slick-prev{left:15px;z-index:1}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'\f104';font-family:FontAwesome}.slick-next:before,[dir=rtl] .slick-prev:before{content:'\f105';font-family:FontAwesome}.slick-next{right:13px}[dir=rtl] .slick-next{right:auto;left:-25px}[dir=rtl] .slick-next:before{content:'\f105';font-family:FontAwesome}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{bottom:-25px;width:100%;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000}.slick-dots li.slick-active button:before{opacity:.75;color:#000}.carousel{margin:0!important}#PopularPosts2.PopularPosts{background:#fff;padding:0;margin:0 0 10px 0}#PopularPosts2.PopularPosts .widget-content{height:320px;overflow:hidden}#PopularPosts2.PopularPosts a{width:100%}#PopularPosts2.PopularPosts h2{position:relative;color:#000;font-weight:700;font-size:16px;overflow:hidden;margin:0 0 10px 0;text-transform:uppercase}#PopularPosts2.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left}#PopularPosts2.PopularPosts h2:after{content:'';display:inline-block;float:left;position:absolute;top:0;height:15px;margin:2px 0 0 0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoTBajYBco72vMuZCm-lCOKJDbw9mHmz4eA3KpuCR1-f4J4uNzSSHfOkdt01TtVwfrlV4X1U65CfFSv_WIBcfi05I2sgzqyptkYUVtYxRlO2d1d2j26sWga0MkAw0-JtsA6Fty42xG0Uc4/s1600/repeat-bg.png);opacity:.9}#PopularPosts2.PopularPosts a h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);color:#fff;padding:30px 15px 15px 15px;position:absolute;bottom:0;left:0;right:0;margin:0;font-size:1.4rem}.popular_content{position:relative;margin:0 .5px}

Chúc bạn thành công !

Code trên được tách từ template Mocca của Idntheme

Share this post