5 mẫu tiện ích bài đăng mới (Recent Post Widget) tuyệt đẹp dành cho Blogspot

Đối với blogger không rành về thiết kế và phát triển web, việc tùy biến giao diện blog là một việc rất khó khăn và tốn nhiều công sức. Đó là lý do tại sao hôm nay tôi giới thiệu với bạn các mẫu tiện ích bài đăng mới tuyệt đẹp và dễ dàng sử dụng thông qua sao chép code và dán vào tiện ích (widget) trên blog của mình. Tiện ích bài đăng mới (Recent Post Widget) giúp cho blogger hiển thị các bài đăng mới nhất của mình trước khách truy cập. Bài viết này sẽ giới thiệu với các bạn 5 mẫu tiện ích bài đăng mới (Recent Post Widget) tuyệt đẹp dành cho Blogspot khi mà mẫu tiện ích mặc định của template không vừa ý Blogger và muốn tìm một mẫu bắt mắt hơn cho blog của mình để cải thiện trải nghiệm của người xem. Khách truy cập sẽ tìm thấy tất cả các bài viết mới nhất trong blog của bạn thông qua tiện ích này. Tiện ích sẽ tăng cơ hội nhận được nhiều nhấp chuột hơn từ khách truy cập, giảm tỷ lệ thoát blog khi khách truy cập rất khó tìm thấy thông tin mình cần với một giao diện không trực quan và cải thiện thứ hạn blog của bạn trên công cụ tìm kiếm Google. Thông qua điều này, tiện ích giúp bạn cải thiện SEO cho blog và trải nghiệm người dùng.

Với 5 mẫu widget này, bạn dễ dàng thêm và loại bỏ trên blog của mình không cần phải tùy chỉnh lại mã HTML của template. Bạn còn chần chừ gì nữa mà không trãi nghiệm với 5 mẫu widget này.

Ảnh thumbnail của Widget

1. Sliding Recent Posts Widget

Đây là một Recent Post Widget dạng trượt rất bắt mắt, phù hợp cho các blog tin tức, hoặc bán hàng và được chú ý của rất nhiều Blogger. Tiện ích này sẽ hiển thị 4 hình ảnh bài đăng mới tại một thời điểm. Nó sẽ trượt hình ảnh bài gần đây được xác định bởi bạn. Tiêu đề của bài viết sẽ nhấp nháy trên hình ảnh. Đây là một widget đáp ứng nên bạn không cần phải lo lắng về khả năng phản hồi. Bạn có thể xem ảnh của widget này trên ảnh thumbnail bên trên. Code của widget này như sau:

<style scoped="" type="text/css"> ul.borecentpost *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.borecentpost{font-size:11px}ul.borecentpost,ul.borecentpost li{margin:0;padding:0;list-style:none;position:relative }ul.borecentpost{width:100%;height:500px }ul.borecentpost li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.borecentpost li:nth-child(1),ul.borecentpost li:nth-child(2),ul.borecentpost li:nth-child(3),ul.borecentpost li:nth-child(4){display:block }ul.borecentpost img{border:0;width:100%;height:auto}ul.borecentpost li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.borecentpost li:nth-child(2){left:0;top:50% }ul.borecentpost li:nth-child(3){left:50.5%;top:50% }ul.borecentpost li:nth-child(4){width:100%;left:0;top:75% }ul.borecentpost .overlayx,ul.borecentpost li{transition:all .4s ease-in-out }ul.borecentpost .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/AVvXsEi5x1QNUk_amoJKFKCydNXu9Xp228RZ7TEyUp7fVuCH9mMfsPTNhkqg5xYUEocnVZAqj-u5aKknV31GmSMvfD0292O4tBrJTIC_Y1zI6WMixYLOH0r7bf8m-gRnLlXuLBr15fmqE0sHxXw/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.borecentpost .overlayx,ul.borecentpost img{margin:3px}ul.borecentpost li:nth-child(1).overlayx{background-position:50% 25% }ul.borecentpost .overlayx:hover{opacity:.1 }ul.borecentpost 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.borecentpost li:hover h4{bottom:30px}ul.borecentpost li:nth-child(1)h4,ul.borecentpost li:nth-child(4)h4{font-size:150% }ul.borecentpost .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.borecentpost li:hover .label_text{bottom:20px;opacity:1}ul.borecentpost li:nth-child(2).autname,ul.borecentpost 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://1.bp.blogspot.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="borecentpost"></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://caphekoduong.blogspot.com/", MaxPost: 9, idcontaint: "#featuredpostslider", ImageSize: 300, interval: 5000, autoplay: true, tagName: false }); //]]> </script>

Cách cấu hình:

• Thay blogURL: “http://caphekoduong.blogspot.com/” bằng đường dẫn blog của bạn.
• Bạn có thể thay đổi số lượng bài đăng thông qua thông số MaxPosst.
• Nếu bạn không muốn nó tự động trượt thì cài đặt thông số autoplay là “false”.

2. Gallery Style Widget

Đây là một widget dạng lưới (grid), cấu hình của widget này rất dễ dàng. Bạn có thể thêm tiện ích này vào thanh bên hoặc bên trên Post chính của blog sau vài cú nhấp chuột. Tiện ích này sẽ hiển thị hình thu nhỏ của bài đăng gần đây trong ba hàng. Hình thu nhỏ hình ảnh được thiết kế đẹp để đại diện cho bài viết. Hiệu ứng di chuột hình ảnh trượt cũng có sẵn trong widget này. Bạn có thể tùy chỉnh lại thông số khung hình ảnh cho phù hợp với vị trí đặt widget.

Code:

<style> /* CSS Recent Post Gallery Widget */ .recent-grid {padding:0;clear:both;} .recent-grid:after {content:"";clear:both;display:table;} .recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;} .recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px} .recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:20px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s} .recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1} .recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s} .recent-grid a:hover img {border-color:#bbb;} </style> <script type='text/javascript'> //<![CDATA[ // Recent Post Gallery function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid"> '],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview"> ',g,"</div> ")}e.push("</div> "),document.write(e.join(""))} //]]> </script> <script> var recentpost_thumbs = 235; var recentpost_title = true; </script> <script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=gallerygrid"></script>

Cách cấu hình:

• Cấu hình là không cần thiết nếu bạn đặt ở thanh bên sidebar. Nếu bạn đặt bên trên Post chính với khung rộng hơn, bạn có thể điều chỉnh lại thông số cho recentpost_thumbs cho phù hợp.

3. Recent Posts Widget đơn giản

Đây là một widget đơn giản. Widget này đi kèm với số bài đăng tăng dần từ mới đến củ. Nó sẽ hiển thị tiêu đề bài viết, một đoạn trích nhỏ ngay bên dưới tiêu đề và sau cùng là ngày đăng bài. Người dùng sẽ có thể xem ngày xuất bản bài đăng và đọc thêm liên kết. Mẫu này chỉ hiển thị text không có hình thu nhỏ.

Code:

<div class="recentpostarea"> <style type="text/css"> .recentpostarea {list-style-type: none;counter-reset: countposts;} .recentpostarea a {text-decoration: none; color: #49A8D1;} .recentpostarea a:hover {color: #000;} .recentpostarea li:before {background: #69B7E2;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;} li.r-p-title { padding: 5px 0px;} .r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;} .r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;} .recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;} .r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;} </style> <script type = "text/JavaScript"> function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write(' <li class="r-p-title">');document.write(posttitle);document.write('</li> <div class="r-p-summ"> ');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div> '); if (posts_date == true) document.write('<div class="recent-post-date"> ' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div> '); }} </script> <script> var posts_number = 5; var posts_date = true; var post_summary = true; var summary_chars = 80; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script> <noscript>Your browser does not support JavaScript!</noscript> </div>

Cách cấu hình:

• Cấu hình là không cần thiết.

4. Recent Post Widget with Thumbnail

Đây là một tiện ích bài gần đây được thiết kế đẹp cho blogger. Tiện ích này sẽ hiển thị 5 bài đăng gần đây của blog của bạn với hình thu nhỏ. Hình ảnh thu nhỏ được điều chỉnh giữa các đường viền. Tiêu đề và một đoạn nhỏ sẽ hiển thị trên widget. Điều quan trọng nhất là, mọi người cũng có thể xem các bài viết trước thông qua hệ thống điều hướng của tiện ích này.

Code:

<style scoped='' type='text/css'> /* Recent Post Widget */ #recentpostnav{width:100%;border:1px solid #585858;margin:0 auto} #borpbox{margin:0} .recentposarea{display:block;background:#fff;height:79px;border:1px solid #ddd;margin:5px 0;padding:10px} .recentposarea img{float:left;background:#fff;border:1px solid #ddd;margin-right:8px;padding:4px;height:70px;width:70px} .recentposarea h6,.recentposarea h6 a{text-decoration:none;margin:0;color:#111;font-size:13px!important;font-weight:700!important;} .recentposarea:hover{background-color:#fefefe} .recentposarea p{text-align:left;font-size:12px;margin:5px 0;color:#555;line-height:normal} #loadrecentpost{font-family:Tahoma;color:#888;font-size:100px;letter-spacing:-10px;text-shadow:-5px 0 1px #444;text-align:center;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioe5SnUnBcMOHo3gZyJuRRpdRLLwD0FcqSbnqqdND8Jbg9Ty6YC-84x3n48ClWXLUXx4PiVeurhLhOpvFHrFtsciyuCgb-NeXnGfCE1-kYC2a72hgQLHjFPVm0JwdQBPx-6tHwLQtIO3jM/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd} #rpnavigation{color:#bbb;border:1px solid #ddd;font-family:Verdana;text-align:center;font-size:12px;margin:0} #rpnavigation:hover{background-color:#fefefe} #rpnavigation a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px} #rpnavigation span{padding:5px 10px} #rpnavigation .next{float:right} #rpnavigation .previous{float:left} #rpnavigation .home{text-align:center} #rpnavigation a:hover,#rpnavigation span.noactived{color:transparant!important} </style> <script type='text/javascript'> //<![CDATA[ var numfeed = 5; var startfeed = 0; var urlblog = "https://caphekoduong.blogspot.com/"; var charac = 40; var urlprevious, urlnext; function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip4Nx8kt3QD20ORIGQLMujEiYdN8kywbsbHKqMhHz09Bxn-Slsg498Uap1AiP4oQu5pNDU5SKTtT77rFYcBbD6-E7dhwDYqTafwDDQDgtkzKf-ly_pdWSKuynxakzGFcwIAlQ3YyYkQW5k/s1600/no-image.png",s+="<div class='recentposarea'> ",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6> <a href='"+r+"'>"+n+"</a></h6> ",s+="<p> "+arlinafeed(i,charac)+"...</p> ",s+="</div> "}document.getElementById("borpbox").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("rpnavigation").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("borpbox").innerHTML="<div id='loadrecentpost'> </div> ",document.getElementById("rpnavigation").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; //]]> </script> <div id="borpbox"> </div> <div id="rpnavigation"> </div>

 Cách cấu hình:

• Bạn có thể thay thế numfeed = “5” để điều chỉnh số lượng post theo ý mình.
• Thay “http://caphekoduong.blogspot.com/” URL với địa chỉ blog của bạn.

5. Multi Colored Widget

Đây cũng là một mẫu widget đơn giản. Nó chỉ hiển thị tiêu đề bài viết, một đoạn trích nhỏ ngay bên dưới tiêu đề và sau cùng là ngày đăng bài. Nhưng mỗi bài đăng sẽ có một màu nền khác nhau. Vì trên thumbnail bên trên chưa có hình cho widget này nên bạn có thể xem hình sau:

Widget 5

 Code:

<style type="text/css"> img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff} ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;} ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%} ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%} ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;} ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;} ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;} ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;} .recent-posts-wrap a { text-decoration:none; } .recent-posts-wrap a:hover { color: #222;} .post-date {color:#e0c0c6; font-size: 11px; } .recent-post-title a {font-size: 14px;font-weight: bold;color: #444;} .recent-post-title {padding: 6px 0px;} .recent-posts-details a{ color: #222;} .recent-posts-details {padding: 5px 0px 5px; } </style> <script type="text/javascript"> function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYe_lqzud1-_QV-mGUgoTuCoDyK6GYwGU6t6mPhUVUabRMstel2fzC4FWgaM51KOGqmM_uOjuCWh5t6Qk6UNlQakZUV5GvbtuyfGZ1DFpQKYqOSovhODGldO355KMLqVdYM_oPAmTP2zM/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write(' <li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"> <a href="'+r+'" target ="_top">'+i+"</a></div> "),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details"> '),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div> "),document.write("</li> ")}document.write("</ul> ")} </script> <script type="text/javascript"> var posts_number = 5; var showpostswiththumbs = true; var insidereadmorelink = true; var showcomments = false; var posts_date = true; var post_summary = true; var summary_chars = 70; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

Cách cấu hình:

• Cấu hình là không cần thiết.

Lời kết

Trên đây mình đã chia sẻ với các bạn 5 mẫu Widget cho bài đăng mới nhất, mong rằng nó sẽ đáp ứng được nhu cầu và sự trãi nghiệm của bạn. Nếu có thắc mắc gì vui lòng để lại comment bên dưới nhé.