Trong lúc làm một cái template blogspot thấy cái code này khá hay và thường dùng trong các blog giới thiệu công ty hoặc blog về bán hàng, blog giới thiệu sản phẩm nên hôm nay share123.vn chia sẻ cho các bạn cần thì lấy về dùng, cái này vừa cho web, blog đều được.
Live Demo xem tại: http://vietsing-share123vn.blogspot.com/
Cách làm:
Đăng nhập blogger => Bố cục => Thêm tiện ích HTML/Javacript => Paste đoạn code sau vào:
Download file Js
Chúc các bạn thành công.
Tags:
 |
| Hình ảnh demo minh họa |
Cách làm:
Đăng nhập blogger => Bố cục => Thêm tiện ích HTML/Javacript => Paste đoạn code sau vào:
<style type="text/css">
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus{outline:none}
.slides,.flex-control-nav,.flex-direction-nav{margin:0;padding:0;list-style:none}
.flexslider{margin:0;padding:0}
.flexslider .slides > li{display:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}
.flexslider .slides img{width:100%;display:block}
.flex-pauseplay span{text-transform:capitalize}
.flexslider a.intro{bottom:0;color:rgba(0,0,0,0.1);font-size:14px;position:absolute;right:0;text-decoration:none;z-index:99999}
.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
html[xmlns] .slides{display:block}
* html .slides{height:1%}
.no-js .slides > li:first-child{display:block}
.flexslider{margin:0 0 60px;background:#fff;border:4px solid #fff;position:relative;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);box-shadow:0 1px 4px rgba(0,0,0,.2);zoom:1}
.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}
.loading .flex-viewport{max-height:300px}
.flexslider .slides{zoom:1}
.carousel li{margin-right:5px}
.flexslider li{border:0 none!important;padding:0!important;text-indent:0!important}
.flex-direction-nav a{width:30px;height:30px;margin:-20px 0 0;display:block;background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;position:absolute;top:50%;cursor:pointer;text-indent:-9999px;opacity:0;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.flex-direction-nav .flex-next{background-position:100% 0;right:-36px}
.flex-direction-nav .flex-prev{left:-36px}
.flexslider:hover .flex-next{opacity:0.8;right:5px}
.flexslider:hover .flex-prev{opacity:0.8;left:5px}
.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:1}
.flex-direction-nav .disabled{opacity:.3!important;filter:alpha(opacity=30);cursor:default}
.flex-control-nav{width:100%;position:absolute;bottom:-40px;text-align:center}
.flex-control-nav li{margin:0 6px;display:inline-block;zoom:1;*display:inline}
.flex-control-paging li a{width:11px;height:11px;display:block;background:#666;background:rgba(0,0,0,0.5);cursor:pointer;text-indent:-9999px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);box-shadow:inset 0 0 3px rgba(0,0,0,0.3)}
.flex-control-paging li a:hover{background:#333;background:rgba(0,0,0,0.7)}
.flex-control-paging li a.flex-active{background:#000;background:rgba(0,0,0,0.9);cursor:default}
.flex-control-thumbs{margin:5px 0 0;position:static;overflow:hidden}
.flex-control-thumbs li{width:25%;float:left;margin:0}
.flex-control-thumbs img{width:100%;display:block;opacity:.7;cursor:pointer}
.flex-control-thumbs img:hover{opacity:1}
.flex-control-thumbs .active{opacity:1;cursor:default}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 0,
minItems: 1,
maxItems: 4
});
});
});
</script>
<div class="flexslider">
<ul class="slides">
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" /> </li>
<li> <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" /> </li>
</ul>
</div>
Lưu ý: các bạn nên download file js màu đỏ về và up lên host của mình để tránh bị hỏng tiện ích do host die, thay đường link màu xanh thành link của bạn, tương tự với các link khác, thay ảnh và thông số theo blog của bạnDownload file Js
Chúc các bạn thành công.
.jpg)
Không có nhận xét nào: