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.
<script src="https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtRBP-JavaScripts.js"></script>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:
@media screen and (min-width: 768px) and (max-width: 1100px){
.swtRBP {
width:295px;
height:295px;
margin:0.125em;padding:0.125em;
}
.swtRBP img {
margin:0.0625em;padding:0.125em;
}
}
@media screen and (max-width: 350px){
.swtRBP {
width:200px;
height:100px;
margin:0.0625em;padding:0.0625em;
}
.swtRBP span, .swtRBP img {display:none}
}
NOTE: If you have no knowledge about CSS codes then please fill free to ask us for changing the codes in accordance with your blogger blog.
However, you may download some already customized swtRBP CSS codes and paste it instead of the above default swtRBP CSS codes.
Step-5:
Go to the Layout menu tab of your blogger blog from left sidebar and click on Add a Gadget text link button either from sidebar or anyplace you want to display latest posts. However, you may choose the blogger page/post to show the recent blog posts instead of displaying on the sidebar.
Step-6:
From the open pop-up window, scroll down and choose HTML/JavaScript (add a third-party functionality or other code to your blog) provided by blogger. However, if you have chosen the blog post/page for displaying swtRBP then open the HTML mode instead of compose mode.
Step-7:
Now, paste the following codes into the content field of HTML/JavaScript and after giving a name to the gadget like “Latest Updated Posts” click on save button.
<script style="text/javascript">
var swtRBPnumbers=12;
var swtRBPsnippets=225;
var swtRBPonimage = "http://4.bp.blogspot.com/-qt0jacXZ7cU/VI6veZzjzRI/AAAAAAAAFQk/wmsGtfm6_GM/s1600/Posts-Thumbnail.png";
var swtRBPright=true;
</script>
<script src="/feeds/posts/default?alt=json-in-script&max-results=500&callback=swtRecentBlogPosts"></script>
Customization of swtRBP widget
1) Change the value of swtRBPnumbers from 12 to any number you want to show the recent blog posts.
2) Change the value of swtRBPsnippets from 225 to any number you want to display the characters as posts summary.
3) We have added a default posts thumbnail for posts having no image. However, you may display your own photo/image by changing the image url of swtRBPonimage instead as recent posts thumbnail.
4) If you want to show the recent blogposts from any specified label/category then add this simple code in the middle of the last line just after default and before question sign /-/LabelName so that the last line looks like as shown below.
<script src="/feeds/posts/default/-/LabelName?alt=json-in-script&max-results=500&callback=swtRecentBlogPosts">5) If you want to show recent blog posts from another blogger blog then add the address (http://spsmiter.blogspot.com) of that blog at the beginning of the URL of the last line. If that blog has custom domain then the custom domain ((http://www.aubsp.com)) will be used so that it looks like as shown below.
<script src="http://YourBlogAddress/feeds/posts/default/-/LabelName?alt=json-in-script&max-results=500&callback=swtRecentBlogPosts">However, if you want to customize the swtRBP widget in accordance with your own need then fill free to comment below or contact us for help.