Skip to main content

Recent Post

Kathai Sollukiren Vanga Youtube Channel

Recent/Latest Posts Widget For Blogger/Blogspot






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 the best 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="hlrpsa">

<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">

</script>

<script>

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

</script>

<script
src="http://www.blogtipsuk.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/2013/12/recent-latest-posts-widget-for-blogger-blogspot.html"
target="_blank" title="Grab this Recent Posts Widget" alt="Recent Posts
Widget for blogger">Recent Posts Widget</a> by <a
href="http://www.blogtipsuk.com/" title="Recent Posts Widget"

alt="Blogger and SEO Tips and tricks">Blogger SEO
Tips</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/AVvXsEh5JAlpjnHjknzrdVdQoQuVzlh8F2_nvg4PTH9Gx_BDBaVTNb0Wijyfq2ykYCb_9VJjrmTD2_ke9ix3KmY21LC0ApS5dIhea2n9adjofsIknjw0D_RnwaC2c31GG6_AGvtnwiaozUV5jRWD/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>



Also Read:  How to add Meta Tags keywords in Blogger




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="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 = 1;var showpostdate =
false;var showpostsummary = false;var numchars = 100;var
standardstyling = true;</script>

<script
src="http://www.blogtipsuk.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/2013/12/recent-latest-posts-widget-for-blogger-blogspot.html"
target="_blank" title="Grab this Recent Posts Widget" alt="Recent Posts
Widget for blogger">Recent Posts Widget</a> by <a
href="http://www.blogtipsuk.com/" title="Recent Posts Widget"

alt="Blogger and SEO Tips and tricks">Blogger SEO
Tips</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/AVvXsEh5JAlpjnHjknzrdVdQoQuVzlh8F2_nvg4PTH9Gx_BDBaVTNb0Wijyfq2ykYCb_9VJjrmTD2_ke9ix3KmY21LC0ApS5dIhea2n9adjofsIknjw0D_RnwaC2c31GG6_AGvtnwiaozUV5jRWD/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!


Comments

Popular posts from this blog

Best Blog Directory And RSS Submission Sites

The RSSTop55 is my personal selection of the best blog and RSS directories and search engines that you can find on the web. Over the years, I have spent so much time in updating and refining it that the original list has grown to feature almost 400 directories and search engines, which make up for a truly unique collection of venues that you can use to promote your website. Photo credit: juliengron Why this list is so valuable to you and what are its key advantages compared to other lists dealing with the same topic? The RSSTop55 is updated weekly. New directories are added and I check persistently whether some old directories have headed to the deadpool, changed topic of interest, become a spam site, etc., so that this collection remains always of high-value. All directories are briefly reviewed, so that you can have a quick glance at each one of them and evaluate immediately if a directory is a good promotional venue for your website or business, without spen...

Make Money Online: Anyone And Everyone

If you’re a blogger or a internet marketer or even a beginner then you already know that it’s POSSIBLE to make money online. And what’s interesting about it is that, there are a lot of ways to make money online – from selling ads, e-books, affiliate marketing, freelance writing, podcasting, consulting, designing, coding, etc. So I’m going to highlight some of those online income streams but don’t expect overnight success because creating an income stream requires a lot of work and patience. But if you are a beginner and clueless about where to start then this should help you to focus on that. If you have any trouble with any of these options then leave a comment below or you can e-mail me and I’ll do my best to find the best resource to help you. Make Money Online With Your Website Do you have a website or a blog? If so, then then selling advertisements is the easiest way to make money online. Since there are tons of ad networks on the Internet you have to m...

How To Submit Blogger Sitemap To Google Webmaster Tools

Hi all of my friends, (prem). Today I am telling you how to submit a sitemap to Google Webmaster tools. Before going to today's tutorial, some discussion about Google webmaster. Why you submit a sitemap? This is the question? I will tell you guys how this is effect on your tariff. Bloggers say, “If you are not on Google, you are almost invisible to the world”, yes this is rightly said because if your blog is not submitted to Google Webmaster tools, there is high tendency that all you blog post might not get indexed on Google search engine and this might make you become invisible to the world despite your hard work. My blog almost had 25% increase of traffic from Google after submitting my blog to Google Webmasters Tool, Indexed my new post quickly and improve crawl rate.