Simple,Neat and Clean Recent Posts Widget for Blogger Blog

Searching for Recent Posts Widget for Blogger? 

Here is the Simple,Clean and Neat Responsive Blogger/Blogspot Recent Posts Widgets

Screenshots:

For Recent Posts Widgets with snippets Please follow these steps:

Step1: Goto Blogger Dashboard ---> Layout---> Add a gadget--> HTML/Javascript

Step2: Add the Following Codes on the space given on HTML/javascript. and Save




<div id="hlrpsa">

<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">

</script>

<script>

var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;

</script>

<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">

</script></div>

<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">

<a href="http://wwesnaps.blogspot.com/search/label/Blogger%20Tricks%20and%20Widgets" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://wwesnaps.blogspot.com" title="Recent Posts Widget">wwesnaps</a></div>

<noscript>Your browser does not support JavaScript!</noscript>

<style type="text/css">

#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_p6BCNsLvrn52tuXtCoCIE0G7LDw6Lsds68vyeaN66gaZOVNYcPbi1av0YGEWOuBeMY8m-vRLGek7RyKQe3vBCyR8M3TrfCmNFVx5da33gTjr94JrPTLG_JHgrUfBDM67z8JXcqIZYLDy/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}

#rpdr, #rpdr a {color:#808080;}

#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}

.hlrps a {font-weight:bold; }

.hlrpssumm {}

</style>


Replace your-blog with your blog url

That's All you are Done now!


For Recent Posts Widgets without snippets Please follow these steps:


Step1: Goto Blogger Dashboard ---> Layout---> Add a gadget--> HTML/Javascript

Step2: Add the Following Codes on the space given on HTML/javascript. and Save

 <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://your-blog.blogspot.com/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://wwesnaps.blogspot.com/search/label/Blogger%20Tricks%20and%20Widgets" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://wwesnaps.blogspot.com" title="Recent Posts Widget">wwesnaps</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

<style type=text/css>

#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_p6BCNsLvrn52tuXtCoCIE0G7LDw6Lsds68vyeaN66gaZOVNYcPbi1av0YGEWOuBeMY8m-vRLGek7RyKQe3vBCyR8M3TrfCmNFVx5da33gTjr94JrPTLG_JHgrUfBDM67z8JXcqIZYLDy/s1600/blogger.png ) 0px 0px no-repeat; 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>

Now replace your-blog with your blog url

That's all you are done.. Please do share if you liked it..!