YouTube style recent post widget for blogger

One of my friends ask me to make a widget for a recent post but I do not get time to make this. But someone makes a widget to him. The person's name is AnuTrickz. So this article 90% shout out goes to AnuTrickz. So let's follow this step to add this widget.

DEMO

Fast let goto your widget section and add an HTML/Javascript widget and then add the below code on the widget and save.

<script>
var ListCount = 5; 
var ListLabel = ""; 
var ChrCount = 45; 
var TitleCount = 100; 
var ImageSize = 200; 
var showcomments = "off"; 
var showdate = "on"; 
var showauthor = "on"; 
var showthumbnail = "on"; 
var showlabel = "off"; 
var showcontent = "off"; 
var showTotal = "off";
//################ Function Start 
function relatedlist(json) { 
document.write('<ul class="relatedlist">'); 
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='/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(/.*?:\/\//g , "//").replace("/s72-c/","/s"+ImageSize+"/"); 
ListImage= "'" + sk.replace(/.*?:\/\//g , "//").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/AVvXsEgzvyMSZOD3FMjAIWIJAQANLB4c2715MB5jw861O0e-7vrY-ESXez7ItS1LvTwZILq5h0GcbZB1J-Tm1ucL_kH-26QplcrtkROdTTNanL97V79BW69apPAm9yrR9yuCmG8YZkk2eAU7aMk/s1600/bungfrangki_no_image_340.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='/search/label/"+ListLabel+"'>View all <font>"+TotalPosts+"</font> posts in  &#8594;  " +ListLabel+" </a></span></div>"); 
} 
document.write("</ul>"); 
}
document.write("<script src='/feeds/posts/default?alt=json-in-script&callback=relatedlist'></"+"script>");</script>

<style>
/* Recent Posts Gadget By AnuTrickz */ 
.relatedlist {list-style-type:none;overflow:hidden; margin:0 auto; padding:0;max-width:500px} 
.relatedlist li {margin:0 auto 10px auto; clear:both; color:#666; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative;line-height:1.4em;} 
.relatedlist li:last-child{margin:0}
.relatedlist li a { color:#666; text-decoration:none} 
.relatedlist i{color:#999; padding-right:5px; } 
.relatedlist .iline{line-height:1.2em; margin-top:3px;} 
.relatedlist .icontent{line-height:1.5em; margin-top:5px;} 
.relatedlist div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; } 
.relatedlist .mbttitle {font-size:13px; color:#000; font-weight:normal;margin:5px auto; text-decoration:none;display:block} 
.relatedlist .mbttitle:hover, .relatedlist .itotal a:hover  {color:#ff6f00; text-decoration:none;} 
.relatedlist .iedit a{text-decoration:none; color:#999; cursor:pointer} 
.relatedlist .iedit:before, .relatedlist .iauthor:before, .relatedlist .itag:before, .relatedlist .icomments:before, .relatedlist .idate:before, .relatedlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;} 
.relatedlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%; 
float: none; display: inline-block; margin:0; padding-right:3px; position:relative; top:3px;} 
.relatedlist .itag{color: #fff;position: absolute;left: 7px;top: 12px;display: inline-block;} 
.relatedlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:uppercase;font-size: 8px!important;letter-spacing:1px;display:none} 
  .relatedlist .itag a:first-child{display:block}
.relatedlist .itag a:hover{background:#000; color:#6bb7e2; text-decoration:none;} 
.iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;} 
.iFeatured a {padding:0 7px 0 0;display: block;margin:5px auto 0} 
.iFeatured img{width:135px;height:100%;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0.99em} 
.iFeatured:hover img{ opacity:1;} 
.relatedlist .icomments a{color:#0080ff;font-size:12px;} 
.relatedlist .icomments a:hover{text-decoration:underline} 
.relatedlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;} 
.relatedlist .idate:before {content:'\f073';padding-right:3px} 
.relatedlist .iedit:before {content:'\f040';} 
.relatedlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;} 
.relatedlist .itotal {color:#333;  padding:5px 0px; } 
.relatedlist .itotal a {font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none} 
.relatedlist .itotal span:before {content:'\f07c';} 
.relatedlist .itotal span font {padding:0px 3px; color:#333;font-size:15px; font-weight:bold} 
span.idate {float: right; padding-top: 10px}
span.iauthor{padding-top:5px;font-size: small}
  </style>

All done... I hope you enjoy YouTube style recent post widget for blogger article