Recent Blog Posts Widget with Titles, Snippets and Thumbnails

User engagement is one of the most indispensable thing to become a successful blogger. One of our clients asked us for adding recent posts widget to their blogger blog so that the live visitors may see the most recent blog posts in the blog sidebar from any webpage of their blog.

Actually, blogger does not provide a gadget for showing recent blog posts on the sidebar and therefore we have developed a dynamic as well as responsive (adopts all devices) recent blog posts widget for blogger users. One of the main features of this widget is that if your blog posts does not contain any image then your may show any image or photo including your blog logo as recent blog posts thumbnail.

This widget may fetch recent blog posts from any other blogger blog irrespective of your ownership or authorship. In other words, you may display latest posts from another blog to your own blog with the helpof swtRBP widget.

Additionally, following options are available with the swtRBP (SuperWebTricks Recent Blog Posts) widget:

Option-1: You may show only recent blog posts Titles
Option-2: You may display post titles with snippets/excerpts
Option-3: You may decide how many recent posts to be shown upto 500.
Option-4: You may change the characters displays as posts summary.
Option-5: You may show the Posts author name with the published date.

How to add Recent Posts Widget to your Blogger Blog

Step-1: Login to your blogger account and select the blog in which you want to add swtRBP widget.

Step-2: Navigate the template tab of your blog and click on Edit HTML. Then click anywhere in the template editor and you will see a search box at the top right corner of template HTML editor.

Step-3: Find (Ctrl+F) the closing head tag </head> and then paste this JavaScript file just before/above </head> tag.

Step-4: Now, find closing tag of ]]></b:skin> and paste these CSS codes just above/before ]]></b:skin> tag and save the template.

.swtRBP {
width:274px; /* Change the Width of each recent posts box */
height:274px; /* Change the Height of each recent posts box */
background-color: #F7F7F7; /* Change the Background color of each recent posts box */
}
.swtRBP img {
height: 50%; /* Change the width of each recent posts Thumbnail */
width: 95%; /* Change the width of each recent posts Thumbnail */
}
.swtRBP h6 {
font-size: 1em; /* Change the Font size of each recent posts Title */
}
.swtRBP p {
font-size: 0.75em; /* Change the Font size of each recent posts Summary/Snippet/Excerpt */
}
.swtRBP {
padding: 0.5em;
border: 0.0625em solid #00ff00;
margin: 0.25em;
background-color: #F7F7F7;
text-align: center;
float: left;
overflow: hidden;
display: inline-block;
}
.swtRBP a {
text-decoration: none;
text-transform: capitalize;
text-align: center;
font-size: 0.75em;
line-height: 1;
}
.swtRBP a:link {
color: #0000FF;
}
.swtRBP a:visited {
color: #00FF00;
}
.swtRBP a:hover {
color: #FF00FF;
}
.swtRBP a:active {
color: #FF0000;
}
.swtRBP img {
padding: 0.3em;
border: 0.1em solid #fff;
margin-top: 2px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
overflow: hidden;
}
.swtRBP span {
color:#ff0000;
font-size: 0.75em;
font-style:italic;
}
.swt-rights {
clear: both;
}
.swt-rights img {
float:right;
}
.swtRBP h6 {
margin: 0.5em 0 0;
overflow: hidden;
padding: 0;
line-height:1.1;
letter-spacing: 0;
vertical-align: middle;
}
.swtRBP p {
font-family: "Times New Roman", Times, serif;
word-wrap: break-word;
line-height: 1.1;
border-top: 1px solid #eaefe6;
color: #141514;
margin: 0.2em;
overflow: hidden;
padding: 0.4em;
text-align: justify;
}

You may change the above CSS codes according to your need and preference. If you are using Responsive blogger template then this widget will automatically adopts your users device. However, you may also use advanced media screen CSS codes so that your recent blog posts fits for your responsive theme. For example, we have added the following media screen CSS codes for AUBSP: