Hướng dẫn thêm Carousel hiển thị bài viết vào Blogspot

- Hello xin chào các bạn, ở bài viết này mình sẽ hướng dẫn các bạn thêm Carousel hiển thị bài viết vào Blogspot, các blog khác cũng hướng dẫn nhưng gặp tình trạng bị mờ ảnh,vv...ở đây mình đã xin một bản gốc từ BacSiWindows nên sẽ khắc phục lỗi mờ ảnh và vì là code gốc nên sẽ không có bất kỳ lỗi nào.

Hướng dẫn thêm Carousel

- Đầu tiên bạn thêm đoạn CDN Javascript này vào trước thẻ đóng </head> :

<script src='//rawgit.com/bacsiwindows/blog/owl-project-bsw/owl.carousel.min.js' type='text/javascript'></script>

 - Sau khi thêm CDN thì tiếp đến bạn thêm đoạn CSS sau vào trước thẻ đóng ]]></b:skin> :

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

- Tiếp đến bạn thêm đoạn Javascript này vào trước thẻ đóng </body> :

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

- Cuối cùng bạn cho đoạn code này vào nơi cần hiển thị Carousel (thường là footer hoặc dưới menu ):

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<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'>
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<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/>
<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, 400, &quot;400:225&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:if>
  </b:if>   

- Lưu lại là xong
- Vậy là JSBlogger đã hướng dẫn các bạn thêm Carousel bản gốc tuyệt đẹp vào Blogspot rồi, chúc các bạn có một ngày cuối năm vui vẻ !!!