Hướng dẫn tạo Slideshow hình ảnh đơn giản bằng Bootstrap cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Đối với việc tạo Slideshow trình chiếu hình ảnh thì có rất nhiều cách để có thể gắn nó vào website hay Blog, có thể dùng CSS3, Javascript, JQuery... và với thư viện Bootstrap thì bạn có thể tạo slideshow 1 cách nhanh chóng cùng với những tiện ích khác. Và bài viết này CNTT xin chia sẻ bạn đoạn code để có thể chèn Slideshow bằng Bootstrap vào Blogspot của mình một cách nhanh chóng và dễ dàng. Việc ứng dụng Bootstrap sẽ giúp bạn rất nhiều trong việc thiết kế template và load trang rất nhanh.

Hướng dẫn tạo Slideshow hình ảnh đơn giản bằng Bootstrap cho Blogspot

1. Đầu tiên đăng nhập vào Blogspot
2. Vào phần chỉnh sửa HTML và dán đoạn code sau vào sau thẻ <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Nếu trong template bạn đã có file jquery.min.js thì không cần phải thêm hoặc bạn thay thế bằng file phiên bản mới này để tránh xung đột code.

3. Lưu template lại
4. Vào Bố cục, thêm tiện ích HTML/Javascript và dán vào đoạn code sau
<style>
.carousel-indicators {
bottom:15px;
left:10px;
width:auto;
margin-left:0;
}
.carousel-indicators li {
border-radius:0;
width:8px;
height:8px;
background:#fff;
}
.carousel-indicators .active {
width:10px;
height:10px;
background:#3276b1;
border-color:#3276b1;
}</style>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<figure class="item"> <img class="thumbnail" src="https://1.bp.blogspot.com/-KUUsyNlefY4/W4AG8_dvpYI/AAAAAAAAibk/LnYnRVDzA8sEzJBwKHRdyaGT9X5_mhh-wCLcBGAs/s1600/1.jpg" alt="Slide1">
</figure>
<figure class="item active"> <img class="thumbnail" src="https://3.bp.blogspot.com/-y0i_JwHNFk0/W4AG8_sMhWI/AAAAAAAAibg/UVnADKlLE1IHXMKjb9saanHtYGBn5oSxQCLcBGAs/s1600/2.jpg" alt="Slide2">
</figure>
<figure class="item"> <img class="thumbnail" src="https://4.bp.blogspot.com/-fak7_eLL2EY/W4AG858iASI/AAAAAAAAibo/WlzXyoUvRHoFUFSeKn0uqBqzl4PHo6bjQCLcBGAs/s1600/3.jpg" alt="Slide3">
</figure>
<figure class="item"> <img class="thumbnail" src="https://1.bp.blogspot.com/-EfMD18ZDm10/W4AG9S_OW1I/AAAAAAAAibs/UMbIDJH4on0YdWqRPqNvvOR3Sq84ReYeACLcBGAs/s1600/4.jpg" alt="Slide4">
</figure>
<figure class="item"> <img class="thumbnail" src="https://1.bp.blogspot.com/-pehZXwHXJmc/W4AG9V1FpBI/AAAAAAAAibw/CZbvEeLXj1kQUEuUbJmXDb3hMJV80hGOgCLcBGAs/s1600/5.jpg" alt="Slide5">
</figure>
</div>
</div>
</div>
</div>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>

Thay thế link ảnh ở trên thành link ảnh của bạn, và bạn có thể tạo slide nhiều hơn 5 hình bằng cách copy ra thêm đoạn code sau và thay thế link ảnh lại.
<li data-target="#myCarousel" data-slide-to="5"></li>
Thay
<figure class="item"> <img class="thumbnail" src="https://1.bp.blogspot.com/-pehZXwHXJmc/W4AG9V1FpBI/AAAAAAAAibw/CZbvEeLXj1kQUEuUbJmXDb3hMJV80hGOgCLcBGAs/s1600/5.jpg" alt="Slide6">
</figure>

5. Sau đó save tiện ích lại là xong.

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

Tham khảo hocwebgiare

Loading...

Không có nhận xét nào