Trong bài viết lần trước, mình đã giới thiệu đến với các bạn mẫu Slider ảnh cực đẹp và hiện đại cho Blogger/Blogspot. Lần này mình mang đến một mẫu mini slider từ Dunia Blanter, code gọn nhẹ, hỗ trợ cả hình ảnh và video YouTube, giúp bài viết thêm sinh động và chuyên nghiệp.
Điểm đặc biệt của mẫu này là sự tối ưu về tốc độ, giao diện gọn gàng, dễ tùy chỉnh, phù hợp với mọi nội dung bài viết. Dù bạn muốn trình bày bộ sưu tập ảnh hay chia sẻ video, mẫu slider này đều đáp ứng tốt, giúp trang blog của bạn thêm sinh động và thu hút người xem.
Code mini slider này mang đến nhiều ưu điểm nổi bật, giúp bạn tối ưu hóa trải nghiệm người dùng trên blog của mình:
• Nhẹ và tối ưu: Với cấu trúc đơn giản và gọn gàng, code không làm chậm tốc độ tải trang, đảm bảo hiệu suất cao ngay cả trên các thiết bị có cấu hình thấp.
• Hỗ trợ đa dạng nội dung: Không chỉ hiển thị hình ảnh, slider còn tích hợp video YouTube, mang lại sự linh hoạt khi bạn muốn kết hợp nội dung đa phương tiện trong bài viết.
• Thân thiện với người dùng: Thiết kế responsive giúp slider hiển thị đẹp mắt trên mọi kích thước màn hình, từ máy tính đến điện thoại di động.
• Dễ dàng tùy chỉnh: Code được viết rõ ràng, dễ chỉnh sửa, giúp bạn có thể thay đổi kích thước, màu sắc, hoặc thêm hiệu ứng theo phong cách cá nhân.
• Điều hướng mượt mà: Với tính năng cuộn ngang (scroll) và các nút điều hướng, người xem có thể dễ dàng khám phá nội dung mà không gặp khó khăn.
• Tương thích tốt: Code sử dụng các tiêu chuẩn HTML, CSS và JavaScript phổ biến, hoạt động ổn định trên các trình duyệt phổ biến như Chrome, Firefox, và Safari.
Bạn có thể xem demo trực tiếp dưới này 👇
Bước 1: Chủ đề > Tùy chỉnh > Chỉnh sửa HTML > Thêm đoạn CSS dưới đây vào trong blog bạn. Hoặc cũng có thể dán trước thẻ đóng ]]></b:skin>
/* Hướng dẫn thêm Mini Slider vào bài viết Blogger/Blogspot */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.blanter-wrap{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.slide-wrap iframe{width:100%;height:87%;background:#000}
.slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.slide-wrap ul li a.youtube-iframe{width:550px}
.slide-wrap ul li a:last-child{margin-right:0}
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:35%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.blanter-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.blanter-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.blanter-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.blanter-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}
.slide-wrap img {margin-top: 0 !important;margin-left: 0 !important;}Bước 2: Thêm đoạn JavaScript dưới đây vào trước thẻ đóng </body> và lưu lại.
<script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
$('.blanter-wrap').animate({
scrollLeft: "+=500px"
}, "normal");
});
$('a.left-b').click(function() {
$('.blanter-wrap').animate({
scrollLeft: "-=500px"
}, "normal");
});
//]]>
</script>Bước 3: Vào trong bài viết, chọn nơi mà bạn muốn hiển thị Slider ảnh > Chuyển sang tab HTML > Copy và dán đoạn mã HTML dưới đây vào Bài viết hoặc Trang của bạn rồi lưu lại.
<div class="slide-wrap">
<div class="blanter-wrap">
<ul>
<li><a href="javascript:void(0)">
<img alt="Chitose2D 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtDqGyTqDRxbYJmQsP03TJlpQ5S58xninCoAG2nPEkh9hzxkl3SsE-gDRKcZlQ0mTmmo8p6zXtnwwaXlulMbhAUFNZvDyt0smnI9oZdZThnyf1sOsCveCTHNLn9U1-Fx0IYKmLhOopzdIwaISdsLpGKKPlJDpUOhty76HIAWP8BabHON_I_qR2DncN/s600/06.jpg" title="Chitose2D 1" />
</a>
<a class="youtube-iframe" href="javascript:void(0)">
<iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://www.youtube.com/embed/yE5EWPge7tk"></iframe>
</a>
<a href="javascript:void(0)">
<img alt="Chitose2D 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizMfK0raDq4l3QQqvkggqqDv8AImSR4yJVsLG3g-YQ_SFbfvQqQGMZ_cJSpsv0XT01hUGNi53U8Sveq70bjwvlDhYZzKafMhFZajoabKBJleXDjRBhl-CLf70mSgwWHjNjHLwByrzLSqAYt6lQVOIDr_BE3WCgr1_ultSVNdklKriY6L5S7whKn0aK/s600/004%20-%20Anime%20Girl%20Full%20HD%20-%20KenhAnime24h.png" title="Chitose2D 2" />
</a>
<a href="javascript:void(0)">
<img alt="Chitose2D 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZAAfOnqvpaJd6miH1Kf1GcBTsLiM-l8sTRyNtoeQA95F2JCGQ2CNvA9zEzYYyKmo5Z262HpXvVT0ApI4Rb5uVuC_r-nzzrlsuAlk5zXhpKMgrvV3Sfua5C3tvL8IpwbGXhRrTVM1TkwOMRWrbHabk3QYrGyVM2BVbfsgB_lZx9N2jbL1PyvkKDAq/s600/03.jpg" title="Chitose2D 3" />
</a>
<a href="javascript:void(0)">
<img alt="Chitose2D 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbYHrCKunLF-MztW-7N10cMUop7bJaAm8awdc9J0kvAOIIHm_3PRFke9PuMnQWjiD7vyS5p6phl15kspXJ1Tq2Cf2dlSGb9Mzwi6wB-yLOycO4ZaREUkySiKKn-pDqJbsnEKwobx1nOCwvqwUAT-8hcyTaXc4kVb2x3gl8hNHfrnsRxuaWPPPC_OC/s600/46%20-%20The%20Garden%20of%20Words%20Full%20HD%20-%20KenhAnime24h.jpg" title="Chitose2D 4" />
</a>
<a href="javascript:void(0)">
<img alt="Chitose2D 5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyVgD7rulnN0GSnrFjt4pLqH1ywn1eLLuhHKOcKARkMVTvhcretAVDG5sZpGdFOJBsAAoTY2SArAlbUBzxNPJNxBuchxRmU8e9nnalniiBVLUgjuEdgbKWa4NIm-BwqxG7shIIeNzvf1_5XMRM-2DwcpiJqykIoQDJI68bHu7RT-yMvTjo98E0L1Xp/s600/16%20-%20Non%20Non%20Biyori%20Full%20HD%20-%20KenhAnime24h.jpg" title="Chitose2D 5" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="javascript:void(0);">
<svg aria-hidden="true" class="svg-inline--fa fa-angle-left fa-w-8" data-icon="angle-left" data-prefix="fas" role="img" viewbox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" fill="currentColor"></path></svg></a>
<a class="right-b" href="javascript:void(0);">
<svg aria-hidden="true" class="svg-inline--fa fa-angle-right fa-w-8" data-icon="angle-right" data-prefix="fas" role="img" viewbox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" fill="currentColor"></path></svg></a>
</div>• Đoạn màu xanh trong code trên thay thành link ảnh của bạn.
• Đoạn màu đỏ trong code trên thay thành link YouTube mà bạn muốn hiển thị, lưu ý link nó phải là lấy từ mà nhúng hoặc chia sẻ dạng như này: https://www.youtube.com/embed/yE5EWPge7tk.
-----
Mini slider là một giải pháp tuyệt vời để nâng tầm giao diện và trải nghiệm người dùng trên blog của bạn. Với thiết kế gọn nhẹ, tính năng linh hoạt, và khả năng hiển thị đa phương tiện, mẫu slider này không chỉ giúp bài viết trở nên chuyên nghiệp hơn mà còn giữ chân độc giả hiệu quả.
Hy vọng rằng hướng dẫn và đoạn code trong bài viết này sẽ giúp bạn dễ dàng tích hợp slider vào blog của mình. Nếu bạn có bất kỳ câu hỏi hoặc ý kiến nào, đừng ngần ngại để lại bình luận bên dưới. Chúc bạn thành công trong việc tùy chỉnh và làm mới blog của mình!
Hashtag: Hướng dẫn thêm Mini Slider vào bài viết Blogger/Blogspot
Không có nhận xét nào
Đăng nhận xét