Sử dụng bxSlider cho Blogger

Trong số các plugin về slider, mình thấy bxSlider là đơn giản nhất. Mặc dù mình rất thích Bootstrap nhưng do template không thể sử dụng Bootstrap nên đành kiếm thư viện jQuery

Hướng dẫn cài đặt

Link hướng dẫn cài đặt: https://bxslider.com/install/

Mở Blogger -> Theme -> Customize -> Edit as HTML

Bạn kéo xuống cuối trang, thêm đoạn code này trước thẻ body

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" />
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
  $('.bxslider').bxSlider({
	mode: 'fade',
	captions: true,
	slideWidth: 600
  });
});
</script>

Thêm slideshow vào bài viết

Để thêm slideshow vào trong bài viết, bạn thêm 1 bài viết mới, mở HTML view Thêm đoạn code ví dụ như sau:

<div class="bxslider">
  <div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>

Kết quả:

Chúc các bạn thành công!

Nhatkyhoctap's blog