How to Add in Blogger Simple Recent Posts Widget by Label

The beauty of a Blogger is that we ourselves can make a blog the way we see it. In this case, we will talk about the "recent posts" widget. This is one of the most important elements for each blog.

So now I'll show you how to add it to Blogger.

How to Add Recent Posts Widget to Blogger

To add this widget in the blogger blog do the following steps:

1. Go to Blogger Dashboard
2. Open Layout section
3. Create new HTML\Javascript Gadget
4. Paste in this gadget one of the options below (simple recent posts or recent posts by label with navigation) Demo1 \ Demo2

1) Simple recent posts widget

HTML<script> function showlatestpostswiththumbs(json) { document.write('<ul class="recent-posts-container">'); for (var i = 0; i < posts_no; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var postsurl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { var commentstext = entry.link[k].title; var commentsurl = entry.link[k].href; } if (entry.link[k].rel == 'alternate') { postsurl = entry.link[k].href; break; } } var recenthumb; try { recenthumb = entry.media$thumbnail.url; } catch (error) { s = entry.content.$t; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { recenthumb = d; } else recenthumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-s6j9dfOliIm83H2P2zRbHSodIzXolJhyphenhyphen6f5FQMASJsE35xi5mmM5tO6sNZzXxlNnZMglTxaUlBAdHvf8uSW7vaCZr3RG2-byIVIxTtthqPnymWdisK3M1PmMU7BayzUsquzYgMl0tEB/s1600/no-thumb.png'; } 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"; document.write('<li class="recent-posts-list">'); if (posts_date == true) document.write('<div class="post-date"> ' + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear + '</div> '); if (showpoststhumbs == true) document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>'); document.write('<div class="recent-post-title"> <a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div> '); var posts_details = ''; var flag = 0; document.write('<div class="recent-posts-details"> '); if (showcommentslink == true) { if (flag == 1) { posts_details = posts_details + ' <br> '; } if (commentstext == '1 Comments') commentstext = '1 Comment'; if (commentstext == '0 Comments') commentstext = 'No Comments'; commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>'; posts_details = posts_details + commentstext; flag = 1;; } if (readmorelink == true) { if (flag == 1) posts_details = posts_details + ' | '; posts_details = posts_details + '<a class="readmorelink" href="' + postsurl + '" class="url" target ="_top">Read more</a>'; flag = 1;; } document.write(posts_details); document.write('</div> '); document.write('</li> '); } document.write('</ul> '); }</script> <script> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; var posts_date = false; </script> <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs"></script> <noscript>Your browser does not support JavaScript!</noscript> <style type="text/css"> img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;} .recent-posts-container {font-family: 'Oswald', sans-serif;width: 100%;min-height: 70px;margin: 20px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 5px;} ul.recent-posts-container {counter-reset: countposts;list-style-type: none;} ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 36px; font-size: 16px;color: #fff;background: rgba(0,0,0,0.4);padding: 9px 14px;} .recent-posts-container a { text-decoration:none; } .recent-posts-container a:hover{color: #f74f4f!important;} .post-date {color:#989c9c; font-size: 11px; } .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #111!important;} .recent-post-title { margin: 5px 0px; } .recent-posts-details {border-top: 4px dashed #fd8c9e; margin-top: 5px; padding-top: 5px;} .recent-posts-details a{ color: #888;} a.readmorelink {color: #4DACE3;} img.recent-post-thumb { padding: 2px 0px; width: 65px; height: 65px; float: left; margin: -14px 10px 0px 0px; border-radius: 10%; border:none!important} </style> <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"></link>

2) Recent posts widget by label

HTML<div id="latestpost">
</div>
<div id="recentpostnavfeed">
</div>
<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
a,a:link,a:visited{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#latestpost{margin:0}
#latestpost .recentpost{width:100%;background:#fff;display:inline-block;margin:0 2px 1px 0;padding:5px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#latestpost .recentpost:nth-child(even){margin:0 0 10px 0}
#latestpost .recentpost img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#latestpost .recentpost h6,.recentpost h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#latestpost .recentpost:hover{background-color:#fefefe}
#latestpost .recentpost p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFblrQbQHLfFfVQmHzHt5delOoFPwNM3e95GDeJ2F24pc1SCOnIlkj_tc06pkmQslQkRtGnUxuMx9w8YdENeU4M5xthdczJIbdd0u9i-e-yqP_kXNvoPoVy9C7Q2CbD7Q0PrUMULWTNA/s1600/Preloader_8+-+%25D0%25BA%25D0%25BE%25D0%25BF%25D0%25B8%25D1%258F.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#latestpost .recentpost{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://"+window.location.hostname;
var charac = 80;
var urlprevious, urlnext;
function dantefeed(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 showlatestpost(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/AVvXsEgluQ_ZMxvqLlvT00Qef-6mrNnXW8KmoEYbFHOfNoKzp41Imyv5xxNyPGQxdOGvz8srUX0Z_2BAlAzv40fK3YT48zKHPAV0-Phf-33nywZR7kKjEpLq8oBD7zrZfyDPX6nUfUUSD83UUzRQ/w300-c-h140/no-image.png",s+="<div class='recentpost'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+dantefeed(i,charac)+"</p>",s+="</div>"}document.getElementById("latestpost").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").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=showlatestpost",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("latestpost").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/YOURLABEL"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","zetlabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("zetlabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script> 

Now Save your html\javascript gadget and check the result. 

If arrow icons not display connect to your blog fontawesome styles:

HTML<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 

Video instruction

Conclusion

"The Latest posts widget" promotes user retention on the site and thereby lowers the bounce rate and raises the rating of your posts.