Advanced Recent Post Widget For Blogger With Thumbnails

Introducing Mega recent post widget for blogger blogs. This Blogspot recent post widget was crafted to serve the need of what you could not archive with a default blogger template.

I have seen premium templates come out with recent post carousels & sliders and I know you must be wondering how to add it to your blog. Worry no more! Blogging Prince has styled this cool recent post widget for you using JSON feed – Super performance and speed.



View Demo
Live Preview

This is the V1 of it, I will be publishing various styles and also will be designing random post widget with similar look and functions. You need widgets like recent post to keep your visitors reading and also to get more page views.

Features of Recent Post Widget

  1. Featured thumbnail image
  2. Post Author
  3. Comment Count
  4. Date Published
  5. Post Labels
  6. Fully Responsive
  7. Fast Loading
  8. Displays post from another blog
  9. Top Notch Customization
  10. Built with pure CSS, JS, and JSON.

How To Install Recent Post Widget in Blogger

In other to make it easy for beginners, I have divided the installation into two methods, the first method for absolute beginners and the second method for advanced bloggers with knowledge of Blogger HTML editor.

Recent Post widget for beginners

Go to layout >> Add Widget >> HTML/JavaScript >> Copy and paste the below code inside the box.

<link href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’/>
<script async=”async” src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>
<style>
.bprecent .iauthorpic{width:17px;height:17px;border-radius:50%;float:none;display:inline-block;margin:0 0 0 0;padding-right:3px;position:relative;top:3px}.bprecent li.node0 .iFeatured{height:350px;overflow:hidden}.bprecent li.node0 .iFeatured a img{width:100%}.bprecent li.node0 a.bptitle{position:relative;top:10px;color:#000;font-weight:700;font-size:20px;padding-right:10px}a.bptitle{color:#444;font-weight:700;font-family:oswald}.bprecent li.node0 span.itag{position:absolute;margin-top:-330px;margin-left:15px}.bprecent .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height:2em;font-family:arial;font-size:11px;border:1px solid #333}.bprecent .itag a:hover{background:#84DB06;border:1px solid #84DB06;color:#fff;text-decoration:none}.bprecent{list-style-type:none}.bprecent li.node0{width:100%;padding:0;border-bottom:1px solid #ddd;margin-bottom:10px}.bprecent li.node1,.bprecent li.node2,.bprecent li.node3,.bprecent li.node4{width:45%;display:inline-block;border-bottom:1px solid #ddd;margin:0 15px 5px 0;padding:0 10px 8px 0}.bprecent li.node0 .iline{font-size:10px;font-weight:bold;padding-top:10px;padding-bottom:10px}.bprecent .icontent{display:none}.bprecent li.node0 .icontent{font-size:14px;font-weight:normal;padding-top:5px;display:block}.bprecent li.node1 .iFeatured,.bprecent li.node2 .iFeatured,.bprecent li.node3 .iFeatured,.bprecent li.node4 .iFeatured{float:left;width:110px;height:80px;margin-right:10px}.bprecent li.node1 .iFeatured a img,.bprecent li.node2 .iFeatured a img,.bprecent li.node3 .iFeatured a img,.bprecent li.node4 .iFeatured a img{width:110px;height:80px}.bprecent{list-style-type:none;padding-left:0!important;margin:0!important}.bprecent .iline{font-size:12px;font-weight:bold;font-family:oswald}.bprecent li.node1 .itag,.bprecent li.node2 .itag,.bprecent li.node3 .itag,.bprecent li.node4 .itag{margin-left:-117px;position:absolute;margin-top:3px;max-width:94px;max-height:24px;overflow:hidden}.bprecent .icomments:before,.bprecent .idate:before,.bprecent .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#999}.bprecent .icomments a:hover{text-decoration:underline}.bprecent .icomments:before{content:&#39;f086&#39;;padding:0 3px 0 7px;color:#84DB06}.bprecent .itotal a{font-family:oswald,arial;font-size:12px;font-weight:normal;color:#0080ff;text-decoration:none}.bprecent .idate:before{content:&#39;f073&#39;;padding-right:3px}.bprecent .iedit:before{content:&#39;f040&#39;}@media (max-width:600px){.bprecent li.node1,.bprecent li.node2,.bprecent li.node3,.bprecent li.node4{width:100%!important}.bprecent li.node0 .iFeatured{height:250px;overflow:hidden}.bprecent li.node0 span.itag{position:absolute;margin-top:-230px;margin-left:15px}}@media (max-width:400px){.bprecent li.node0 .iFeatured{height:210px;overflow:hidden}.bprecent li.node0 span.itag{position:absolute;margin-top:-200px;margin-left:15px}}</style>
<script type=”text/javascript”>
//#################### Default Settings
var ListBlogLink = “http://bloggingprince.com”;
var ListCount = 5;
var ListLabel = “SEO”;
var ChrCount = 145;
var TitleCount = 55;
var ImageSize = 200;
var showcomments = “on”;
var showdate = “on”;
var showauthor = “on”;
var showthumbnail = “on”;
var showlabel = “on”;
var showcontent = “on”;
var showTotal = “on”;

//################ Function Start
function bprecent(json) {
document.write(‘<ul class=”bprecent”>’);
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  “”;
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += “<a href='”+ListBlogLink+”/search/label/”+json.feed.entry[i].category[k].term+”‘>”+json.feed.entry[i].category[k].term+”</a>”;
if(k < json.feed.entry[i].category.length-1)
{ ListTag += ” “;}
}}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == ‘alternate’) {
        break;
      }
    }
ListUrl= “‘” + json.feed.entry[i].link[j].href + “‘”;
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= “<a href='”+json.feed.entry[i].link[j].href+”#comment-form’>”+json.feed.entry[i].thr$total.$t+”</a>”;
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(” “);
ListAuthor=ListAuthor.slice(0, 1).join(” “);
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,””).substring(0, ChrCount);
//################### Date Format
ListMonth= [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m – 1)];                    
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
                         YY = ListUpdate.substring(0, 4);
                        mm = ListUpdate.substring(5, 7);
                         DD = ListUpdate.substring(8, 10);
                         TT = ListUpdate.substring(11, 16);
                         MM = ListMonth[parseInt(mm – 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube.com.*(?v=|/embed/)(.{11})/) != null)
{
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube.com.*(?v=|/embed/)(.{11})/).pop();
 
    if (youtube_id.length == 11) {
        var ListImage = “‘//img.youtube.com/vi/”+youtube_id+”/0.jpg'”;
        }
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace(“/s72-c/”,”/s”+ImageSize+”/”);
ListImage= “‘” + sk.replace(“?imgmax=800″,””) + “‘”;
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[.jpg|.gif|.png]”)/) != null)
{
// Support For 3rd Party Images
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[.jpg|.gif|.png]”)/)[1];
}
else
{
ListImage= “‘http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'”;
}
//################### Printing List
document.write( “<li class=’node”+[i]+”‘ >”);
if (showthumbnail == ‘on’){
document.write(“<div class=’iFeatured’><a  href=”
+ ListUrl+
  “><img src=”
+ListImage+
“/></a></div>”);
}
if (showlabel == ‘on’){
document.write(“<span class=’itag’>”
+ListTag +
“</span>”);
}
document.write(“<a class=’bptitle’ href=”
+ ListUrl+
“>”
+ ListTitle+
“</a><div class=’iline’>”);
if (showauthor == ‘on’){
document.write(“<span class=’iauthor’><img class=’iauthorpic’ src='”+AuthorPic+”‘/>”
+ListAuthor+
“</span>”);
}
if (showcomments == ‘on’){
document.write(“<span class=’icomments’>”
+ListComments +
“</span> “);
}
if (showdate == ‘on’){
document.write(“<span class=’idate’>”
+ M +
” “
+ D +
“</span>”);
}
if (showcontent == ‘on’){
document.write(“<div class=’icontent’>”
+ListContent +
“…</div> “);
}
document.write(“</div></li>”);
}if (showTotal == ‘on’){
document.write(“<div class=’itotal’><span> <a href='”+ListBlogLink+”/search/label/”+ListLabel+”‘>View all <font>”+TotalPosts+”</font> posts in  →  ” +ListLabel+” </a></span></div>”);
}
document.write(“</ul>”);
}
document.write(“<script src='”+ListBlogLink+”/feeds/posts/default/-/”+ListLabel+”?alt=json-in-script&callback=bprecent’></”+”script>”);
//]]>
</script>

Replace bloggingprince.com with the URL of your blog. If your blog is in HTTP also replace https with http.

Customizations

You can display what you and hide what you don’t want.

  1. var ListLabel = “SEO”; – replace SEO with the label of your choice.
  2. var ChrCount = 145;  – Post summary length.
  3. var TitleCount = 55;  – The number of letters to show for post title
  4. var ImageSize = 200;  – Quality and Size of recent post image
  5. var showcomments = “on”;  – replace with “off” to hide comment count 
  6. var showdate = “on”;  – replace with “off” to hide post date
  7. var showauthor = “on”;  – replace with “off” to hide author name.
  8. var showthumbnail = “on”; – replace with “off” to stop displaying image.
  9. var showlabel = “on”;  – replace with “off” to hide post labels
  10. var showcontent = “on”;  – replace with “off” to hide post summary.
  11. var showTotal = “on”; – replace with “off” to remove number of post per label.

More Customizations

If you wish to show recent post for all your blog posts instead of one specific label, follow the steps below to get it done.
Step 1
Remove /-/”+ListLabel+” from the code above.
Step 2
Replace var showTotal = “on”; with var showTotal = “off”;
Step 3
Replace var ListLabel = “SEO” with var ListLabel = “”

Recent Post Widget For Advanced Bloggers

In other to protect yourself against template crash due to errors, first Backup your Blogger template.

The CSS

Go to themes >> Edit HTML >> Using CTRL + F search for </head>.

<style>
.bprecent .iauthorpic{width:17px;height:17px;border-radius:50%;float:none;display:inline-block;margin:0 0 0 0;padding-right:3px;position:relative;top:3px}.bprecent li.node0 .iFeatured{height:350px;overflow:hidden}.bprecent li.node0 .iFeatured a img{width:100%}.bprecent li.node0 a.bptitle{position:relative;top:10px;color:#000;font-weight:700;font-size:20px;padding-right:10px}a.bptitle{color:#444;font-weight:700;font-family:oswald}.bprecent li.node0 span.itag{position:absolute;margin-top:-330px;margin-left:15px}.bprecent .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height:2em;font-family:arial;font-size:11px;border:1px solid #333}.bprecent .itag a:hover{background:#84DB06;border:1px solid #84DB06;color:#fff;text-decoration:none}.bprecent{list-style-type:none}.bprecent li.node0{width:100%;padding:0;border-bottom:1px solid #ddd;margin-bottom:10px}.bprecent li.node1,.bprecent li.node2,.bprecent li.node3,.bprecent li.node4{width:45%;display:inline-block;border-bottom:1px solid #ddd;margin:0 15px 5px 0;padding:0 10px 8px 0}.bprecent li.node0 .iline{font-size:10px;font-weight:bold;padding-top:10px;padding-bottom:10px}.bprecent .icontent{display:none}.bprecent li.node0 .icontent{font-size:14px;font-weight:normal;padding-top:5px;display:block}.bprecent li.node1 .iFeatured,.bprecent li.node2 .iFeatured,.bprecent li.node3 .iFeatured,.bprecent li.node4 .iFeatured{float:left;width:110px;height:80px;margin-right:10px}.bprecent li.node1 .iFeatured a img,.bprecent li.node2 .iFeatured a img,.bprecent li.node3 .iFeatured a img,.bprecent li.node4 .iFeatured a img{width:110px;height:80px}.bprecent{list-style-type:none;padding-left:0!important;margin:0!important}.bprecent .iline{font-size:12px;font-weight:bold;font-family:oswald}.bprecent li.node1 .itag,.bprecent li.node2 .itag,.bprecent li.node3 .itag,.bprecent li.node4 .itag{margin-left:-117px;position:absolute;margin-top:3px;max-width:94px;max-height:24px;overflow:hidden}.bprecent .icomments:before,.bprecent .idate:before,.bprecent .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#999}.bprecent .icomments a:hover{text-decoration:underline}.bprecent .icomments:before{content:&#39;f086&#39;;padding:0 3px 0 7px;color:#84DB06}.bprecent .itotal a{font-family:oswald,arial;font-size:12px;font-weight:normal;color:#0080ff;text-decoration:none}.bprecent .idate:before{content:&#39;f073&#39;;padding-right:3px}.bprecent .iedit:before{content:&#39;f040&#39;}@media (max-width:600px){.bprecent li.node1,.bprecent li.node2,.bprecent li.node3,.bprecent li.node4{width:100%!important}.bprecent li.node0 .iFeatured{height:250px;overflow:hidden}.bprecent li.node0 span.itag{position:absolute;margin-top:-230px;margin-left:15px}}@media (max-width:400px){.bprecent li.node0 .iFeatured{height:210px;overflow:hidden}.bprecent li.node0 span.itag{position:absolute;margin-top:-200px;margin-left:15px}}</style>

Copy and paste the above code, just above the </head> tag.

The External Scripts

I have made use of both FontAwesome icons and Google Font Oswald. If you wish to use these fonts too, simply paste the below codes just below <head>.

<link href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’/>
<script async=”async” src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>

If you already use FontAwesome in your blog, no need to add it again but if not you should add it.

These codes are not optimized for speed and if you wish to add them the proper way, follow the link posts below to get optimized versions of these codes.

Save your template

The JS, JSON and HTML

Go to layout >> Add Widget >> HTML/JavaScript >> Copy and paste the below codes inside.

<script type=”text/javascript”>
//#################### Default Settings
var ListBlogLink = “http://bloggingprince.com”;
var ListCount = 5;
var ListLabel = “SEO”;
var ChrCount = 145;
var TitleCount = 55;
var ImageSize = 200;
var showcomments = “on”;
var showdate = “on”;
var showauthor = “on”;
var showthumbnail = “on”;
var showlabel = “on”;
var showcontent = “on”;
var showTotal = “on”;

//################ Function Start
function bprecent(json) {
document.write(‘<ul class=”bprecent”>’);
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  “”;
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += “<a href='”+ListBlogLink+”/search/label/”+json.feed.entry[i].category[k].term+”‘>”+json.feed.entry[i].category[k].term+”</a>”;
if(k < json.feed.entry[i].category.length-1)
{ ListTag += ” “;}
}}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == ‘alternate’) {
        break;
      }
    }
ListUrl= “‘” + json.feed.entry[i].link[j].href + “‘”;
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= “<a href='”+json.feed.entry[i].link[j].href+”#comment-form’>”+json.feed.entry[i].thr$total.$t+”</a>”;
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(” “);
ListAuthor=ListAuthor.slice(0, 1).join(” “);
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,””).substring(0, ChrCount);
//################### Date Format
ListMonth= [“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m – 1)];                    
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
                         YY = ListUpdate.substring(0, 4);
                        mm = ListUpdate.substring(5, 7);
                         DD = ListUpdate.substring(8, 10);
                         TT = ListUpdate.substring(11, 16);
                         MM = ListMonth[parseInt(mm – 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube.com.*(?v=|/embed/)(.{11})/) != null)
{
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube.com.*(?v=|/embed/)(.{11})/).pop();
 
    if (youtube_id.length == 11) {
        var ListImage = “‘//img.youtube.com/vi/”+youtube_id+”/0.jpg'”;
        }
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace(“/s72-c/”,”/s”+ImageSize+”/”);
ListImage= “‘” + sk.replace(“?imgmax=800″,””) + “‘”;
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[.jpg|.gif|.png]”)/) != null)
{
// Support For 3rd Party Images
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[.jpg|.gif|.png]”)/)[1];
}
else
{
ListImage= “‘http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'”;
}
//################### Printing List
document.write( “<li class=’node”+[i]+”‘ >”);
if (showthumbnail == ‘on’){
document.write(“<div class=’iFeatured’><a  href=”
+ ListUrl+
  “><img src=”
+ListImage+
“/></a></div>”);
}
if (showlabel == ‘on’){
document.write(“<span class=’itag’>”
+ListTag +
“</span>”);
}
document.write(“<a class=’bptitle’ href=”
+ ListUrl+
“>”
+ ListTitle+
“</a><div class=’iline’>”);
if (showauthor == ‘on’){
document.write(“<span class=’iauthor’><img class=’iauthorpic’ src='”+AuthorPic+”‘/>”
+ListAuthor+
“</span>”);
}
if (showcomments == ‘on’){
document.write(“<span class=’icomments’>”
+ListComments +
“</span> “);
}
if (showdate == ‘on’){
document.write(“<span class=’idate’>”
+ M +
” “
+ D +
“</span>”);
}
if (showcontent == ‘on’){
document.write(“<div class=’icontent’>”
+ListContent +
“…</div> “);
}
document.write(“</div></li>”);
}if (showTotal == ‘on’){
document.write(“<div class=’itotal’><span> <a href='”+ListBlogLink+”/search/label/”+ListLabel+”‘>View all <font>”+TotalPosts+”</font> posts in  →  ” +ListLabel+” </a></span></div>”);
}
document.write(“</ul>”);
}
document.write(“<script src='”+ListBlogLink+”/feeds/posts/default/-/”+ListLabel+”?alt=json-in-script&callback=bprecent’></”+”script>”);
//]]>
</script>

replace bloggingprince.com with the URL of your blog. If your blog is in HTTP also change https to http.

Please refer to customizations above to set things according to the way you want it.

Thanks to Mustafa of MyBloggerTricks for creating this awesome blogger widget. He created the JSON and JS part and I used CSS to style up to give you a mega looking recent post widget.

You can visit “Recent Posts Gadget With Avatar, Animated Thumbnails & Labels” for the original recent post widget by MyBloggerTricks.

External Usage

This recent post widget can be republished on any blog/website but due credits and links must be made to this blog and post.

More From Author

Blogging is a creative place to find yourself in and with just the right tools and blogs to follow you will definitely become a successful blogger someday. I have dedicated my time to make blogging easy and fun for my followers and if you wish to be part of them, subscribe to push notification and mail list.

Leave any questions and compliments in the comment box. Please, I no longer reply to queries on FB. Just leave all your questions below.

Related Articles


Leave a Reply

2 Shares