Hoàn toàn tự động trượt cho Sidebar của Blogger
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 cuối phụ tùng 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 thời gian tùy biến không giống như các widget trước. Nó hoàn toàn tự động bạn chỉ cần nhập URL blog của bạn và các thanh trượt sẽ tiếp tục cập nhật các bài viết. Điều này phụ tùng là hơi khác nhau. Chúng tôi thường sử dụng Sidebar để thêm các vật dụng như Bài viết phổ biến, 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 Hover hiệu lực, hiệu quả chuyển đổi vv Bạn có thể thay đổi số lượng hình ảnh và được hiển thị. Bạn có thể thay đổi bài viết hiển thị cho một ví dụ nhãn cụ thể nếu bạn muốn chỉ hiển thị 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.
.png)
Thêm HTML / CSS / JS
Đi vào 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">
/*
Made by lutip.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/AVvXsEiyJYh5YJnH5Vq-yvTXpjtgfqmEtNya-3FNZ7pGwY56Nc2JTyRNosOR8pfcdRs0WNhCxd491z4sCNFdpTLeHGlwdYrI0-UQiRM584T_ux3B4Z1qf0rhvK_1nFLyNwYRWRIQ_9x1mTjZriw/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://www.lutip.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
Bây giờ lưu mẫu để thay đổi có thể xảy ra.
Cài đặt
Đây là các thiết lập thời gian 1 bạn có thể áp dụng.
blogURL = Thêm URL blog của bạn ở đây
MaxPost = Tổng số không. các bài viết trong các thanh trượt
Khoảng thời gian = Thời gian thực hiện để thay đổi vị trí các slide trong phần nghìn giây
autoplay = Viết true hay false trong bạn muốn / không muốn hình ảnh và thay đổi tự động.
tagname = Nếu bạn muốn hiển thị bài viết bằng thẻ / nhãn, chẳng hạn như các widget tag, nó sẽ được viết như tagname: "widgets"
Một khi bạn đang thực hiện với các thiết lập chỉnh sửa mã và Lưu mẫu lại. Thế đấy, một thanh trượt bên mát mẻ bây giờ có thể được nhìn thấy trong blog của blogger của bạn.