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

5
4
3
2
1

24 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
  3. làm giống của bacsiwindows đi ad, thích mà ko biết làm

    Trả lờiXóa

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow" target="_blank">Link</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.

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019