Xin chào các bạn, hôm nay mình sẽ chia sẻ với các bạn một widget thanh trượt hình ảnh hoặc thanh trượt banner tự động sử dụng javascript thuần túy.Thông thường thanh trượt hình ảnh này được sử dụng trên các trang web cửa hàng trực tuyến để quảng bá sản phẩm mới để người dùng có thể trực tiếp nhìn thấy chúng.
Nhưng cũng có những blog cá nhân sử dụng thanh trượt hình ảnh như thế này, thường được sử dụng để quảng bá bài viết.Tiện ích này có thanh trượt tự động và cũng có các nút tiếp theo và nút trước và có chú thích văn bản dưới hình ảnh.
 |
| Tiện ích Thanh trượt Hình ảnh cho Blogger |
Hướng dẫn thêm Tiện ích Thanh trượt Hình ảnh cho Blogger
Bước 1: Đầu tiên các bạn truy cập blogger > chủ đề > chỉnh sửa html , sao chép css bên dưới và dán nó lên trên mã ]]> </ b: skin> hoặc phía trong thẻ <style>…</style>
.mySlides{display:none}
.mySlides img {vertical-align:middle;width:100%}
.wrap-dot{text-align:center;margin-top:10px}
.slideshow-container{max-width:1000px;position:relative;margin:auto}
.slideshow-container .prev,.slideshow-container .next{cursor:pointer;position:absolute;top:50%;padding:7px 15px;margin:-22px 5px 0 5px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:50%;user-select:none}
.slideshow-container .next{right:0}
.slideshow-container .prev:hover,.slideshow-container .next:hover{background-color:rgba(0,0,0,0.8)}
.slideshow-container .text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}
.wrap-dot .dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease}
.wrap-dot .dot.active{background-color:#f89000;width:30px;border-radius:20px}
.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}
@media only screen and (max-width:300px){.slideshow-container .prev,.slideshow-container .next,.slideshow-container .text{font-size:11px}}
Bước 2: Các bạn copy đoạn html bên dưới và đặt ở nơi bạn muốn hiển thị widget thanh trượt hình ảnh, nếu muốn hiển thị phía trên trang chủ, bạn có thể đặt nó bên dưới </header> và bọc nó bằng <b: if cond = ‘data: view.isHomepage ‘> </ b: if>
Đổi link ảnh và Text của bạn
<div class = 'slideshow-container'>
<div class = 'mySlides fade'>
<a href=' #'> <
img src = ' https://www.w3schools.com/howto/img_snow_wide.jpg ' />
<div class = 'text'> VOZSHARE.COM </div>
</a>
</div>
<div class = 'mySlides fade'>
<a href=' #'> <
img src = ' https: // www. w3schools.com/howto/img_mountains_wide.jpg '/>
<div class =' text '> VOZSHARE.COM </div>
</a>
</div>
<div class =' mySlides phai '>
<a href=' #'> <
img src = 'https://www.w3schools.com/howto/img_nature_wide.jpg '/>
<div class =' text '> VOZSHARE.COM </div>
</a>
</div>
<a class =' prev 'onclick =' presSlide () '> & # 10094; </a>
<a class='next' onclick='showSlides()'> & # 10095; </a>
</div>
<div class =' wrap-dot '>
<span class = 'dot'> </span>
<span class = 'dot'> </span>
<span class = 'dot'> </span>
</div>
Bước 3: Tiếp đến các bạn sao chép đoạn mã javascript bên dưới và đặt nó bên trên đoạn mã </body> hoặc <! – </body> -> </body> nếu bạn không quên bấm vào lưu.
Lời Kết
Ok, vậy là mình vừa chia sẻ với các bạn cách thêm Tiện ích Thanh trượt Hình ảnh cho Blogger , hy vọng rằng nó sẽ hữu ích với các bạn và cảm ơn các bạn đã ghé thăm bog Vozshare.