Mar 1, 2017

How I Added beautiful Recent Post Widget In My Blog

Hello, my good readers, today i will be sharing with you a method i used in adding the Recent Post Widget in my blogspot blog .

Adding this Recent Post widget can help to reduce the dependency on email marketing, because you really do not have to send out an email just to let people know you just made new post(s). Instead, it updates automatically for every one to see your most recent updates. After which, you then use the information to design scheduled email newsletters, in other to take advantage of what's often referred to as the "Twitter effect" where readers will always check back on your site for the possibility that new post(s) are available. Without this, you indirectly force readers to actually do the research for new/recent updates or new blog articles thereby, increasing the likely hood for them to leave the site(Blog) and that will definitely be hurting your bounce rate.

Having said this, with this beautiful Recent Post widget, anytime you manage to attract  visitor(s) to one of your post(s), the widget will continue to act as an accessible secondary resource element enabling readers to always navigating around your Blog Articles / Contents. In this way, you avoid having your readers moving over old contents that might have been outdated.

If you are interested in adding this widget to your blogger Blog (Note: it works better with blogger templates but you can also try some third party Templates), kindely follow my process bellow and get it running in your blog. i hope that sounds good?

How to Add Recent Posts Widget on Blogger:

Wants to add the above recent widget style that will look exactly the way th image above looks, 
Just follow the following steps below:

Step 1. Log into your Blogger dashboard and click on your blog

Step 2. Go to "Layout" and click the "Add a gadget" link on the right side

Step 3. From the pop-up window, scroll down and select the  "HTML/JavaScript" gadget:

Step 4. Copy and paste the the beautiful widget code found below inside the  "HTML/JavaScript" gadget

<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<;o++){if("replies"[o].rel&&"text/html"[o].type)var[o].title,[o].href;if("alternate"[o].rel){[o].href;break}}var u;try{$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:""}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 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: 12px; color: #CECECE; margin-top: 10px;" href="" rel="nofollow">Click here to get Recent Posts Widget code</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='' 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;}

Step 5. Hit the "Save" button... and you're done!


Using a recent post widget for Blogger can truly benefit you and improve your skills as a blogger. As you can see, this design can look great on blogspot sites and acts like a progress report for the author. 

If you start to fall behind, the dates on your recent posts, the widget will definitely give you a way out. Always set a schedule and make sure that you are making regular posts on the blog. The post(s) will always be updated automatically on your widget and readers can view this information whenever they want. 

Finally, i encourage you to add the recent post widget for Blogger in your blogspot blog template so that the post(s) will encourage readers to continue reading your posts, thereby increasing the total time a reader spends on your blog.

Hope this works for you. 

Don't forget to share this post, sharing is caring. 

Please kindly use the comment box below to air your view on this post.

If you don't want to miss our updates, Subscribe Here so you get our updates directly to your email. 


Click these buttons to follow LawrenceIfeanyi:

No comments:

Feel free to share your comment(s) via comment box below.

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

We will try to response your comment(s) as soon as possible.

If your comment is unrelated to this post, please drop it through the Contact Us page HERE .

Please DON'T spam.


Post a Comment

Designed by: Nwaonuma Ifeanyi.
Phone No.: (+2348037343364)