Vì vậy, hôm nay tôi gửi bài một widget mà cá nhân tôi thích quá nhiều. Widget này có phần giống như trước phụ tùng bài viết nổi bật Tôi đã đăng nhưng hoàn toàn khác nhau trong hoạt động. Bạn có thể thêm thanh trượt này để Sidebar của bạn. Bạn chỉ cần làm 1 lần tùy biến không giống như các widget trước. Nó hoàn toàn tự động bạn chỉ việc nhập vào blog URL của bạn và thanh trượt sẽ tiếp tục cập nhật các bài viết.
Widget này có phần khác biệt. Chúng tôi thường sử dụng Sidebar để thêm các vật dụng như được ưa thích bài viết, Nhãn, giống như hộp vv nhưng lần này chúng tôi sẽ có thêm một thanh trượt để thanh bên. Phụ tùng này có số hiệu ứng bao gồm cả hiệu ứng Hover, Hiệu ứng chuyển vv Bạn có thể thay đổi số lượng các slide sẽ được hiển thị. Bạn có thể thay đổi bài viết hiển thị cho một nhãn hiệu tức là cụ thể nếu bạn muốn hiển thị duy nhất của một nhãn cụ thể mà bạn có thể bằng cách thay đổi các thiết lập.
Để xem các thử nghiệm trực tiếp của widget này nhấn vào nút bên dưới và nhìn vào bên phải.
mã của nó đây nhé
XEM DEMO
Thêm HTML / CSS / JS
Tới Blog Tiêu đề → Giao diện → Thêm Widget → HTML / JavaScript. Thêm mã dưới đây đưa ra và Lưu nó.
<style scoped="" type="text/css">chúc các bạn thành công//
/*
Made by AllBloggerTricks.com 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/AVvXsEhSYtScGlxVDZgRunWj-LeGx1n4rhPDkJskMgONP2DRLV4kOA5DTqyQ5pEx_3g6qtq5ySr9MWqHm93o4TgzN2DytAqmf0v5y2UI9owbjpmGKp2i_wTs4s_BYoTgqzP6QmIOzxgyQxi6dMk/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="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://quanganhmachaiduongquetoi.blogspot.sk/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
Đăng nhận xét