Simple Recent Posts Widget For Blogger/Blogspot

The basic late posts gadget for blogger will show the latest articles with post title and bits in your blog. The gadget is anything but difficult to add to your own blogger sidebar and it is adaptable to fit the outline of your blog format. Later you will figure out how to do it by adjusting the CSS of the gadget. This is exceptionally helpful for those web journals that have a movement originating from web crawlers. Since not all your guest will go to your blog landing page to see your new posts uniquely on the off chance that they are occupied. That is the reason you require this gadget to demonstrate your current posts in your blog sidebar. 

When you execute this current presents gadget on your blog it assists your blog guests with being educated of your new distributed articles. This will likewise diminish the bob rate and increment the site hit of your blog. Your SEO will be more advantageous than before due to the inside backlinks, so what's you're holding up take after my instructional exercise underneath on how you can add it to your blog.

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

Final Words!

I trust that you effectively include this straightforward late post gadget to your blog. Take a gander at your online visit following day it ought to expand a tiny bit. On the off chance that you have issue introducing and altering this gadget, you can request that I help you at the remark area. On the off chance that you like mytutorial a basic thank you is extremely valued! That is all folks glad blogging!