Recent/Latest Posts Widget For Blogger/Blogspot

Pin It
Recent Posts Widget
You surely have seen on many blogs and websites a Recent Posts Widget in the sidebar that shows the recent or newest or latest posts of the certain blog or website. This widget shows how to write posts title for SEO, date of post and an image of the post and even a snippet of the post. So today we are going to learn how to make this widget for your blog with some very easy steps. So let's start now.



How to add Recent Posts Widget to Blogger


Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link
Step 2. From the pop-up window, scroll down and choose HTML/JavaScript.
Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript: 

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://www.blogtipsuk.com/2014/03/increase-traffic-visitors-to-blog-easily.html" target="_blank" title="Grab this Recent Posts Widget" alt="Increase blog Traffic tips">how to increase blog traffic in blogger</a> by <a href="http://www.blogtipsuk.com/" title="Recent Posts Widget"
alt="Blogger Tips and tricks">SEO Tips and Tricks</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/AVvXsEj0-1tVNqu1lB9droZgWAnXPpaGRggZZ0luRGlzqGaEgZpQxCwxWw4kXmf6rmtFTLX6ga7Rjo7qw92MtS-v4IVZUrDwkrY6F46mcqzI0w7eqX1vnfS2_KN9Zhyphenhyphen-ooA9XpgD3GOedCX3kwwk/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 id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://www.blogtipsuk.com/2014/03/increase-traffic-visitors-to-blog-easily.html" target="_blank" title="Grab this Recent Posts Widget" alt="Increase blog Traffic tips">how to increase blog traffic in blogger</a> by <a href="http://www.blogtipsuk.com/" title="Recent Posts Widget"
alt="Blogger Tips and tricks">SEO Tips and Tricks</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/AVvXsEj0-1tVNqu1lB9droZgWAnXPpaGRggZZ0luRGlzqGaEgZpQxCwxWw4kXmf6rmtFTLX6ga7Rjo7qw92MtS-v4IVZUrDwkrY6F46mcqzI0w7eqX1vnfS2_KN9Zhyphenhyphen-ooA9XpgD3GOedCX3kwwk/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.

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.

PLEASE NOTE:

If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.

29 comments:

  1. Hey everyone check out this website"simplesoftwares4u.blogspot.com"

    ReplyDelete
  2. Nice information about blogger post. i like it

    ReplyDelete
  3. This is very amazing blogs post. I liked it. So thank you very much for this post.
    Visit at http://packersandmoversbangalore.webnode.in/

    ReplyDelete
  4. Thanks for give this wonderful information. I like this...

    ReplyDelete
  5. It is highly informative postfor me. I really enjoyed it. Thankyou
    Best SEO Services

    ReplyDelete
  6. You there, this is really good post here. Thanks for taking the time to post such valuable information. Quality content is what always gets the visitors coming. joyas de plata

    ReplyDelete
  7. Thank you for discussing this very useful article. I heard something new from you. Keep blogging. SEO Dubai

    ReplyDelete
  8. HP service center in delhi Hi, We are an HP laptop service center in Delhi. We provide the best solution for laptop issues or problems. brings you the best service at your home. We have specialist engineers and they have the last 20 years' experience. We deal in all types of problems like hardware up-gradation, software installation, motherboard repairs, etc. visit our website https://www.hplaptopservicecentres.com/hp-service-center-in-delhi/ and call us on 7291903784

    ReplyDelete
  9. Good Blog, Such a Nice Content, Informative for Readers Keep Posting.
    SEO Company Pune
    SEO Pune

    ReplyDelete
  10. I have written blog about tarpaulins. Tarpaulins Protect your Garden and you can also use in your home. for more Read This

    ReplyDelete
  11. Aswindow one of the largest upvc doors manufacturers in delhi and windows manufacturers and suppliers in India. It provides quality uPVC doors and windows with guarantees.

    ReplyDelete
  12. These information are quite good. In Chennai,  best digital marketing services. We offer the best website design along with other digital marketing services.

    ReplyDelete
  13. Choosing a cheap SMM panel could appear like a frugal approach to social media marketing, but there are frequently unintended consequences. Cheap panels could diminish the standard of services, which could damage your brand's reputation and result in phoney interaction and low-quality followers.

    ReplyDelete
  14. As I recognize that some people could be interested in best SMM panel it's crucial to remember that using these services may be against social media networks' terms of service.

    ReplyDelete
  15. Finally, the trulife distribution lawsuit is a sobering reminder of the intricate dynamics that exist in the business world. The TruLife Distribution legal proceedings highlight how crucial it is to conduct business ethically, be transparent, and adhere to legal requirements. The case's development clarifies the possible repercussions for businesses that stray from these guidelines.

    ReplyDelete
  16. While you raise a thought-provoking issue, some details seemed anecdotal or stretched. Readers may be more engaged hearing balanced discussions include multiple expert perspectives rather than opinions presented as fact. We all have biases; recognizing them maintains credibility Tarpaulins. Give credence also to reasonable alternative views for a well-rounded, thoughtful dialogue on complex topics.

    ReplyDelete
  17. When we talk about a private number, we are referring to phone calls where the recipient's phone number is not displayed on the receiver's screen. Instead of revealing the phone number, it appears as "número privado" or "desconocido."

    ReplyDelete
  18. I appreciate the inclusion of credible sources and references. It adds credibility to the information presented. The article is concise yet covers all the essential aspects. It's a time-saver for readers looking for quick insights.
    heavy duty tarpaulin

    ReplyDelete
Emoticons Smileys for Blogger Comments
Show Emoticons >>

PLEASE NOTE:

If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.