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

Click ngay

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://1.bp.blogspot.com/-prk3OdFJN_k/W8Z8n11uz5I/AAAAAAAAOPw/FLfbV57izz8L_17YeY6LtzmeB-Ea3_vLACLcBGAs/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(//4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/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

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Thanh Bình Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Nên Xem
  • Ẩn sidebar
  • 23 nhận xét:

    1. Đẹp, anh chỉ làm cái nút đổi màu menu như blog a đi

      Trả lờiXóa
    2. Comment thôi chứ chẳng biết nói gì :v

      Trả lờiXóa

    » Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
    » Không spam link, chia sẻ các link không liên quan đến bài viết.
    » Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
    » Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.