Sunday, 10 February 2019

Top 5 Stylish And Cool Recent Post Widgets Design for Blogger

Recent post widget for Blogger

The Recent Posts Widget is a widget that shows a collection of recently published articles in the blog sidebar. We can add this widget to a recent post with various types such as thumbnails, simple, and gallery etc. This widget has several advantages for a blog, but it is especially helping regular readers of your blog, they can easily find the latest post on your blog. . This will also help to increase blog page views, and visitors will spend more time on your blog, as well as help to reduce the blog's bounce rate. As we know, bounce rate is an important factor in the SEO point. This widget is not available in Blogger by default, you need to add third party coding, but not every blogger has information about programming languages ​​like CSS, HTML. Javascript, but good news for those people! In this post, I am going to share a collection of recent posts widgets with you and you do not need to write single coding.

How to add recent post widget to your Blogger blog

1. Log in to your Blogger blog and click on Layout.
2. Select HTML / Javascript.
3. After selecting the HTML / Javascript, a pop-up menu appears, paste the code below any of your choice or that fits your blog theme color and save your recent post widget. Click Save and Enjoy.

Recent Post Widget 1
9 Best Recent Post Widget For Blogger Blog

 <script type="text/javascript">   
  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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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>")}   
  </script>   
  <script type="text/javascript">   
  var posts_no = 5;   
  var showpoststhumbs = true;   
  var readmorelink = true;   
  var showcommentslink = 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=showlatestpostswiththumbs"></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>   
  <noscript>Your browser does not support JavaScript!</noscript>   
  <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />   
  <style type="text/css">   
  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}   
  ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}   
  ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}   
  ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}   
  ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}   
  ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}   
  ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}   
  ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}   
  .recent-posts-container a { text-decoration:none; }   
  .recent-posts-container a:hover { color: #222;}   
  .post-date {color:#e0c0c6; font-size: 11px; }   
  .recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}   
  .recent-post-title {padding: 6px 0px;}   
  .recent-posts-details a{ color: #222;}   
  .recent-posts-details {padding: 5px 0px 5px; }   
  </style>   

Recent Post Widget 2
9 Best Recent Post Widget For Blogger Blog

 <div class="recentpoststyle">   
  <script type="text/javascript">   
  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>")}}   
  </script>   
  <script type="text/javascript">   
  var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>   
  <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">   
  </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>   
  <noscript>Your browser does not support JavaScript!</noscript>   
  <style type="text/css">   
  .recentpoststyle {counter-reset: countposts;list-style-type: none;}   
  .recentpoststyle a {text-decoration: none;color: #49A8D1;}   
  .recentpoststyle a:hover {color: #000;}   
  .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;}   
  .recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}   
  .post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}   
  .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;}   
  </style></div>   

Recent Post Widget 3
9 Best Recent Post Widget For Blogger Blog
 <script type="text/javascript">   
  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://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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>")}   
  </script>   
  <script type="text/javascript">   
  var posts_no = 5;   
  var showpoststhumbs = true;   
  var readmorelink = true;   
  var showcommentslink = true;   
  var posts_date = true;   
  var post_summary = true;   
  var summary_chars = 40;</script>   
  <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></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>   
  <noscript>Your browser does not support JavaScript!</noscript>   
  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>   
  <style type="text/css">   
  img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}   
  .recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}   
  ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}   
  ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}   
  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%;}   
  .recent-posts-container a{text-decoration:none;}   
  .recent-post-title {margin-bottom:5px;}   
  .recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}   
  .recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}   
  .recent-posts-details a{color: #777;}   
  </style>   

Recent Post Widget 4


9 Best Recent Post Widget For Blogger Blog
 <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 = 9;   
  var posts_date = true;   
  var post_summary = true;   
  var summary_chars = 80;   
  </script>   
  <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>   
  <noscript>Your browser does not support JavaScript!</noscript>   
  </div>   

Recent Post Widget 5

9 Best Recent Post Widget For Blogger Blog


 <script type="text/javascript">   
  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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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>")}   
  </script>   
  <script type="text/javascript">   
  var posts_no = 5;   
  var showpoststhumbs = false;   
  var readmorelink = true;   
  var showcommentslink = true;   
  var posts_date = true;   
  </script>   
  <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>   
  <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>   
  <noscript>Your browser does not support JavaScript!</noscript>   
  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>   
  <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; float: left;width: 100%;min-height: 70px;margin: 5px 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 35px;}   
  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: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}   
  .recent-posts-container a { text-decoration:none; }   
  .recent-posts-container a:hover{color: #4DACE3;}   
  .post-date {color:#e0c0c6; font-size: 11px; }   
  .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}   
  .recent-post-title { margin: 5px 0px; }   
  .recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}   
  .recent-posts-details a{ color: #888;}   
  a.readmorelink {color: #4DACE3;}   
  </style>   
I hope all the above widgets will be working on your blog. All these widgets were tested and I also provided the full demo which means that all are working properly. However, if you are facing any problems regarding the recent widgets for Blogger, then leave your comment under the comments box.

Keywords :-
stylish recent posts widget for blogger

recent post widget for blogger 2019

popular post widget for blogger

recent posts list for blogger

random post widget for blogger

horizontal recent posts widget blogger

recent post by label widget for blogger

stylish widget for blogger

No comments:

Post a Comment