Recent Post xáo trộn bài viết ngẫu nhiên cho Blogger

Randomly Shuffling Recent Posts widget for Blogger

Hôm nay Iris Tips xin chia sẻ cho các bạn một kiểu recent post - bài viết gần đây kết hợp với hiệu ứng slide chuyển bài viết ngẫu nhiên khá đẹp mắt dành cho Blogger. Bạn có thể kết hợp với Multi Tabbed để tạo nên một widget chuyên nghiệp và hiện đại cho website của mình.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code dưới đây vào trước thẻ ]]></b:skin>

/* Randomly Shuffling Recent Posts IR*/
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/AVvXsEiZuoh8GTpGtiOrQkIH8y0QCHs8DosHq4bN_9zOA12uRGgHtzTzZ9ebtC0KiUHMba2vL0HUl57NKQ8dXhyphenhyphenWKh0-_3TDUwIjNth4BqBe1R-SZpRA8WDpe4HCJ4wEB1KDAczYaeMLCrAah1Q/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:1px 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}

Javascript & HTML

2Vào Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code sau vào

<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://sites.google.com/site/iristipsblogger/file/randomly-shuffling-recent-posts.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[ 
FeaturedPostSide({blogURL:"http://iris-tips.blogspot.com",MaxPost:24,idcontaint:"#Featuredpostside",ImageSize:300,interval:5000,autoplay:true,tagName:false});//]]></script>

Chỉnh sửa: http://iris-tips.blogspot.com thành địa chỉ website của bạn, MaxPost:24 là số bài viết tối đa trình chiếu trên slide.

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm