Hướng dẫn cách tạo slide sản phẩm đẹp mắt cho Blogspot

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

Đây là một thủ thuật rất hay của hocwebgiare, và mình xin chia sẻ lại cho các bạn cách để tạo slide sản phẩm trong Blogspot. Với thư viện Bootstrap thì mọi thứ sẽ có tốc độ load rất ok nên khi trong template bạn đã có thư viện Bootstrap thì chỉ cần thêm đoạn HTML để gọi lệnh ra là được không phải sử dụng thêm nhiều Script khác. Ở đây là cách bạn thêm sản phẩm một cách thủ công cho Blogspot và bạn nào muốn tiện ích này lấy tự động từ bài viết có thể comment ngay bên dưới để mình hỗ trợ nhé.

Hướng dẫn cách tạo slide sản phẩm đẹp mắt 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> #myCarousel .thumbnail {
margin-bottom: 0;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control {
color:#fff;
top:40%;
color:#428BCA;
bottom:auto;
padding-top:4px;
width:30px;
height:30px;
text-shadow:none;
opacity:1;
}
.carousel-control:hover {
color: #d9534f;
}
.carousel-control.left, .carousel-control.right {
background-image:none !important;
}
.carousel-control.right {
left:auto;
right:-32px;
}
.carousel-control.left {
right:auto;
left:-32px;
}
.carousel-indicators {
bottom:-30px;
}
.carousel-indicators li {
border-radius:0;
width:10px;
height:10px;
background:#ccc;
border:1px solid #ccc;
}
.carousel-indicators .active {
width:12px;
height:12px;
background:#3276b1;
border-color:#3276b1;
}</style>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/1.jpg" alt="Sản phẩm 1">
<div class="caption">
<h3>Sản phẩm 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/2.jpg" alt="Sản phẩm 2">
<div class="caption">
<h3>Sản phẩm 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/3.jpg" alt="Sản phẩm 3">
<div class="caption">
<h3>Sản phẩm 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/4.jpg" alt="Sản phẩm 4">
<div class="caption">
<h3>Sản phẩm 4</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item active">
<div class="row">
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/5.jpg" alt="Sản phẩm 5">
<div class="caption">
<h3>Sản phẩm 5</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/6.jpg" alt="Sản phẩm 6">
<div class="caption">
<h3>Sản phẩm 6</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/7.jpg" alt="Sản phẩm 7">
<div class="caption">
<h3>Sản phẩm 7</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/8.jpg" alt="Sản phẩm 8">
<div class="caption">
<h3>Sản phẩm 8</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/9.jpg" alt="Sản phẩm 9">
<div class="caption">
<h3>Sản phẩm 9</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/10.jpg" alt="Sản phẩm 10">
<div class="caption">
<h3>Sản phẩm 10</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/11.jpg" alt="Sản phẩm 11">
<div class="caption">
<h3>Sản phẩm 11</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"> <img src="http://hocwebgiare.com/thiet_ke_web_chuan_demo/product/images/12.jpg" alt="Sản phẩm 12">
<div class="caption">
<h3>Sản phẩm 12</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">200.000 đ</a> <a href="#" class="btn btn-default" role="button">Đặt hàng</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div> <a class="left carousel-control" href="http://hocwebgiare.com/#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a> <a class="right carousel-control" href="http://hocwebgiare.com/cpadmin/#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>
<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>
</ol>
</div>
<script>
$('#myCarousel').carousel({
interval: 4000
});
</script>
Bạn thay link hình ảnh và link trỏ tới trong HTML ở trên lại thành của mình là xong. Bạn cần tạo slide bài viết một cách tự động có thể Yêu cầu thủ thuật để được hỗ trợ nhé. Hoặc bạn có thắc mắc về thủ thuật này cần hướng dẫn thêm có thể comment ngay bên dưới bài viết này.

Chúc bạn thành công!
Tham khảo hocwebgiare

Loading...

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