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.

16 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. 4S IT Solutions offers a full range of IT services to support your business infrastructure outside of your data center, too. From networking to hardware to applications, our team of certified experts will monitor, manage and maintain your IT environment.
    This is our site please visit for further details...
    https://4sitsolutions.com/

    ReplyDelete
  7. Great share!

    I love this bucket list and you know you're right. sand blasting machine manufacturer. We all have the same amount of hours in a day so put them to good use. We all have to start somewhere and your plan is perfect. I understand the way of the attractive to the customer with the products sand blasting machine.

    Sand blasting machines like shot blasting machine, sand blasting machine, and grit blasting machines, Wood Working Machinery Dust Extraction unit, Abrasive Blasting Media and various others. Keep it works and share with us your latest information. My time will come but I know I'm on the right path.

    They are similar to small communities that you own - check them out if you haven't already. It's all got a lot better than before!t. Value that list of thousands but I'll get there.

    Thanks for sharing. Have a nice week ahead.
    Visit at : www.gritblast.co.in

    Also check
    portable shot blasting machine
    portable sand blasting machine
    sand blasting cabinet
    grit blasting cabinet
    shot blasting cabinet

    Regards,
    Ankit Manawat.

    ReplyDelete
  8. Great share!

    I love this bucket list and you know you're right. sand blasting machine manufacturer. We all have the same amount of hours in a day so put them to good use. We all have to start somewhere and your plan is perfect. I understand the way of the attractive to the customer with the products sand blasting machine.

    Sand blasting machines like shot blasting machine, sand blasting machine, and grit blasting machines, Wood Working Machinery Dust Extraction unit, Abrasive Blasting Media and various others. Keep it works and share with us your latest information. My time will come but I know I'm on the right path.

    They are similar to small communities that you own - check them out if you haven't already. It's all got a lot better than before!t. Value that list of thousands but I'll get there.

    Thanks for sharing. Have a nice week ahead.
    Visit at : www.gritblast.co.in

    Also check
    portable shot blasting machine
    portable sand blasting machine
    sand blasting cabinet
    grit blasting cabinet
    shot blasting cabinet

    Regards,
    Ankit Manawat.

    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.