Recent Posts Gadget With Avatar, Animated Thumbnails & Labels

Recent Posts Gadget For  BloggerBlogger Recent Posts Gadget with label support is the backbone behind fancy templates being designed these days. We have covered a detailed full series on how these widgets are coded using Blogger JSON Feeds. Today I will share the most advanced Recent Posts gadget for blogspot blogs unlike shared before. It is not only rich in features but also well optimized, responsive and loads lightening fast. It is a two-in-one gadget that can be used to either display latest posts of your blog or latest posts from a specific label. The logic it uses can also be modified to display Random Posts and Related Posts. All these gadgets will be shared this month inshAllah. These gadgets can be completely customized using CSS and its features can be switched on/off using simple Boolean logic.

If you wish to add animation to this widget please read:

We have covered a comprehensive series on how to use Blogger JSON feed to extract data from your blog feeds and parse the JSON data in JavaScript. If you really wish to code these gadgets yourself, you must read this series where we have covered all A-Z steps of blogger gadget development.

We have already shared an advanced recent posts label widget with featured thumbnails earlier. We will use the same logic to code something more useful and productive. Since most of you requested that the comment and labels links should be clickable. Fortunately all your requests have been fulfilled in this new label gadget.

Today's recent posts widget has some unique features introduced first time online :

  1. Author Avatar - Unique!
  2. Clickable Labels - Unique!
  3. Displays recent posts
  4. Displays recent posts from a specific category/label.
  5. Clickable Comments Count
  6. Custom Date Format - Unique!
  7. Clickable Animated Featured Thumbnails - Unique!
  8. Option to increase or decrease thumbnail Resolution - Unique!
  9. Support for Third-party Images and YouTube thumbnails - Unique!
  10. Title Length is adjustable
  11. Summary Snippet Length is adjustable
  12. Total Posts Count for selected label is displayed at bottom - Unique!
  13. Customizable into different layouts using CSS thanks to different nodal IDs. - Unique!

Why Use Recent Posts Gadget?

By using Recent Posts Gadgets you can showcase latest posts from different labels to give extra exposure to your blog posts. It also helps you to increase pageviews and ultimately improve blog revenue. You can display posts from a specific label or you can simply display recent posts that just got published recently on your blog. You can display this gadget either on your homepage or your sidebar.

Search engine visitors who land on your blog would love to see what are the latest posts published on your blog through this gadget on your sidebar instead of going to the homepage. Thus bringing you more pageviews.

We have used AJAX to display several recent posts gadgets on homepage of COPmo template.

Install Recent Posts Gadget By Label on your Blog

Follow these easy steps to install it on your blogspot blog:

  1. Go To Blogger > Template
  2. Backup your template'
  3. Click "Edit HTML"
  4. Search </head> and Paste the following CSS code just above </head>:


    <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

    <style>
    /*------Recent Posts Gadget By STCnetwork.org--------*/
    .mbtlist {list-style-type:none;overflow:hidden; margin: 10px 0px!important; width:300px; padding:0px!important;}
    .mbtlist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
    .mbtlist li a { color:#666; text-decoration:none; }
    .mbtlist i{color:#999; padding-right:5px; }
    .mbtlist .iline{line-height:2em; margin-top:3px;}
    .mbtlist .icontent{line-height:1.5em; margin-top:5px;}
    .mbtlist div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; }
    .mbtlist .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;}
    .mbtlist .mbttitle:hover, .mbtlist .itotal a:hover  {color:#333; text-decoration:none;}
    .mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
    .mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
    .mbtlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
    float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
    .mbtlist .itag{    color: #fff;position: absolute;left: 7px;top: 8px;display: inline-block;font-size: 11px;width: 130px; height:22px;    overflow: hidden;}
    .mbtlist .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;}
    .mbtlist .itag a:hover{background:#222; color:#eee; text-decoration:none;}
    .iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;}
    .iFeatured a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhicJCd035alhW-RpoxuhSYs6u6OzaMfaMrLlMz15uKu8vWaPQ48E3K5EmA5EejWpRVEyd5p_dCoME5O_S6gULFz7PpnhvOMFh6obXHO5C-iXoxPBjsN6YYx5A-J1UtN78aiEmCIDn4mEo/s100/mbt-bg1.png) 0 0;padding: 7px 7px 8px 7px;display: block;}
    .iFeatured img{width:135px;height:80px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;     border-radius: 2px;}
    .iFeatured:hover img{ opacity:1;   -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
    .mbtlist .icomments a{color:#0080ff; font-family: arial;font-size:12px;}
    .mbtlist .icomments a:hover{text-decoration:underline}
    .mbtlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
    .mbtlist .idate:before {content:'\f073';padding-right:3px}
    .mbtlist .iedit:before {content:'\f040';}
    .mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
    .mbtlist .itotal {color:#333;  padding:5px 0px; }
    .mbtlist .itotal a {font-family:oswald, arial; font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}
    .mbtlist .itotal span:before {content:'\f07c';}
    .mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:georgia; font-size:15px; font-weight:bold}
    </style>

    Make these customizations:

    • To change link color edit #0080ff
    • To change comment icon color edit #84DB06
  5. Next Go To Blogger > Layout
  6. Choose HTML/JavaScript Widget
  7. Paste the following code inside it:

<script type="text/javascript">

//#################### Default Settings
var ListBlogLink = "http://mybloggertricks.com";
var ListCount = 3;
var ListLabel = "SEO";
var ChrCount = 45;
var TitleCount = 66;
var ImageSize = 200;
var showcomments = "on";
var showdate = "off";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
var showTotal = "on";

//################ Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
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= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGBaoO_i2u7kTRZvG6GBbHHO97n5RtxCjYQeBEoyXWIVKquEE5xXh4kgUGZnVBKy5yfkOYCTitIMnhUgO8zZHT7Oa0SN5EEVh5JgdI3KUj66cqgZ7EVuzPXOV_pewp5n0Ydrog0K1Rdfs/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='mbttitle' 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=mbtlist'></"+"script>");
</script>

You can easily choose to show or hide an option using on/off Boolean values. Simple make these settings:

  • Replace http://mybloggertricks.com with your Blog URL.
  • Mention number of posts to display in ListCount = 3;
  • Replace SEO inside ListLabel = "SEO"; with your label/category for which you wish to display recent posts. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar. If your label is "blogging tips" and if you type it as "Blogging Tips" then it wont work. You must make sure that all letters are written in correct cases. 
  • Edit ChrCount = 45; to choose how many characters you wish to display in post description snippet/summary.
  • Edit TitleCount = 66; to choose post title length.
  • You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 150; where the value 150 means that you want your images to be within 150 x 150 pixels in size. Make sure to keep this value close to the image size to ensure website load time is not effected a lot. Since our thumbnail images have a width of about 135px, therefore I have kept the resolution as 150, slightly higher to display images in slightly good resolution.
  • To show an element simply choose on and to hide it choose off. You apply these switch on/off values to these 7 variables: showcomments, showdate, showauthor, showthumbnail, showlabel, showcontent, showTotal 
  • If you want to show recent posts published on your blog and don't wish to display posts from a specific label then simply remove /-/"+ListLabel+" from the code above. Switch off showTotal and also replace ListLabel = "SEO";  with this ListLabel = "";

   8.    Click Save and you are all done!

Full Third Party Thumbnail Support

Our Recent Posts widget has the most robust coding algorithm which makes sure to use any available image from your post whether the image is hosted on your blogger Google album, Picasa or hosted somewhere else. It also has the built-in function to extract thumbnails from your YouTube video iframe. It will automatically display the YouTube thumbnail for a post where you may have embedded a YouTube video.  In case the post contains no image at all, it will display a default image of MBT as shown below:

The image below shows recent posts for this blog.

Recent Posts Gadget with Thirdy Party Image Support

 

Different Ways to Customize Recent Posts Gadget

By simply changing on/off values you can change the entire layout of the gadget. Let me show you some examples:

1 Switching off showcontent and showdate will produce this look:

Recent Posts Label Widget For  Blogger

2 Switching off showcontent, showlabel and showcomments will produce this look:

Display Recent Posts by label With Thumbnails in blogger

3 Switching off showcontent, showthumbnail, showcomments and showlabel will produce this look:

Simple List of Recent Posts With Avatars

4 Switching off showthumbnail, showTotal and showlabel will produce this look:

Recent Posts Gadget With Author Avatars

5 Switching everything on and increasing the width of the class .mbtlist to 350px, will produce this layout:

Blogger Recent Posts Gadget With Thumbnails

 

6 Each "li" tag has its own class (such as .node0, .node1, .node2, etc.) that you can use to customize the look and appearance of each list. By changing these styles you can display recent posts in several interesting layouts such as:

Vertical List of Recent Posts With Large Thumbnail at Top:

Vertical List of Recent Posts Gadget With Animated Thumbnails

Horizontal List of Recent Posts With Large Side Thumbnail:

Horizontal List of Recent Posts Widget With Thumbnails

This is the exact same technique that I used to design COPmo template.

What is Next?

Using the same logic as discussed several times in our JSON series and using the code above, we will create a list of random posts, related posts, sliders, carousels and news tickers. Stay tuned for lots of interesting tutorials. Know that we do not aim at only sharing fancy widgets, our true aim is educating our readers with the best knowledge so that each one of you could code his own gadgets and be the next big web developer.

In our last posts on recent posts widget, we asked how can you modify the code to display posts via a specific label. To which Ehsan Qureshi gave the correct answer and as a result of which I give my token of thanks to him for particpating in the contest and winning a backlink for his blog "Tips Tricks Island". Do visit his blog and give him your feedback. =)

Anyone who can suggest how to modify the above script to display random posts on each page load, will win the next PR5 free link. Your widget must fetch random posts from a blog JSON feed and then display that list. User must see different random posts list each time the page is refreshed. Share this post with your friends who are JSON or JavaScript enthusiast. 

Do share your feedbacks and queries in the comments box below. Let me know if you need any help or assistance. Would love to help! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

30 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. ¿Can I apply different styles to the different widget on the same page?

    ReplyDelete
    Replies
    1. Yes for sure!
      You just need to create different CSS Classes for each widget

      A better approach is to use Ajax which we will share in our coming tutorials

      Delete
    2. Hi, we are waiting for this: ¿Can I apply different styles to the different widget on the same page?

      I can't do that, all my widgets in the same page have the same class: "mbtlist" and diferent node, but the goal is the class. Please help, thanks!

      Delete
  2. wow what a great post Muhammad Mustafa
    thumbs up for you
    really appreciate your work shared on linkedin

    ReplyDelete
  3. Awesome Sir, Thanks for Sharing this Great Widget...

    ReplyDelete
  4. i am exicted to try this new gadgets .thanks for sharing

    ReplyDelete
  5. Awesome widget ..thanks for sharing

    ReplyDelete
  6. Thanks for that widget! I really like this website!
    I have added this widget to my blog and it works very well. But I also had the fancy ribbon backgrounds widget that does not want to work on this recent-posts gadget title. I did add the HTML codes of the ribbon to this title but, I don't know why, it's not working... How can I correct that problem? Thanks for your help!

    ReplyDelete
    Replies
    1. Can you share the URL of the page where you have added this widget?

      May be you have not picked the correct widget ID

      Delete
    2. Sure, it is: http://dansmatetedapprentie.blogspot.com
      The title of the widget is "Articles récents" in the right column. I have modified the ribbon. I think I have the right widget ID (HTML3). And I also add the second section of the codes (with "span") in the HTML3 widget section.

      Maybe I did something wrong adding the recent-post widget? But what?
      Thanks again for your help!

      Delete
  7. There is an word and paste below it but what we have to search

    ReplyDelete
    Replies
    1. just added the missing word. Thank you Kamran for reminding =)

      Delete
  8. It is great, but only works with your own domain. when I replace your domain with mine(lovefortechnology.net) is not working. What could be wrong?

    ReplyDelete
  9. Mοhammad, I found the mistake so all ok,does it work wonderfully

    ReplyDelete
  10. how can i make those posts appearing in horizontal instead of vertical?

    ReplyDelete
    Replies
    1. Edit the style lists by customizing node0, node1 and so on

      Delete
  11. what if I am using the disqus comment? How will I able to show the number of comments? disqus uses this code: http://' + disqus_shortname + '.disqus.com/count.js I hope you can help me. thanks very much

    ReplyDelete
  12. i really appreciate your tutorial...
    you and your team are very clever guys....

    ReplyDelete
  13. There is an word and paste below it but what we have to search
    thiết kế biệt thự đẹp

    ReplyDelete
  14. I want to display the widget with double columns but I didn't understand how I use node function to get that style. Please describe or just give me a demo

    ReplyDelete
  15. Nice one

    Sir please can you post an author box tutorial just like the one on your blog footer. But do it in a different style so that the picture will be above the words not on sidebar.

    ReplyDelete
  16. Mohammed You're awesome, I come here all the time, at least once a day. The web can get lonely after while :-) just wanted to say thanks for making my dream of owning a blog a reality. Thank you!

    ReplyDelete
    Replies
    1. Awesome are people like you who keep us alive. Thank you for being there! :)

      Delete
  17. assalamualaikum Mohammad,

    i really like this, but how about making random post?

    ReplyDelete
  18. Awesome. Just one thing, can I set title below image? Cheers!

    ReplyDelete
  19. i was just looking for this, very nice

    ReplyDelete
  20. HI Mohammad I am your fan.. really too good stuffs.
    i want to make this recent post horizontal look on desktop and verticle on mobile - how i do ?

    ReplyDelete