his Recent Posts widget will show not only post titles but also post excerpts or snippets on your blog.
What you can do with this widget:
- display post titles only
- change the number of posts
- change the number of characters of the post snippet/excerpt
- show the post dates
See the screenshot below:
How to add Recent Posts Widget to Blogger
1. Log in to your Blogger Dashboard >> go to Design >> Add a Gadget >> choose HTML/JavaScript
2. Choose & Copy the code of 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="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a
href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html"
target="_blank" title="Grab this Recent Posts Widget">Recent Posts
Widget</a> by <a href="http://ozyl0calhost.blogspot.com"
title="Recent Posts Widget">ozyl0calhost.blogspot.comr</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAf39at6VHeSDkYa-7tgaspGka6sQksvuBzXZoUsbQRdI-06jPjkbGAJszQJCQI3EGp0RVs4Cw6QXJFyZ9TvOv44_OCa6sUK2nqnsisW_Ugo_EtqISP7iyxWaXyRGhgKok2e2A8wTigvYI/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 { 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 style="font-family: arial, sans-serif; font-size: 9px;"
id="rpdr"><a
href="
http://ozyl0calhost.blogspot.com/2012/12/simple-recent-post-blogger-by-ozy.html
"
title="Grab this Recent Posts Widget" target="_blank">Recent Posts
Widget</a> by <a href="ozyl0calhost.blogspot.com"
title="Recent Posts
Widget">Ozy L0caLHost</a></div><noscript>Oops! Make
sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAf39at6VHeSDkYa-7tgaspGka6sQksvuBzXZoUsbQRdI-06jPjkbGAJszQJCQI3EGp0RVs4Cw6QXJFyZ9TvOv44_OCa6sUK2nqnsisW_Ugo_EtqISP7iyxWaXyRGhgKok2e2A8wTigvYI/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;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>
3. Change
5 (option 1) and
10 (option 2) with the number of posts you want to show. Change
false to
true if you want the posts dates to appear, and change
100 (option 1) if you want more characters to be displayed.
Don't forget to change
your-blog
text with the name of your blog or if you have a custom domain change
all the bolded line with your address like in this example:
http://www.your-site.com/feeds/posts/default....
4. Save your widget. That's it!! Enjoy
Posted by: ozy localhost
Ozy L0caLHosT | PersonaL BLog
Updated at :
19.33
Hi, I am the author of Ozy L0caLHost | PersonaL BLog. I am an Interpreter and English Lecturer of a college in Jember, Indonesia as well as a part-time blogger. More
About Me