Thêm Tiện Ích Carousel Popular Posts Cho Blogspot

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Bảy, 22 tháng 12, 2018 -

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é.

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.

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='//rawgit.com/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

Code do bên Duy Blog tách bên bacsiwindow nhé.

Tag:
0 Like
0 Comment More Emoticon
0 Nhận xét
Sắp xếp theo



Không có nhận xét nào. bạn hãy là người đầu tiên.


Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin