Thursday 19 February 2015

How to add Recent Posts Widget on Blogger Blogs

Recently one of our blog readers requested for a way to add a recent post widget on his blog. Today, I want to explain a simple way to add recent post widget on blogger blogs easily without much ado.
Recent-Posts-Widget-for-Blogger
In this tutorial, am presenting you with two methods that you can use to add a recent post widget on your blogger blogs. The first method is adding manually while the second one is adding using generator. Both methods works very ok, you just have to go with the one that you prefer. Before You
Proceed, read:

<div id="hlrpsb">
<script style="text/javascript" src="http://olusegun-fapohunda-calculator.googlecode.com/svn/citinewstv/recent-post.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://Your-Blog_Address-HERE/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"
></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://www.citinewstv.com/2012/01/recent-post-widget-
for-blogger.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://www.citinewstv.com"
 title="Recent Posts Widget">Citinewstv</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px no-repeat; 
padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style> 

Steps a Simple Recent Post Widget on Blogger

1. Log in to your Blogger Dashboard >> Layout >> Add a Gadget >> choose HTML/JavaScript

2. Choose & Copy the code below into the new HTML/JavaScript and then name it Recent Posts or any name that you like:

3. Click on Save Arrangement.

4. Don’t forget to change the Your-Blog_Address-HERE to your blog address e.g www.technologykween.blogspot.com, You can also change the value of var numposts = 10 to any number of post you want to appear on the recent posts list and finally,you can change false in var showpostdate = false to true if you want the post date to appear on the recent posts list.

No comments:

Post a Comment