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

Bài viết liên quan

Có thể bạn cần:

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/AVvXsEg4Kf0t6FowT4mQMePbsU_5epIWGf6UUcB55mypFlloeOi63pa-rMWb0clo_O5RiUWEljfbzAmASvqvpfmbXySxHvGv4XS5rRLBDlZhX370ILi99sVa70kdmtcnqLdh7-qD8vnoGx3jGFo/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/AVvXsEgpfXQyw-siO8c3PJBbTNgzOE9LVcrf0XQCe3tLgs6-5YN1ydDBBs1QeRTF4u-AX2yiVceygGyY0yxBXNg0lfry3VSc6tsQhqE6LXsOzq2PLmFsIdCwiyTJ_nu0NlKS1gmq1vPnYWHAqLNp/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