How to Add Simple Recent Post Widget to Blog/BlogSpot

0
219
This is a simple recent post widget for blogger which is used to display post title with snippets and it is easy to customize for applying different styles using some css codes for example like change the link or background color etc.



How to add Recent Posts Widget to Blogger:


Step 1. Log Blogger Dashboard > Layout and click on Add a Gadget link.
Step 2. Pop-up window choose HTML/JavaScript
Step 3. Select and copy the below code and paste in HTML/JavaScript box.


Option 1: Recent posts widget with snippets:


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

Recent Posts Widget by Mybloggerdesk

Your browser does not support JavaScript!

#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/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 {}

Option 2: Recent Posts With Post Titles Only:

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

Recent Posts Widget by Helplogger

Oops! Make sure JavaScript is enabled in your browser.

#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/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; }

Optimization:

  • Change 5 option 1 and, 10 option 2 which is used to display number of posts.
  • Change false to true if you want to display posts date
  • Change 100 option 1, if you want to display more characters
  • To change font size value in blue color
  • Replace the your-blog text with the name of your blog

LEAVE A REPLY

Please enter your comment!
Please enter your name here