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&alt=json-in-script&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&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>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
Post a Comment