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/05/2019 Bởi Duy... - A- A+

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

@ngylduy, @688.in, @ngylduy, @ngylduy

Ngày ấy ɐnh ngỏ lời thương và yêu đậm sâu với ǝm, ǝm có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.
Nếu ngày ấy ɐnh là chàng trai mà ǝm ngày đêm ước ao, ..., thì giờ đây ɐnh đã có câu chuyện thật đẹp...

Mỉm cười giống như một miếng băng dán cá nhân, tuy có thể che được vết thương nhưng đau đớn thì vẫn ở nguyên đó.
Niệm StyleLớp Thủ Thuật123 ShareNhái BlogBlog VNITNgọc Ánh BlogMinh ĐứcHuyDC BlogBảo Trọng BlogLong An IT
Chong chóng

Subscribe to our Newsletter