Tiện ích ''Recent Post Slider''-Bài viết mới dạng SlideShow tuyệt đẹp cho Blogspot
http://dlcuocsong.blogspot.com/2013/11/tien-ich-recent-post-slider-bai-viet.html
 |
| Tiện ích ''Recent Post Slider''-Bài viết mới dạng SlideShow tuyệt đẹp cho Blogspot
Tiện ích ''Recent Post Slider''-Bài viết mới dạng SlideShow tuyệt đẹp cho Blogspot. Recent Post Slider-Bài Mới Dạng SlideShow...
|
Đây là tiện ích giới thiệu những bài viết gần đây được
trình chiếu dưới dạng slideshow với hiệu ứng xoay tròn trông vô cùng độc đáo và đẹp mắt.
Việc cài đặt tiện ích này thì cũng đơn giản và hiệu chỉnh cũng rất dễ
dàng.
Demo: Các bạn có thể xem ngay tại Website của mình nhé !
Rất đơn giản bạn chỉ cần thực hiện 2 bước sau:
Step 1- Vào Bố cục (Layout)
Step 2- Tạo một tiện ích HTML/Javascripts bất kỳ trên
Blog của bạn và dán code ngay bên dưới đây vào tiện ích đó.
<style scoped="" type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjm_HB94WYwMYx6v2zzI0GVCB6UN3kb_5s3FGxuOw-TNMOOBtkxuVT4P_4RSGqw71ombL6icu-o8ijqGPlrzHZFpBDf2YLptrveARdcEsLvpOJfDWSeqrBP6wAGllnC8iiwlJr48p7L6R/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides 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}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#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}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:49.8%}
#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src=" https://dlcsvn.googlecode.com/svn/trunk/featured-post.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:" http://www.dongluccuocsong.vn/",//URL Blog của bạn
MaxPost:8,//Số bài trình chiếu
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,//Tốc độ dịch chuyển
autoplay:true,//Tự động
tagName:false
});
});
//]]>
</script>
Postscript:
Các bạn cũng có thể thay các đoạn mình bôi đỏ sao cho phù hợp với ý của bạn ha.
Rất đơn giản phải không nào ?
Chú ý: Thay đoạn mình bôi tím thành URL blog của bạn.
Các bạn cũng có thể thay các đoạn mình bôi đỏ sao cho phù hợp với ý của bạn ha.
Rất đơn giản phải không nào ?
Chúc các bạn thành công !
