5 Cool Recent Post Widgets for Blogger

For bloggers that pride themselves on always staying up-to-date with new content, a <a href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html">recent post widget for Blogger</a> can be an invaluable tool. A recent posts widget for blogger is in many ways similar to a 'breaking news alert' that journalists love to use during their reports, providing the most recent and relevant posts that you have to offer.<br /><br />Adding a recent post widget for Blogger helps to reduce the dependency on email marketing, because you don't have to send out an email just to let people know you made a new post. Instead, it updates automatically for everyone to see. You can then use this information to design scheduled email newsletters, and take advantage of what's often referred to as the 'Twitter effect' where audiences will regularly check back on your site for the possibility that new posts are available. Without this, you force people to do run their own search for information and content, increasing the likelihood that they'll leave the site and hurt your bounce rate.<br /><br />Once you've managed to attract visitors to one of your posts using the <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html">recent post widget for Blogger</a>, it will continue to act as an accessible secondary resource to navigate around your site. That way, you can avoid having them sifting through old content that might be outdated. If you'd rather show off some of your best posts instead of your most recent posts, you can do that instead, or add that feature to the bar with just a few alterations.<br /><br />Apart from looking great and taking up minimal space, there are too many benefits for you not to have a recent post widget for Blogger. The best part about these add-ons is that they come in a wide variety of designs that will fit any theme. If you're interested in adding a widget to your site, here are 5 cool recent post widgets that might catch your eye and fit perfectly with your Blogger template:<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="recent posts for blogger, cool widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAS8obENhEP2e_8JMlz0t175Mc1xmdYs_HCAQsDCvTn3DfG0LkHMKEDgI1eBSxmD7N_Sh6Osu1tw3SnUbALcntMnqQdh6tCSd1silphZZsqGUskyqFUZjCVuoCRw05rINyw4cZG3rM4XO_/s1600/recent-posts-gadget-blogger.png" title="5 Cool Recent Post Widgets for Blogger" /></div><br /><h4 style="text-align:center;">Recent Posts Style #1</h4><div class="separator" style="clear: both; text-align: center;"><img alt="rainbow widget, recent posts" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJHjzWUQiMqDTqAdd5OqEIeYoDI-0puAhdWaV_OcOtAw-TcTex5JXmzEuQQBRBgncW2HN_evn9wdEfj7rsDEo66oVyK4XhkSH_jpw4SBofkrcVu-7ZrHUSJ_QCRx765CVkVTSnS085SSxB/s1600/rainbow-colorful-recent-posts-widget-for-blogger.png" title="5 Cool Recent Post Widgets for Blogger" /></div><blockquote class="tr_bq"><script type="text/javascript"><br />function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEhLfnHMAb2RHYlxUtarwNRWwFlPGHgfj839uHEmw0KG2FoLpC-Q_TeOU99ru39j7apZo6qzeIJNxP4YE9etEhij6YXrOCr0ys6Ia5haIpu9rcw6VQLR_-daj9rFPQlOM7nCNwzi_pkvPV3b/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==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" 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==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(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>")}<br /></script><br /><script type="text/javascript"><br />var posts_no = 5;<br />var showpoststhumbs = true;<br />var readmorelink = true;<br />var showcommentslink = false;<br />var posts_date = true;<br />var post_summary = true;<br />var summary_chars = 70;<br /></script><br /><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><br /><a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><br /><noscript>Your browser does not support JavaScript!</noscript><br /><link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /><br /><style type="text/css"><br />img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}<br />ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}<br />ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}<br />ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}<br />ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}<br />ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}<br />ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}<br />ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}<br />.recent-posts-container a { text-decoration:none; }<br />.recent-posts-container a:hover { color: #222;}<br />.post-date {color:#e0c0c6; font-size: 11px; }<br />.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}<br />.recent-post-title {padding: 6px 0px;}<br />.recent-posts-details a{ color: #222;}<br />.recent-posts-details {padding: 5px 0px 5px; }<br /></style></blockquote><h4 style="text-align:center;">Recent Posts Style #2</h4><div class="separator" style="clear: both; text-align: center;"><img alt="recent posts widget for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKE4ttMSjBP9RgMYZcqu2Anv4e3xPRAwCU6t2d5NGUVfJkB0RP0MoKyaW7xXyI-aZnbHsUAYVTJtH8pJFPvcFR3HmJQfUDj_T9gftBjM_CHeMW82ftKd6SxKJ0aePwRyWBvwBVkU4Bvtb/s1600/recent-posts-widget-for-blogger.png" title="5 Cool Recent Post Widgets for Blogger" /></div><blockquote class="tr_bq"><div class="recentpoststyle"><br /><script type="text/javascript"><br />function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}<br /></script><br /><script type="text/javascript"><br />var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script><br /><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"><br /></script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><br /><noscript>Your browser does not support JavaScript!</noscript><br /><style type="text/css"><br />.recentpoststyle {counter-reset: countposts;list-style-type: none;}<br />.recentpoststyle a {text-decoration: none;color: #49A8D1;}<br />.recentpoststyle a:hover {color: #000;}<br />.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}<br />.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}<br />.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}<br />.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}<br /></style></div></blockquote><h4 style="text-align:center;">Recent Posts Style #3</h4><div class="separator" style="clear: both; text-align: center;"><img alt="recent posts gadget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJPmN1cFPAXqtQraWqofLiiJUdS8N5F0eRxPdvZ1ePxLoyYfnOF3QUBzrhx_l9u_rutchO_2NHDA5DAPkL-IJa2_rJClEac4Y3PF5Q9jEexFPPmEk4UUN9c72OFKY1L5cA4cM52-RvznLS/s1600/recent-posts-widget-with-comments-count.png" title="5 Cool Recent Post Widgets for Blogger" /></div><br /><blockquote class="tr_bq"><script type="text/javascript"><br />function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEhLfnHMAb2RHYlxUtarwNRWwFlPGHgfj839uHEmw0KG2FoLpC-Q_TeOU99ru39j7apZo6qzeIJNxP4YE9etEhij6YXrOCr0ys6Ia5haIpu9rcw6VQLR_-daj9rFPQlOM7nCNwzi_pkvPV3b/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==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" 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==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(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>")}<br /></script><br /><script type="text/javascript"><br />var posts_no = 5;<br />var showpoststhumbs = true;<br />var readmorelink = true;<br />var showcommentslink = true;<br />var posts_date = true;<br />var post_summary = true;<br />var summary_chars = 40;</script><br /><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><br /><a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><br /><noscript>Your browser does not support JavaScript!</noscript><br /><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><br /><style type="text/css"><br />img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}<br />.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}<br />ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}<br />ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}<br />ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}<br />.recent-posts-container a{text-decoration:none;}<br />.recent-post-title {margin-bottom:5px;}<br />.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}<br />.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}<br />.recent-posts-details a{color: #777;}<br /></style></blockquote><h4 style="text-align:center;">Recent Posts Style #4</h4><div class="separator" style="clear: both; text-align: center;"><img alt="recent posts for blogger, cool widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAS8obENhEP2e_8JMlz0t175Mc1xmdYs_HCAQsDCvTn3DfG0LkHMKEDgI1eBSxmD7N_Sh6Osu1tw3SnUbALcntMnqQdh6tCSd1silphZZsqGUskyqFUZjCVuoCRw05rINyw4cZG3rM4XO_/s1600/recent-posts-gadget-blogger.png" title="5 Cool Recent Post Widgets for Blogger" /></div><blockquote class="tr_bq"><script type="text/javascript"><br />function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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(p){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/AVvXsEhLfnHMAb2RHYlxUtarwNRWwFlPGHgfj839uHEmw0KG2FoLpC-Q_TeOU99ru39j7apZo6qzeIJNxP4YE9etEhij6YXrOCr0ys6Ia5haIpu9rcw6VQLR_-daj9rFPQlOM7nCNwzi_pkvPV3b/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}<br /></script><br /><script type="text/javascript"><br />var posts_no = 5;<br />var showpoststhumbs = false;<br />var readmorelink = true;<br />var showcommentslink = true;<br />var posts_date = true;<br /></script><br /><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script><br /><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html">Recent Posts Widget</a><br /><noscript>Your browser does not support JavaScript!</noscript><br /><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><br /><style type="text/css"><br />img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}<br />.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}<br />ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}<br />ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}<br />ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}<br />.recent-posts-container a { text-decoration:none; }<br />.recent-posts-container a:hover{color: #4DACE3;}<br />.post-date {color:#e0c0c6; font-size: 11px; }<br />.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}<br />.recent-post-title { margin: 5px 0px; }<br />.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}<br />.recent-posts-details a{ color: #888;}<br />a.readmorelink {color: #4DACE3;}<br /></style></blockquote><h4 style="text-align:center;">Recent Post Style #5</h4><div class="separator" style="clear: both; text-align: center;"><img alt="recent posts, blogger gadget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FOCjuHDl_Sk6IRECHMtbZiLB7uYDVMMOZquoG41mMIe3etsOYDOpAHpC5Qol76j_jRckuBnkqauj56ABThljG0VIFRFkhfy_sBjo-YbXz5mQl-8Nr21VLJhvbem6HqtLWppH6HYavmjN/s1600/recent-posts-widget-blogger-count.png" title="5 Cool Recent Post Widgets for Blogger" /></div><blockquote class="tr_bq"><script type="text/javascript"><br />function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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(p){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/AVvXsEhLfnHMAb2RHYlxUtarwNRWwFlPGHgfj839uHEmw0KG2FoLpC-Q_TeOU99ru39j7apZo6qzeIJNxP4YE9etEhij6YXrOCr0ys6Ia5haIpu9rcw6VQLR_-daj9rFPQlOM7nCNwzi_pkvPV3b/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}<br /></script><br /><script type="text/javascript"><br />var posts_no = 5;<br />var showpoststhumbs = true;<br />var readmorelink = true;<br />var showcommentslink = true;<br />var posts_date = true;<br /></script><br /><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script><br /><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a><br /><noscript>Your browser does not support JavaScript!</noscript><br /><link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' /><br /><style type="text/css"><br />img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}<br />.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}<br />ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }<br />ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}<br />ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}<br />ul.recent-posts-container {border: 2px solid #FCD6CB; }<br />.recent-posts-container a { text-decoration:none; }<br />.recent-posts-container a:hover { color: #222;}<br />.post-date {color:#e0c0c6; font-size: 11px; }<br />.recent-post-title a {font-size: 14px;color: #616662;}<br />.recent-post-title {padding: 6px 0px;}<br />.recent-posts-details a{ color: #888;}<br />.recent-posts-details {padding-bottom: 5px;}<br />a.readmorelink {color: #4DACE3;}<br /></style></blockquote><br /><h2>How to Add Recent Posts Widget on Blogger</h2>Want to add one of the styles above? Just follow the following steps below:<br /><br />Step 1. Log into your Blogger dashboard and click on your blog<br />Step 2. Go to "Layout" and click the "Add a gadget" link on the right side<br />Step 3. From the pop-up window, scroll down and select the "HTML/JavaScript" gadget:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZsEGw6BF_jYmWP0FD1F0zWbGVe6G0qTM9BHbApWC2yrxZUWQJwWs6J-PLlzN83imZkhjOl8j_-905Z8bfTM92o2JdPHXmw_vTNlwQkJuJMCZMAGn7vxjh8pVswVQPvH33RFtF5pzkyE4x/s1600/add-html-javascript-gadget-blogger.png" width="640" /></div><br />Step 4. Paste the code of the chosen widget found below it.<br />Step 5. Hit the "Save" button... and you're done!<br /><br /><h3>Keep Your Blog Updated</h3>Using a recent post widget for Blogger can truly benefit you and improve your skill as a blogger. As you can see, these designs can look great on Blogger sites, but they do act a little bit like a progress report for the author. If you start to fall behind, the dates on your recent post widget will definitely give you away.<br /><br /><a href="http://helplogger.blogspot.com/2016/09/how-to-hide-posts-from-blogger-homepage.html">Set a schedule</a> and make sure that you are making regular posts on the blog. These posts will be automatically updated on your widget and readers can view this information whenever they want. Add your recent post widget for Blogger on the every page of the blog or in your template so that these posts can encourage others to continue reading, thus increasing the total time spent on your site.

5 Cool Recent Post Widgets for Blogger

For bloggers that pride themselves on always staying up-to-date with new content, a recent post widget for Blogger can be an invaluable too...

Read more »

Recent Rotating Post Gadget with Excerpt For Blogger

This JavaScript code will display the latest posts of any feed, the difference being that it has two parts which can be used individually or combined. The top of this widget will show a single post along with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us. At the bottom, we'll find a full list with recent posts that, on mouse over, will replace the post above, thus breaking the automatic cycle.<br /><br />Before adding anything, let's see it in action to decide if it does what we want.<br /><br /><div style="text-align: center"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/10/recent-rotating-posts-widget-for-blogger.html" rel="nofollow" target="_blank">Demo blog</a></div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="recent posts widget for blogger" border="0" height="261" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPOHkRGsHL0JFBVI1GDeQ6LI4kzw-NFJOGq3GYF89Ky7yVKcwxgOsJUyrsH_q7e8DkR6e3qBT693QJ-OKgwLhMYl9yZ1krZ6KFI83qfe3MrxbsgDsB1fSeYDnetLU3OQg-KS-D6pLiwA5a/s320/recent-rotating-posts-widget-for-blogger.png" title="how to add rotating recent posts gadget to blogger" width="310" /></div><br /><h2>How to Add Recent Rotating Posts Widget to Blogger</h2>Step 1. Go to "Layout" > click on the "Add a Gadget" link.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJYdOUEwoOdAsgZ0WL_oqqNB7BI2CbRHtS3vIVUuzsAyeooUtlCW59Bb3nWbwAXGaYFUQaicbrfvFI6L4YwUSAt1Aa-HZaumumOu0G9mDI0MfCgHt24452kQgGFtF3wJlBYotWAI-IQDb/s640/blogger-layout-add+a+gadget-how-to.png" width="640" /></div><br />Step 2. From the pop-up window, choose the "HTML/JavaScript" gadget<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmrFAsGS_Wc3zSIYYpqR0IQKpqYJ8z_0gZj0uHog56etusvU7qjqBwzo3e-EZ6huttK4B1DWhKrJm0k0aZng_LmZfeTXqE63_rqEYMhWU9ea1kWxEa0yplbdo5U6SoIVkuIJZnS7_JEdN/s400/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400" /></div><br />Step 3. Paste this code inside the empty box:<br /><blockquote class="tr_bq"><style><br />.gfg-root {<br />width: 100%;<br />height : auto;<br />position : relative;<br />overflow : hidden;<br />margin: 0 auto;<br />text-align : center;<br />font-size: 12px;<br />border: 1px solid #DBDBDB;<br />}<br />.gfg-title {<br />font-size: 16px;<br />font-weight : bold;<br />color : #6B6B6B;<br />background:#F3F3F3;<br />background-repeat: repeat;<br />line-height : 1.4em;<br />overflow : hidden;<br />white-space : nowrap;<br />padding: 5px;<br />text-shadow: 0px 2px #fff;<br />}<br />.gfg-entry {<br />background-color: #FFFFFF;<br />width : 100%;<br />height : 9.2em;<br />position : relative;<br />overflow : hidden;<br />text-align : left;<br />margin-top : 3px;<br />}<br />.gf-title a {<br />text-transform: capitalize;<br />color: #0000ff;<br />font-size: 14px;<br />}<br />.gfg-subtitle {<br />display: none;<br />}<br />.gfg-list {<br />position : relative;<br />overflow : hidden;<br />text-align : left;<br />}<br />.gfg-listentry {<br />line-height : 1.5em;<br />overflow : hidden;<br />white-space : nowrap;<br />text-overflow : ellipsis;<br />padding-left : 15px;<br />padding-right : 5px;<br />}<br />.gfg-listentry-odd {<br />background-color : #F3F3F3;<br />border-bottom : 1px dotted #CCCCCC;<br />padding: 5px;<br />}<br />.gfg-listentry-even {<br />background-color : #F3F3F3;<br />border-bottom : 1px dotted #CCCCCC;<br />padding: 5px;<br />}<br />.gfg-listentry-odd a{<br />color: #595959;<br />padding: 0 0px 0 10px;<br />}<br />.gfg-listentry-even a{<br />color: #242424;<br />padding: 0 0px 0 10px;<br />}<br />.gfg-listentry-highlight {<br />background: #FFFFFF;<br />}<br />.gfg-listentry-highlight:before {<br />position: absolute;<br />left: 0;<br />content: '\25BA ';<br />font-size: 14px;<br />color: #DBDBDB;<br />}<br />.gfg-listentry-highlight a {<br />color: #242424;<br />}<br />.gfg-root .gfg-entry .gf-result {<br />position : relative;<br />background-color: #ffffff;<br />width : auto;<br />height : 100%;<br />padding-left : 20px;<br />padding-right : 5px;<br />}<br />.gfg-root .gfg-entry .gf-result .gf-title {<br />font-size: 14px;<br />line-height : 1.2em;<br />overflow : hidden;<br />white-space : nowrap;<br />text-overflow : ellipsis;<br />margin-bottom : 2px;<br />margin-top: 5px;<br />}<br />.gfg-root .gfg-entry .gf-result .gf-snippet {<br />height : 3.8em;<br />color: #000000;<br />margin-top : 3px;<br />}<br />.clearFloat {<br />clear : both;}</style><br /><script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script><br /><script type="text/javascript"><br />function showGadget() {var feeds = [{title:'List',url:'<b><span style="color: blue;">http://helplogger.blogspot.com</span></b>/feeds/posts/default?redirect=false&<b><span style="color: #cc0000;">start-index=1</span></b>&<b><span style="color: #6aa84f;">max-results=10</span>'</b>},];<br />new GFdynamicFeedControl(feeds, 'feedGadget',{<b>title: </b>'<b>Latest Posts</b>', <b>numResults : 10</b>, <b>displayTime : 5000</b>, <b>hoverTime : 500</b>});} google.load("feeds", "1");<br />google.setOnLoadCallback(showGadget);<br /></script><br /><div id="feedGadget">Loading...</div></blockquote><h3>How to Customize the Recent Rotating Post Gadget</h3>The URL in blue is for the feed. So, the <b>http://helplogger.blogspot.com</b> URL should be replaced with the feed URL of your blog.<br /><br />Next is <b>start-index=1</b>. This number indicates which post will appear first on the list. By default, it is the latest post published on your blog, so if you want to begin displaying older posts, change the 1 value.<br /><br /><b>max-results=10</b> indicates the maximum number of posts that we will be reading from the feed, beginning from the one that we have set up before in the start-index=1. This number always needs to be equal or greater to what we should see later and what it does is to set the number of posts that will be shown in the gadget. The easiest way would be to put 500 in order not to fail, but the higher the number is, the longer this gadget will take to load, so it's better to adjust to what we need to show.<br /><br />Finally, here are some other script parameters: <ul><li><b>title: 'Latest Posts'</b>, is the widget's title that appears on top.</li><li><b>numResults: 10</b>, number of posts that will show in the list.</li><li><b>displayTime: 5000</b>, the delay time between posts in the rotator (in milliseconds).</li><li><b>hoverTime: 500</b>, minimum time for an item in the list to be displayed at the top.</li></ul>If you want to hide the list and show only the posts, change this part: <br /><blockquote class="tr_bq">.gfg-list {<br />position : relative;<br />overflow : hidden;<br />text-align : left;<br />}</blockquote>To: <br /><blockquote class="tr_bq">.gfg-list {<br />display:none;<br />}</blockquote>If you want to display only the list, change this: <br /><blockquote class="tr_bq">.gfg-entry {<br />background-color: #FFFFFF;<br />width : 100%;<br />height : 9.2em;<br />position : relative;<br />overflow : hidden;<br />text-align : left;<br />margin-top : 3px;<br />}</blockquote>To: <br /><blockquote class="tr_bq">.gfg-entry {<br />display: none; } </blockquote><br />Step 4. Save the gadget and you're done adding the recent rotating post widget with excerpt in Blogger.

Recent Rotating Post Gadget with Excerpt For Blogger

This JavaScript code will display the latest posts of any feed, the difference being that it has two parts which can be used individually or...

Read more »

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Sometimes we want to have everything organized, so that our readers can find topics of interest more easily. To accomplish this, instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUmztHnlugt9gz8ifAnDx2LpWizTf38XFX9zyq7wqQkGne4pb27QlmQ0Oywkj3b37lWDVOif9JXk3Dh4uRb02AYuEaAJriyHDALJh-fSJ1OUFqe_B03mXABNFmDHeSNy9fcs0l01XwKuq/s1600/recent-posts-widget-by-labels-for-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="recent posts by labels" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUmztHnlugt9gz8ifAnDx2LpWizTf38XFX9zyq7wqQkGne4pb27QlmQ0Oywkj3b37lWDVOif9JXk3Dh4uRb02AYuEaAJriyHDALJh-fSJ1OUFqe_B03mXABNFmDHeSNy9fcs0l01XwKuq/s1600/recent-posts-widget-by-labels-for-blogger-blogspot.png" title="Recent Posts widget by labels or category for Blogger" width="400" /></a></div><br />To add this recent posts widget for labels or categories in a Blogger blog, follow the next steps:<br /><br /><h2>Recent Posts with Thumbnails Sorted by Labels</h2><span style="color: #3d85c6;"><b>Step 1.</b></span> From your <a href="https://www.blogger.com/home" rel="nofollow" target="_blank">Blogger Dashboard</a>, go to 'Template' and click the 'Edit HTML' button<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLA2xqRpKDmu9DNin2il14ygiFmHb-8UFXoU-kM-ZGnk0dPslBj5AkipAi_P3QFWHaeJE1fQlwQ6XEdGLhJJOAHupByoWTM35IbfnHusM5x7TwcrgRVZx7mSGiVS9Db6ccU92aAVpBwRr/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLA2xqRpKDmu9DNin2il14ygiFmHb-8UFXoU-kM-ZGnk0dPslBj5AkipAi_P3QFWHaeJE1fQlwQ6XEdGLhJJOAHupByoWTM35IbfnHusM5x7TwcrgRVZx7mSGiVS9Db6ccU92aAVpBwRr/s1600/blogger-template-edit-html.png" width="320" /></a></div><br /><span style="color: #3d85c6;"><b>Step 2. </b></span>Click anywhere inside the code area and search (CTRL + F) for this piece of code:<br /><blockquote class="tr_bq">]]></b:skin></blockquote><br />Just above <span style="background-color: yellow;">]]></b:skin></span>, paste this CSS style:<br /><blockquote class="tr_bq">/* Recent posts by labels<br />--------------------------------- */ <br />img.label_thumb{<br />float:left;<br />margin-right:10px !important;<br />height:65px; <span style="color: #38761d;">/* Thumbnail height */</span><br />width:65px; <span style="color: #38761d;">/* Thumbnail width */</span><br />border: 1px solid #fff;<br />-webkit-border-radius: 10px;<br />-moz-border-radius: 10px;<br />border-radius: 10px;<br />-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);<br />-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);<br />box-shadow: 0 1px 1px rgba(0, 0, 0, .4);<br />}<br /><br />#label_with_thumbs {<br />float: left;<br />width: 100%;<br />min-height: 70px;<br />margin: 0px 10px 2px 0px;<br />padding: 0;<br />}<br />ul#label_with_thumbs li {<br />padding:8px 0;<br />min-height:65px;<br />margin-bottom:0px;<br />border-bottom: 1px dotted #999999;<br />}<br /><br />#label_with_thumbs li{<br />list-style: none ;<br />padding-left:0px !important;<br />}<br /><br />#label_with_thumbs a { text-transform: uppercase;}<br />#label_with_thumbs strong {padding-left:0px; }</blockquote><span style="color: #3d85c6;"><b>Step 3.</b></span> Now try to find this tag: <br /><blockquote class="tr_bq"></head></blockquote>... just above <span style="background-color: yellow;"></head></span> add this script:<br /><blockquote class="tr_bq"><script type='text/javascript'><br />//<![CDATA[<br />function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}<br />if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)<br />{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!="")){thumburl=d;}else thumburl='<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYA8zx9YoifqSHlBOQPFHkkPwsoedGEyunkO6IzLnd1Fg7mkXcYLJoV76BFrwx-HDr0Y0pHoFL03ph5-I_pXEeluE1TiGrs_N3mt0pQQeMTaL8Ptn7DE8-gRZJv_Ul_1GoLxHY22Nm_iI/s1600/picture_not_available.png</span>';}<br />var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)<br />document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}<br />else<br />if("summary"in entry){var postcontent=entry.summary.$t;}<br />else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}<br />else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}<br />var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}<br />if(showcommentnum==true)<br />{if(flag==1){towrite=towrite+' | ';}<br />if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}<br />if(displaymore==true)<br />{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}<br />document.write(towrite);document.write('</li>');if(displayseparator==true)<br />if(i!=(numposts-1))<br />document.write('');}document.write('</ul>');}<br />//]]><br /></script></blockquote><i><b>Note: </b>to add your own pic for the posts with no thumbnail, replace the image url in blue with your own</i><br /><br /><span style="color: #cc0000;"><b>Update!</b></span> For a better image resolution add this script above the <span style="background-color: yellow;"><b></body></b></span> tag:<br /><blockquote class="tr_bq"><script type='text/javascript'>                   <br />function changeThumbSize(id,size){<br />var blogGadget = document.getElementById(id);<br />var replacement = blogGadget.innerHTML;<br />blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");<br />var thumbnails = blogGadget.getElementsByTagName("img");<br />for(var i=0;i&lt;thumbnails.length;i++){ <br />thumbnails[i].width = size; <br />thumbnails[i].height = size; <br />}<br />}<br />changeThumbSize("label_with_thumbs",210);              <br /></script></blockquote>Now Save the template to finish with your changes.<br /><br />So, what we have added, is the CSS to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a HTML/JavaScript gadget:<br /><br /><span style="color: #3d85c6;"><b>Step 4.</b></span> Go to Layout - click on Add a Gadget<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJU2lzoWVeWLCiUefnIuDz5AjTo0tlM9RmbWxvgKUc7PkumWzyFu-Wf9NxMpcWXK1MpP9JSHNZ20pE6aKOxsb45L1APdw6_Rg1Og3SlMFHWgI0bT7UGqg30Ihyx9L4kEIpdso9nC2NKKO_/s1600/blogger-layout-add_a_gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger layout, add a gadget" border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJU2lzoWVeWLCiUefnIuDz5AjTo0tlM9RmbWxvgKUc7PkumWzyFu-Wf9NxMpcWXK1MpP9JSHNZ20pE6aKOxsb45L1APdw6_Rg1Og3SlMFHWgI0bT7UGqg30Ihyx9L4kEIpdso9nC2NKKO_/s1600/blogger-layout-add_a_gadget-how-to.png" title="Recent Posts widget by categories or labels" width="640" /></a></div><br /><span style="color: #3d85c6;"><b>Step 5.</b></span> From the pop-up window, choose the HTML/Javascript widget and paste this script inside the empty box:<br /><blockquote class="tr_bq"><script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <br /><script type="text/javascript" src="/feeds/posts/default/-/<span style="color: #cc0000;">Name-of-the-label</span>?published&alt=json-in-script&callback=labelthumbs"></script></blockquote><br /><b>Note:</b> Where it says <span style="color: red;"><span style="color: #cc0000;">Name-of-the-label</span> </span>should be the name of the label that you want to display, and if your label is case sensitive, like in my example, then you should type it that way.<br /><br />Within the last code, there are these parts which can be customized - change <i>true </i>with <i>false </i>or vice versa:<br /><blockquote class="tr_bq">var numposts <span style="color: #666666;">← Number of posts to display</span><br />var showpostthumbnails <span style="color: #666666;">← Show/hide thumbnails</span><br />var displaymore <span style="color: #666666;">← Show or hide the read more link</span><br />var displayseparator <span style="color: #666666;">← Show/hide separator</span><br />var showcommentnum<span style="color: #666666;"> ← Show/hide the number of comments</span><br />var showpostdate <span style="color: #666666;">← Show/hide the posts dates</span><br />var showpostsummary <span style="color: #666666;">← Show or not the posts summaries</span><br />var numchars <span style="color: #666666;">← Number of posts characters (here you have to change the 100 value)</span></blockquote>Remember that the gadget displays the latest posts from a particular label... therefore, if you want to display the latest posts from other labels, repeat step 5 for each additional category that you want to add.<br /><br />That's it :) Enjoy!

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Sometimes we want to have everything organized, so that our readers can find topics of interest more easily. To accomplish this, instead of ...

Read more »