Liên hệ quảng cáo
Liên hệ quảng cáo
profile card

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

Cập nhật: 17 thg 5, 2019 Lúc 09:12 Bởi Duy...
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).
Thêm tiện ích Carousel Popular Posts cho Blogspot
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
https://duy0286.blogspot.com/2018/12/them-tien-ich-carousel-popular-posts.html

Vì ngày ǝm đến là ngày rơi mùa hè. Bầu trời lấp lánh những cánh hoa như sao tỏa bay.
Dường như là vẫn thế ǝm không trở lại, mãi mãi là như thế ɐnh không trẻ lại. Dòng thời gian trôi như ánh sao băng...

Tớ yêu bầu trời. Bởi nhiều khi ngắm mãi không biết chán, nhưng đến lúc chán thì chỉ cần không ngẩng mặt lên là xong.
Now ,

Subscribe to our Newsletter