Best Recent Posts Widget/Code for Blogger/Blogspot

After sharing Recent Comments Widget some days ago. I'm poised to share yet another modified gadget (Recent Post code) for you.
The below widget for Blogger/Blogspot displays the most recent post on your blog's sidebar, showing a snippet of the last pots along with the title of the post.

This gadget is coded in JavaScript and styled with CSS but there hasn't been added too much, so that it could fit with any color scheme of Blogger template.

How To Add Recent Pots Widget to Blogger Step 1. Log in to your Blogger Dashboard, select your blog and go to "Layout" and click the "Add a Gadget" link:
Step 2. From the pop-up window, scroll down and click on the "HTML/JavaScript" option:
Step 3. Copy and paste the below code in the HTML/JavaScript box:

<div class="recentpoststyle"><script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script> <script> var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts"> </script> <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: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;} li.recent-post-title { padding: 5px 0px;} .recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;} .recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;} .post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;} .recent-post-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><br/><a href='http://alltechtutors.blogspot.com/2016/01/best-recent-posts-widgetcode-for.html'>[Get This Recent Posts Widget]</a></div>

Things to configure: You can change "var posts_no = 5;" to any number of posts to display.
To disable date, you can change "var posts_date = true;" to false.
If you want to disable snippet of words in the post, you can change from "var post_summary = true;" to false.
You can also change the number of letters at "var summary_chars = 80;" to 60, 120, 150 and so on.

Well, if you are an Amateur, you can leave it like that so you don't alter the code. But even though you do, You can always come here to get the code!

Recommended: Nice Recent Comment Widget/Code for Blogger