How to Add in Blogger Simple Recent Posts Widget by Label

How to Add in Blogger Simple Recent Posts Widget by Label

August 23, 2022


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

<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

<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:
<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.

Share by this in:

7 Comments

avatar
Anonymous May 13, 2022 at 12:45 PM

This what I wanted. Thanks for this. But the arrows does not display correctly in my theme, and There's a problem when I try to add 2 and more Label post widgets.
How do I fix them.

avatar
Anonymous May 30, 2022 at 12:36 AM

thank you so much!!!!!!!!!!!!!!

avatar
it24.in February 1, 2023 at 9:35 AM

Tx You so much

avatar
حسام السعيد عامر August 8, 2023 at 6:29 AM

I used the second code for specific label
Indeed, the label was published
But the image posted with each article does not appear as it is

This is my blog link
https://shlotmozdwag.blogspot.com/
"سينما" name of the Gadget
I have chosen a label as you can see in the second gadget on the left of the page
Is it possible to solve the problem so that the thumbnail is displayed in the Gadget?

avatar
Mark Daniel Korvin August 8, 2023 at 11:26 AM

I see everything is working now

avatar
حسام السعيد عامر August 8, 2023 at 10:45 PM

Thank you, sir
The problem was solved automatically after I changed the size of the images in the posts

avatar
Notwaitingtomorrow December 7, 2023 at 11:56 AM

Very nice, what you say is the work
I am very happy