June 13, 2016

How to Create a Recent Post Widget in Blogger

I was kinda shock that Google doesn't have this feature where in fact they already have an in-house Popular Post widget. Anyway, I will teach you how to create a very basic and simple Recent Post Widget for Bloggers.  You can go ahead and customize this widget with the power of CSS.

Update June 12, 2016 - Simple Recent Post Widget Version 2.0


Screenshot

Step 1.  Paste Code 1.0 to a HTML/JavaScript Widget.


Code 1.0
- Replace the codes in Orange with your BLOG URL.

 <div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script><script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://tgsbd.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><div id="rpdr"></div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

<style type=text/css>
#hlrpsb a {color: #666666; font-size: 11px;font-family: verdana;}
#hlrpsb a:hover {text-decoration: none;color: darkorange;}
#rpdr {padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {padding-top:6px;padding-bottom:6px;border-bottom: 1px #cccccc dotted; }
</style>