Recent Comments Widget Installing the new version of Blogger in 2017

Why is there a new version of Blogger in the title of this article? Because I see many bloggers who use multiple systems such comments Comments Disqus version, Comment Comment version of Google+ and Facebook. Perhaps there is many more comments system that can be used to the system who do not the blogger I know.

What are the facilities that you will be when you change the look Widget Recent Comments Blogger 2017 version of this?

Displaying Thumbnail Profile of each commentator.
Link Thumbnail Profile yang Sync to Profile Google+.
Loading Pictures Animation currently.
Displays Title posts.
Displaying Date Comments.
Showing Snippet comment.
Adding Link Read More.
Responsive own views.
Displaying Tooltips as info.

Well after you see some of the features that have been added to the widget to see the latest version of the blogger's comment, let alone what are you waiting for? Widget Display Modification soon you now. Well to modify Widget Recent Comments Blogger version of this, you can follow the steps below.

The first step you need to do certainly get into your blog account and open the Edit HTML tab on the menu template. But before continuing this discussion, I suggest that you back up the template that you use this time yes.

This widget uses jquery function, so please you check first whether this jquery script is already in the template that you are currently using. If the template you're already using a jquery script, then skip this step. but if you have not installed the script template jquery, jquery please you copy the script below and place it before the tag </head>.

The next step, you simply copy the tag below and put this tag right before the code </head>.

Then you simply copy the CSS code below and place it above the code ]]></b:skin>.

/*############Recent Comments Widget##################*/
.mbtcmts{list-style-type:none; overflow:hidden; }
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;}
.mbtcmts i{color:#999; padding-right:4px;}
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 40px}
.mbtcmts .icontent{ display:block; font-family:Georgia; color:#999; font-style:italic; line-height:1.5em;}
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;}
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;}
.mbtcmts span { margin:5px 0px 0px; padding-right:5px;}
.mbtcmts img {border-radius:100%; float:left; margin:0px 20px 20px 0px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; }
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;}
.mbtcmts .ititle {font-family:oswald; font-size:14px; color:orange; font-weight:normal; text-decoration:none;}
.mbtcmts .ititle:hover {color:#666;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;}
.mbtcmts .idate:before {content:'\f017'; color:#999}
.mbtcmts .ipostTitle a {text-decoration:none; color:#999}
.mbtcmts .ipostTitle a:before {content:'\f07c'; }
#mbtloading{
margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:orange;border:1px solid #ffffff}.tooltip span b{background:orange;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;}
.mbtcmts .itotal i {font-style:normal;}
.mbtcmts .itotal span{font-family:oswald; font-weight:normal; color:#333; text-decoration:none}
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }

Save the Template tab and the Layout and make a widget HTML / JavaScript new and place the following JavaScript code.

<div id="mbtloading" ></div>
<script type="text/javascript">
function mbtcmts(json) {
document.write('<ul class="mbtcmts">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m = "";
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
if(json.feed.entry[i].link[2] != null)
{
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
}
else
{ListUrl = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null)
{
var mbt_slit = json.feed.entry[i].link[j].href;
var M_slit = mbt_slit.split("#");
M_slit = M_slit [0];
var K_slit = M_slit.split("?");
K_slit = K_slit[0];
var B_slit = K_slit.split("/");
B_slit = B_slit[5];
B_slit = B_slit.split(".html");
B_slit = B_slit [0];
var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50);
var Link_slit= T_slit.link(K_slit);
}
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
ListAuthor= json.feed.entry[i].author[0].name.$t;
var ListAuth = ListAuthor.split(" ");
var ListAuth = ListAuth.slice(0, 1).join(" ");
ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";
//################### 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)];
//################### Thumbnail Check
if (json.feed.entry[i].author)
{
thumbUrl = json.feed.entry[i].author[0].gd$image.src;
sk= thumbUrl.replace("/s72-c/","/s60-c/");
ListImage= "'" + sk + "'";
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNO0tCMNoQkI3rkAtySO5KWlllG-L-Uo8YEG7q2W5sjEASAtiun_g3NXgD4YRCoOzcL8JwVGEpF5r_BOsv40C1jfXvOtTN1Mt3njVTBzehXP9257KwB9QnpALWq5tIX03L_af21sOWgb0/s200/Icon.png'";
}
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="
+ListProfile+
"><img src="
+ListImage+
"/></a><a class='ititle tooltip' href="
+ListUrl +
"target='_blank'><span><b></b>"
+ListAuth+
" Commented on » "
+ M +
" "
+ D +
", "
+ Y +
"</span>"
+ ListAuthor+
"</a> <i> posted in</i> <span class='ipostTitle'><a class='tooltip' href='"
+K_slit+
"'><span><b></b>"
+T_slit+
"</span></a></span><span class='icontent'>" + ListContent+" ... <a href="+ListUrl+"> » </a></span><div></div></li>";
document.write(listing);
}
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>Komentar Terbaru 2017</i></div></ul>');
}
</script>
<script>
var ListCount = 5;
var ChrCount = 90;
</script>
<script src="http://www.nhtutorials.ga/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>

Save the widget and see the results.

There is some code I've circled above that you can change according to the needs.

ListCount = 5 means the number of recent comments that appear in the widget.

ChrCount = 90 means the number of characters that appear commentator Snippet widget

Thus Tricks Add Recent Comments Widget version of Blogger that I share this time. Hopefully, friend Kang Wira no trouble while practicing this trick. Feel free to leave a comment below if you have questions or encounter an error when copying a code that I shared above.