Duy Tác giả: Duy
Xuất bản ngày 19/12/2018 Views

Thêm tiện ích Carousel Popular Posts cho Blogspot

Cập nhật: 07 thg 1, 2019 Lúc 23:24
Carousel là một plugin của jQuery giúp chuyển đổi bất kỳ phần tử HTML nào thành dạng lặp quay vòng. Bạn có thể hiểu nôm na ví dụ như việc chuyển đổi ảnh (như slider) hay bất kì thứ gì bạn muốn.
Xin chào các bạn, quay lại chuyên mục thủ thuật Blogspot thì hôm nay mình sẽ hướng dẫn các bạn thêm widget carousel giống của bacsiwindows nhé (đọc dòng này hơi trẻ trâu).
Vốn dĩ cái này trên bacsiwindows chỉ là widget popular posts và tùy biến lại sang dạng carousel. Các bạn cứ tưởng nó cao siêu khi view source lên toàn thấy link bài viết.

Các bước thực hiện

Bước 1: Có lẽ bạn lên xoá tiện ích Popular Posts hiện có của bạn đi, không xoá cũng không sao hậu quả thì chưa chắc sao. Còn việc xoá như nào thì bạn thích như nào thì bạn xoá keme bạn mình không không huohư dẫn phần này.
Bước 2: Bạn thêm đoạn code dưới đây vào phía trên thẻ đóng </body>
<style>
body{overflow-x:hidden}
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:fadeOut}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-carousel.owl-drag .owl-item{opacity:.6}
.owl-carousel.owl-drag .owl-item.center{opacity:1!important}
.owl-carousel.owl-drag .owl-item .item-title a{opacity:0;transform:scale(.5)}
.owl-carousel.owl-drag .owl-item.center .item-title a{opacity:1;transform:none}
.owl-carousel.owl-drag .owl-item.center .item-thumbnail{height:220px;margin-top:-20px}
.owl-carousel.owl-drag .owl-item.center .item-thumbnail img{filter:unset}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav{margin-top:10px}
.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:0 -10px;padding:0;display:inline-block;cursor:pointer}
.owl-theme .owl-nav [class*=owl-]:hover{background:#f4f4f4;text-decoration:none}
.owl-theme .owl-nav .disabled{opacity:.35;cursor:default}
.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}
.owl-theme .owl-dots .owl-dot span{width:10px;height:2px;margin:5px 2px;background:#999;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#ff7700}
.owl-theme .owl-dots .owl-dot.active span{background:#ff7700;transition:all 0.5s}
.owl-theme .owl-nav [class*=owl-]{padding:10px;box-sizing:border-box;margin:-10px -20px}
.owl-theme .owl-nav{position:relative;bottom:58%}
.owl-prev{position:absolute;left:-50px}
.owl-next{position:absolute;right:-50px}
.owl-theme .doi-tac img{height:60px;object-fit:contain}
.owl-carousel .owl-stage-outer{overflow:unset}
footer{margin:90px 0 20px}
footer .footer{width:1150px;max-width:100%;margin:auto;padding:50px 0 0;}
footer .footer h2{display:none}
footer div.footer .popular-posts ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:0}
footer div.footer .popular-posts ul li{list-style:none;position:relative}
footer div.footer .popular-posts ul li:hover img{filter:none!important}
footer div.footer .popular-posts ul li .item-thumbnail{width:100%;height:180px}
footer div.footer .popular-posts ul li .item-thumbnail img{border-radius:10px;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(80%);transition:1s}
footer div.footer .popular-posts ul li .item-title a{position: absolute; bottom: 0; left: 0; background: #fff; padding: 10px; color: #555; font-weight: 700; margin: 0 10px 10px; box-sizing: border-box; line-height: 1.4; text-align: center; transition: 1s ease; border-radius: 6px;}
footer div.footer .popular-posts ul li .item-snippet{display:none}
</style>
<script>
$('.bsw-pss').owlCarousel({
    loop:true,
 autoplay:true,
 autoplayTimeout:3000,
 autoplayHoverPause:false,
    margin:10,
    center:true,
 navText: ["<i class='fa fa-arrow-left'></i>","<i class='fa fa-arrow-right'></i>"],
 responsiveClass:true,
    responsive:{
        0:{
            items:1,
   nav:false,
   dots:false,
        },
        600:{
      items:2
        },
        1000:{
            items:3,
     nav:true,
      dots:false

        }
    }
})
</script>
Bước 3: Thêm đoạn HTML dưới đây vào phía trên thẻ đóng </head> 
<script src='https://cdn.jsdelivr.net/gh/ngylduy/NgLDuy@master/owl.carousel.min.js' type='text/javascript'></script>
Bước 4: Thêm đoạn code dưới đây vào nơi muôn hiển thị. Thường thì chèn dưới menu top (tùy vào theme). 
<b:if cond='data:view.isHomepage and !data:blog.isMobile'>
 <footer>
<div class='footer'>
<div id='Bottom Footer'>
         <b:section class='footer-column section' id='Col2' showaddelement='yes'>
           <b:widget id='PopularPosts2' locked='true' title='Bài đang phổ biến' type='PopularPosts' version='1'>
             <b:widget-settings>
               <b:widget-setting name='numItemsToShow'>10</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'>ALL_TIME</b:widget-setting>
             </b:widget-settings>
             <b:includable id='main'>
               <div class='widget-content popular-posts'>
                  <ul>
<div class='owl-carousel owl-theme bsw-pss'>
                    <b:loop values='data:posts' var='post'>
                      <li>
                        <b:if cond='!data:showThumbnails'>
                          <b:if cond='!data:showSnippets'>
                            <!-- (1) No snippet/thumbnail -->
                            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
                            <b:else/>
                            <!-- (2) Show only snippets -->
                            <div class='item-title'><a class='ripple' expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
                            <div class='item-snippet'><data:post.snippet/></div>
                          </b:if>
                          <b:else/>
                          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
                          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-content&quot;'>
                            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                              <div class='item-thumbnail'>
                                <a expr:href='data:post.href' expr:title='data:post.title'>
                                  <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 145, &quot;145:90&quot;) : data:post.thumbnail' var='image'>
                                    <img border='0' expr:alt='data:post.title' expr:src='data:image'/>
                                  </b:with>
                                </a>
                              </div>
                            </b:if>
                            <div class='item-title'><a class='ripple' expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
                            <b:if cond='data:showSnippets'>
                              <div class='item-snippet'><data:post.snippet/></div>
                            </b:if>
                          </div>
                          <div style='clear: both;'/>
                        </b:if>
                      </li>
                    </b:loop>
</div>
                  </ul>
                </div>
</b:includable>
           </b:widget>
         </b:section>
 </div>
 </div>
 </footer></b:if>
Bước 5: Lưu mẫu.

Lời kết

Biết viết gì cho phần này nhỉ.
Cháu lên ba, cháu đi mẫu giáo cô thương cháu vì cháu không khóc nhè không khóc nhè thì mẹ trồng cây trái ông vào nhà máy, ông bà vui cấy cầy là lá la la là là lá la la.
Source: Bác Sĩ Windows
Bài đăng mới hơn Bài đăng cũ hơn
Tags: # Blogspot # Thủ Thuật Blogspot
Đăng nhận xét:  Blogger Facebook Tạo liên kết

6 bình luận
Sắp xếp theo

© 2018 - 2019 Duy Blogs ~ made with and . In Hanoi city.