Notification Bar

Easy way to add a recent comment widget on blogspot for bloggers - by lalemi ayo


It really helpful if you add a recent comment widget to your  website,  it helps your audience to follow up latest comments on your website. They don't have to enter each post to see what comment or reply each person has dropped,  all they need to do is check the recent comments area and the area all depends on where you add the widget to.

How to add recent comment widget on blogger 


Login on blogger.com
Go to layout, go on any place you would like to add  the recent comment to and click on the add  gadgets.

A pop up will be shown with diffrent Gadgets,  locate the HTML/JAVA gadget and add that.






Now copy this code below and paste it in the 
HTML/JAVASCRIPT  box 

CODE:




<style type="text/css">
/*
Widget: Simple Recent Comment Widget for Blogger - Version 1.1
Author: Tien Nguyen
URL: http://sneeit.com/simple-recent-comment-widget-blogger/
*/
a.sneeit-srcbw {
/*item-color*/color: #000000;/*item-color*/
/*border-color*/border-top: 1px solid #dddddd;/*border-color*/
display: block;
padding: 1em 1.5em;
position: relative;
}
.sneeit-srcbw-icon-comment {
    position: absolute;
    left: 0;
top: 1.1em;
}
.sneeit-srcbw-icon-arrow {
/* arrow-icon-color*/color: #2fa3db;/* arrow-icon-color*/
    position: absolute;
    right: 0;
    font-size: 200%;
    top: 50%;
    margin-top: -0.55em;
}
.sneeit-srcbw-credit {
font-size: 90%;
text-align: right;
padding: 1em 0;
/*credit*/display: none;/*credit*/
/*border-color*/border-top: 1px solid #dddddd;/*border-color*/
}
#sneeit-srcbw-exclude {
display: none!important;
}
html[dir="rtl"] .sneeit-srcbw-icon-comment {
right:0;
left: auto;
}
html[dir="rtl"] .sneeit-srcbw-icon-arrow{
left:0;
right: auto;
}
html[dir="rtl"] .sneeit-srcbw-credit {
text-align: left;
}
</style>
<noscript id="sneeit-srcbw-exclude"></noscript>
<script type="text/javascript">
// settings
var sneeit_srcbw_count = 5; // change the number of comments
var sneeit_srcbw_summary_length = 50; // summary length
var sneeit_srcbw_icon_comment = 'fa-comment-o'; // comment icon
var sneeit_srcbw_icon_arrow = 'fa-angle-right'; // arrow icon
_s7GpE = ['link','href','font-awesome','link','text/css','stylesheet','https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css','sneeit-srcbw-exclude','\n','string','undefined','feed','entry','Not found any comment',' ...','','','alternate','self','#','/','#c','<a class="sneeit-srcbw" href="','"><i class="sneeit-srcbw-icon-comment fa ','"></i><span><strong>',':</strong> ','</span><i class="sneeit-srcbw-icon-arrow fa ','"></i></a>','<span class="sneeit-srcbw-credit">Powered by <a href="http://sneeit.com/simple-recent-comment-widget-blogger/" target="_blank">Sneeit</a></span>','<script type="text/javascript" src="/feeds/comments/summary?alt=json-in-script&max-results=','&callback=_fCiE"><\/script>'];var _vHpF=document.getElementsByTagName(_s7GpE[0]);for(var _vLbB=0;_vLbB<_vHpF.length;_vLbB++){if(_s7GpE[1] in _vHpF[_vLbB]&&_vHpF[_vLbB].href.indexOf(_s7GpE[2])!=-1){break;}}if(_vLbB>=_vHpF.length){var _vLbJ=document.createElement(_s7GpE[3]);_vLbJ.type=_s7GpE[4];_vLbJ.rel=_s7GpE[5];_vLbJ.href=_s7GpE[6];document.head.appendChild(_vLbJ);}var _vRqN=document.getElementById(_s7GpE[7]).innerHTML;var _vSbX=sneeit_srcbw_count;_vRqN=_vRqN.trim();if(_vRqN){_vRqN=_vRqN.split(_s7GpE[8]);_vSbX=_vSbX*(_vRqN.length+2);}function _fCiE(json){if(typeof(json)==_s7GpE[9]||typeof(json)==_s7GpE[10]||!(_s7GpE[11] in json)||!(_s7GpE[12] in json.feed)||!json.feed.entry.length){document.write(_s7GpE[13]);return;}var _vQbX=0;for(var _vLbB=0;_vLbB<json.feed.entry.length&&_vQbX<sneeit_srcbw_count;_vLbB++){var _vOlU=json.feed.entry[_vLbB];var _vQjW=_vOlU.author[0].name.$t;var _vRcD=_vOlU.summary.$t;if(_vRqN.indexOf(_vQjW)!=-1){continue;}_vQbX++;if(_vRcD.length>sneeit_srcbw_summary_length){_vRcD=_vRcD.substring(0,sneeit_srcbw_summary_length)+_s7GpE[14];}var _vVgK=_s7GpE[15];var _vVeS=_s7GpE[16];for(var _vIlN=0;_vIlN<_vOlU.link.length;_vIlN++){var _vLbJ=_vOlU.link[_vIlN];if(_s7GpE[17]==_vLbJ.rel){_vVgK=_vLbJ.href;}else if(_s7GpE[18]==_vLbJ.rel){_vVeS=_vLbJ.href;}}if(!_vVgK){continue;}if(_vVgK.indexOf(_s7GpE[19])==-1){_vVeS=_vVeS.split(_s7GpE[20]);_vVeS=_vVeS[_vVeS.length-1];_vVgK+=(_s7GpE[21]+_vVeS);}document.write(_s7GpE[22]+_vVgK+_s7GpE[23]+sneeit_srcbw_icon_comment+_s7GpE[24]+_vQjW+_s7GpE[25]+_vRcD+_s7GpE[26]+sneeit_srcbw_icon_arrow+_s7GpE[27]);}document.write(_s7GpE[28]);}document.write(_s7GpE[29]+_vSbX+_s7GpE[30]);
</script>





Now click on the save button after pasting the codes above.  And we are done , you'll start seeing recent comments from all your  post ,  I set only 5 recent post from the code above , if you wish to increase that,  check the blue highlighted 5 above,  chage the 5 to any number you wish.



Was this helpful to you? Don't forget to share!

Post a Comment

0 Comments