Fully Automated Slider for Sidebar of Blogger

Các loại auto slider thì có rất nhiều và đa phần chúng đều nằm ở phía dưới header và chiếm khá nhiều diện tích. Hôm nay, mình xin giới thiệu một mẫu auto slider khác dành cho Slidebar. Ngoài việc các bài viết sẽ tự động chạy thì wiget này còn có thêm hai nút điều khiển giúp người đọc dễ dàng chọn bài.
Các bạn có thể XEM DEMO để rõ hơn.

#Cách thực hiện

1. Đăng nhập Blogger
2. > Bố cục > Thêm tiện ích > HTML/Javascrip
3. > Dán code dưới vào và save là được.

<style scoped="" type="text/css">

/*

Made by AllBloggerTricks with lot of hardwork please keep the comment intact

*/

ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}

ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}

ul.abt-sidebar-slider{width:100%;height:500px}

ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}

ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}

ul.abt-sidebar-slider img{border:0;width:100%;height:100%}

ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}

ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}

ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}

ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}

ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgGnUJQGsZun2tW-7reoVTjgJGnQgj3X7rODDstCBelpxV_axhuWFWYvtVoYGzVu_vz4XdXTgpNc3y7I3I9Ol6OGlyYFYX755nmuiKgVypeXikPMEVxrjwfjQCgljgEEg8CpUzeRAkv4/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}

ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}

ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}

ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}

ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}

ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}

ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}

.buttons{margin:5px 0 0}

.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}

.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}

.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}

</style>

<div id="featuredpostside"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="http://files.allbloggertricks.com/Scripts/abt-sidebar-slider.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://www.khanh98.blogsot.com",

MaxPost:8,

idcontaint:"#featuredpostside",

ImageSize:300,

interval:5000,

autoplay:true,

tagName:false

});

//]]>

</script>

Lưu ý:

• Thay http://www.khanh98.blogsot.com thành URL blog của bạn
• Thay 8 thành số lượng bài viết muốn hiển thị
• Thay 300 thành kích thước ảnh
• Thay 5000 thành thời gian dừng để xem( 1000 tương đương với 1 giây)
• Thay true thành false nếu không muốn các bài viết tự chuyển động