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. Và lần này sẽ tiếp tục thêm một mẫu
0124
0123
0126
0125
0124
/* 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.
0124
0123
0125
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