Simple Recent Posts Widget For Blogger/Blogspot

The simple recent posts widget for blogger will display the most recent articles with post title and snippets in your blog. The widget is very easy to add to your own blogger sidebar and it is customizable to fit the design of your blog template. Later you will learn how to do it by modifying the CSS of the widget. This is very useful for those blogs that have a traffic coming from search engines. Because not all your visitor will go to your blog homepage to view your new posts specially if they are busy. That's why you need this widget to show your recent posts in your blog sidebar. 

When you implement this recent posts widget to your blog it helps your blog visitors to be informed of your new published articles. This will also help to decrease the bounce rate and increase the page view of your blog. Your SEO will be healthier than before because of the internal backlinks, so what's your waiting follow my tutorial below on how you can add it to your blog.

Related Posts: Advanced Random Posts Widget for Blogger With Thumbnails and Snippets | Floating Social Media Buttons For Blogger | Add Recent comments Widget in Blogger | All In One SEO Pack for Blogger Blogspot

How To Add or Install Recen Pots Widget to Blogger

Step 1: Log in to your Blogger Dashboard > Go to LAYOUT > and click the ADD A GADGET

Step 2: In the pop-up window choose the HTML/JavaScript

Step 3: Select and copy the code below and paste it inside the content box in HTML/JavaScript window. And type Recent Post in the Title.

1st Option: Recent Posts Widget With Title and Snippets

<div id="hlrpsa">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a="...",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in r)var m=r.content.$t;else if("summary"in r)var m=r.summary.$t;else var m="";var w=/<\S[^>]*>/g;if(m=m.replace(w,""),document.write('<div class="rctitle">'),standardstyling&&document.write("<br/>"),document.write(i),1==showpostdate&&document.write(" - "+l[parseInt(o,10)]+" "+c+" "+u),document.write('</div><div class="rcsumm">'),1==showpostsummary)if(standardstyling&&document.write(""),m.length<numchars)standardstyling&&document.write("<i>"),document.write(m),standardstyling&&document.write("</i>");else{standardstyling&&document.write(""),m=m.substring(0,numchars);var g=m.lastIndexOf(" ");m=m.substring(0,g),document.write(m+a),standardstyling&&document.write("")}document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("")}
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-name-goes-here.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="http://whowantstuffs.blogspot.com/2015/11/simple-recent-posts-widget-for-blogger-blogspot.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.rctitle a{color:#000000;text-transform:capitalize;font-size:13px;}#hlrpsa {color: #999999; font-size: 11px;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;}
</style>

2nd Option: Recent posts Widget With Title Only 

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 10;var showpostdate = false;var standardstyling = true;</script><script src="http://your-blog-name-goes-here.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="http://whowantstuffs.blogspot.com/2015/11/simple-recent-posts-widget-for-blogger-blogspot.html" rel="nofollow" >Recent Posts Widget</a><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}</style>

Widget Customization

• In 1st option change "5" and in 2nd option change "10" with the number of posts that you want to display.
• If you want the date of the posts to appear change "false" to "true".
• In 1st Opion change the "100" to display more or less character in the nippets.
• To change the summary style in 1st option change the value of [color: #999999; font-size: 11px;]
• To change the color and font size of the links from 1st & 2nd option, modify these codes  {color: #0B3861; font-size: 13px;} 
• Replace the http://your-blog-name-goes-here.blogspot.com with the URL address of your own blog. Be carefull for two forward slash // at the end of the URL before feeds it should be one forward slash / only.

Step 4: After you paste the code above, don't forget to hit the SAVE button :)

Also Read: How To Add Scroll Bars on Blogger Blockquote | Add Elegant Page Loading Effect to Blogger | How To change the Favicon on Blogger | Create Rollover Image effect in Blogger | Ads Code Parser

Final Words!

I hope that you successfully add this simple recent post widget to your blog. Look at your page view next day it should increase a little bit. If you have problem installing and customizing this widget, you can ask me to help you at the comment section. If you like my tutorial a simple thank you is very appreciated! That's all guys happy blogging!