Cách tạo Post Slider tự động đơn giản bằng HTML widget.

Chào các bạn, hôm nay mình xin giới thiệu và hướng dẫn các bạn tạo một Post Slider widget để tăng tính thẩm mỹ cho blog của riêng mình.

Ắt hẳn widget này cũng không quá xa lạ đối với các bạn Blogger, vì vậy mình xin giới thiệu sơ lược và ngắn gọn về Post Slider thôi.

Post Slider cũng  tương tự như Recent posts hay Popular posts, tuy nhiên nó có một tính năng vượt trội là các posts sẽ tự chuyển động và đổi bài đăng sau một khoảng thời gian nhất định. Nó cũng tương tự việc chuyển slide trong PowerPoint vậy, và người xem cũng có thể trực tiếp lựa chọn bài đăng bằng các nút mũi tên có sẵn trong widget.

Để thêm widget này vào blog, bạn vào mục Bố Cục, chọn thêm tiện ích tại vị trí bạn mong muốn, chọn tiện ích HTML/ JavaScript và chèn đoạn code này vào khoảng trống :

<style type="text/css">

ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:100%}ul.featured-widget-list .featuredbg{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/AVvXsEhAcg4DC7rxTDO9SALrryDoQMgW4pBqidK-S_aY956ICA12toz6RLso4hr7MmLjW-VqmH98NxS2bz0dRD0XyZjPRw4IHWTmUXEpn-xATEEuUf3blr_PoI4-x9JyfIm-5xChnyaNN8SA9f0/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}

.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}

.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}

</style>

<div id="featuredbwidget"></div>

<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

featuredbwidget({

listURL:"YOURURLHERE/",

featuredNum:20,

listbyLabel:false,

feathumbSize:1900,

interval:3000,

autoplay:true,

featuredID:"#featuredbwidget"

});

function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:1900,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzc7Z2wfoBypm8PigdKGsCBIleG8owTrGjJt84jldlyx5z6PnmqCpgL4pATopasMBWF2onE_eef1VYPGolQ45Ci05Xn-sZyhD6_DSluLveIsBU5AdeESDY-JVVLJfhjZ7tHoNxtlstIk/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></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.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$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.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};

//]]>

</script>

Thay dòng YOURURLHERE bằng liên kết đến blog của bạn. Ngoài ra, bạn cũng có thể bật tắt chức năng tự chuyển post bằng cách thay giá trị của autoplay bằng true ( bật ) và false ( tắt ).

Với cách thực hiện vô cùng đơn giản, hy vọng các bạn sẽ thực hiện thành công. Mọi thắc mắc hãy để lại dưới phần comment bên dưới nhé. 

Hẹn gặp các bạn ở các bài viết kế tiếp của mình và nhóm mình nhé. 

Bài viết có sử dụng thông tin bà hình ảnh từ Google, Helplogger và các bài đăng về Blog tips.