Tạo Recent Post Slider Trong Sidebar Cho Blogger - Blogspot

Lần này Anh Nhím sẽ hướng dẫn các bạn tạo Widget Recent Post slider -  là một tiện ích dùng để hiển thị một danh sách các bài viết mới nhất trên blog của bạn với một hình ảnh thu nhỏ trượt lên xuống cho blogger

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết

Mục Đích

• Cập nhật danh sách bài viết mới nhất cho blogspot
• Tăng trải nghiệm người dùng
• Thực hiện đơn giản trong vòng 1 nốt nhạc
• .....

Thực Hiện

1. Các bạn vào Blogger -> Bố Cục -> Thêm Tiên Ích -> HTML/Javascript

Các bạn nên đặt tiện ích này ở Sidebar thì nó sẽ đẹp hơn

2. Sau đó chép toàn bộ code sau vào trong đó.

HTML<style scoped="" type="text/css">
ul.recentpostslider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.recentpostslider{font-size:11px}
ul.recentpostslider,ul.recentpostslider li{margin:0;padding:0;list-style:none;position:relative}
ul.recentpostslider{width:100%;height:500px}
ul.recentpostslider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.recentpostslider li:nth-child(1),ul.recentpostslider li:nth-child(2),ul.recentpostslider li:nth-child(3),ul.recentpostslider li:nth-child(4){display:block}
ul.recentpostslider img{border:0;width:100%;height:auto}
ul.recentpostslider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.recentpostslider li:nth-child(2){left:0;top:50%}
ul.recentpostslider li:nth-child(3){left:50.5%;top:50%}
ul.recentpostslider li:nth-child(4){width:100%;left:0;top:75%}
ul.recentpostslider .overlayx,ul.recentpostslider li{transition:all .4s ease-in-out}
ul.recentpostslider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqEQsNpfQKmRWFGhhoMb1F1xq6Juxb6Ej6r56c3-H9cQ66gb3P8kF80i4t1ZFZwsnMz80_TR0CctRGHenvfQ0aNNYPluVlBH7vVn144gI7gsBQSfjt5K3l__pS3L7wws3GzksovUUfQQ/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.recentpostslider .overlayx,ul.recentpostslider img{margin:3px}
ul.recentpostslider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.recentpostslider .overlayx:hover{opacity:.1}
ul.recentpostslider h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}
ul.recentpostslider li:hover h4{bottom:30px}
ul.recentpostslider li:nth-child(1) h4,ul.recentpostslider li:nth-child(4) h4{font-size:150%}
ul.recentpostslider .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}
ul.recentpostslider li:hover .label_text{bottom:20px;opacity:1}
ul.recentpostslider li:nth-child(2) .autname,ul.recentpostslider 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="featuredpostslider"></div>
<script type='text/javascript'>
function FeaturedPostSlider(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://lh3.googleusercontent.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="recentpostslider"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSlider({
  blogURL: "http://www.vnitworld.net",
  MaxPost: 8,
  idcontaint: "#featuredpostslider",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>

Chú ý: Thay link màu đỏ http://www.vnitworld.net thành link blog của bạn

3. Lưu sắp xếp
4. Thưởng thức thành quả

Demo
click to view

Nâng Cao

Chả có gì gọi là nâng cao ở tiện ích này cả

Có thể thay đổi các giá trị sau

• blogURL: link blog bạn
• Maxpost: số bài hiên thị (không phải là số ô sẽ hiện thị đâu nha)
• idcontaint: ko được dụng vô cái này, giữ nguyên
• ImageSize: kích thước ảnh, mình đã để sao cho nó đẹp nhất rồi nên các bạn ko đụng cái này cũng được
• interval: thời gian chuyển side, tính bằng s (ở trên 5000 nghĩa là 5s)
• autoplay: hiệu ứng chuyển side (true: mở --------false: tắt)
• tagName: hiên thị bài theo nhãn (false: hiện thị bài đăng mới nhất ), nếu muốn hiện thị bài theo nhãn thì nhập nhãn theo mẫu sau: tagNama: "Nhãn"

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Recent Post Slider Trong Sidebar Cho Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.