Recent Post Widget/Code For Blogspot Blogs

Just as you've read in the title of this article, today i will be writing on how you can add recent post widget on your blogspot blog with ease. Let's move on below.

This widget is coded in JavaScript and styled with CSS and it displays the recent post on your blog, showing a snippet of the post along with the title of the post.

How To Add The Recent Post Widget

Head over to your Blogger Dashboard >> Layout >> and on the right or left sidebar you wish to add it and click the "Add a Gadget" link

From the pop-up window, scroll down and click on the "HTML/JavaScript" option

Now 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/><div style="font-size: 10px; float: right;"><a href='http://nobleloaded.blogspot.com/2016/01/recent-post-widgetcode-for-blogspot.html'>[Get This Recent Posts Widget]</a></div></div>

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.

But if you dont understand the code, you can paste it that way to avoid error from editing.