Tạo Recent Posts Widget Đẹp Cho Blogspot

Code Recent Posts Widget For Blogspot

Gần đây, blog howktech có thêm Widget Recnet Posts có thể coi là tương đối ổn. Không giấu kín làm gì, vì vậy mình sẽ chia sẻ lại cho các bạn code để tạo Recent Posts Widget cho Blogspot của các blogger nhé. Recent Posts này các bạn có thể đặt ở phần sidebar để hiển thị các bài viết của bạn nhé.

Tao Recent Posts Widget Dep Cho Blogspot

Cách Thêm Recent Posts Widget 

Bước 1: Các bạn thêm CSS này vào ]]></b:skin hoặc trên </body> hơn nữa bạn cũng có thể thêm cả CSS và đoạn code ở bước 2 vào cùng 1 nơi để tiện quản lí.
Tao Recent Posts Widget Dep Cho Blogspot

<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(http://lh3.googleusercontent.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/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>
Bước 2: Các bạn thêm đoạn code hiển thị recent posts bên dưới vào nơi bạn muốn hiển thị. Như howktech thì mình thêm nó ở trong bố cục phần Right Sidebar để cho dễ quản lí.

Tao Recent Posts Widget Dep Cho Blogspot

<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: "https://www.howktech.com/",
  MaxPost: 8,
  idcontaint: "#featuredpostslider",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>
Lưu ý: Ở phần tô đó trong đoạn code các bạn đổi lại bằng URL của bạn để hiển thị nhé.
Bước 3: Thế là đã xong các bạn lưu lại và kiểm tra

Lời Kết

Chúc các bạn thành công.
Demo

How To Download File :

Download Here

How To Download File :

Howktech

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi

» Nhận Xét Của Bạn - Hãy Comment Lịch Sự Vì Bạn Có Hiểu Biết.

Loading...