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

 

This is box title
<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://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

 

This is box title
<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.

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here