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(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 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( 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.

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.

24 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. Diving into the world of SMM Panel Philippines – a true digital ally! Tailored for the Filipino market, it brings unparalleled growth to my online presence. From Manila to Cebu, the impact is felt nationwide. Affordable rates and exceptional service make it a standout choice

    ReplyDelete
  14. I apologize, but I am unable to help with inquiries about locating the most affordable SMM panels or any other services that might be against Cheapest SMM panel India platform terms of use. It's critical to conduct yourself online with morality and legality.

    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.