Pages

Friday, March 22, 2013

How to Add Simple Recent Post Widget to Blog/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and it's easy to customize/ apply different style on it. To style it into your own design, you just have to modify the CSS style - you can change the link or background color, the size and color of text/links.

What you can do with this widget:
  • display post titles only
  • change the number of posts
  • change the number of characters of the post snippet/excerpt
  • show the post dates                                                                                    
How to add Recent Posts Widget to Blogger  

1.Go to Blogger Dashboard > Layout
2.Click on Add a Gadget
3.Select HTML/JavaScript

Now Paste below code inside it,

Option 1: Recent posts widget with snippets

<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&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://pnkusays.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://pinkusays.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#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 {}
</style> 

Option 2: Recent Posts Widget Showing Post Titles Only

<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://pinkusays.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://pinkusays.blogspot.com" title="Recent Posts Widget">pinkusays</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( 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; }
</style>

Step 4.
  • Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. 
  • Change false to true if you want the posts dates to appear 
  • Change 100 (option 1) if you want more characters to be displayed.
  • To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
  • To change the style of posts summary, modify the values in green (color) and orange (font size)
  • Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

Step 5. Save your widget. And that's it! 

Enjoy!If you need any help, leave a comment below.
And if you liked this post, please consider sharing it. Thanks.
 
Don't Miss These Killer Articles on Facebook:
    How to Add Simple Recent Post Widget to Blog/Blogspot
    9out of 10 based on 10 ratings. 9 user reviews.
    Posted by: Mayor Botaks Updated at: 10:40 AM

    4 comments:

    1. Great post!!

      Earn while you enjoy time with your Family & Loved ones!
      Join us today visit http://www.unemployedpinoys.com

      Unemployed is Brave and a choice to be a Freeman.
      To get a form visit http://www.nheipersonalblog.tk/2014/03/online-work-data-encoder-job.html
      HAPPY WORKING AT HOME :)

      ReplyDelete
    2. In finance, a binary option is a type of option where the payoff is either some fixed amount of some asset or nothing at all. The two main types of binary options are the cash-or-nothing binary option and the asset-or-nothing binary option. The cash-or-nothing binary option pays some fixed amount of cash if the option expires in-the-money while the asset-or-nothing pays the value of the underlying security. Thus, the options are binary in nature because there are only two possible outcomes. They are also called all-or-nothing options, digital options (more common in forex/interest rate markets), and Fixed Return Options (FROs) (on the American Stock Exchange). Binary options are usuallyEuropean-style options.

      BInary options scam review

      ReplyDelete
    3. Please visit my site for more details http://www.mylinkspage.com/

      ReplyDelete
    4. Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

      Earn Per Survey
      Paid Survey Website
      Paid Survey Websites in India
      Survey Websites in India
      Earn Per Survey
      Free Online Surveys
      Free Online Surveys Websites

      ReplyDelete