Home
Blogger

Add simple Recent Comment widget Powered by JASON

Add simple Recent Comment widget Powered by JASON
recent comment

Recent comment widget is very useful to display latest comments by Blog readers and author. It is good to see all latest comments in one place rather searching through different post. Those who are focusing on fast loading recent comment widget then this widget is perfect for them. Because in this widget I didn't use any image thumbnail of commentator, as a result this widget will load faster. In addition a simple but beautiful commentator default image has used that makes this simple widget attractive. For installing this JSON recent comment widget please follow the below steps properly.

JSON

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

 <style>
.JASON-Montobbo
{
width: 98%;
margin-left: 7px;
margin-bottom: 7px;
word-wrap:break-word;
float:none;
}
#comment {
font:normal 100% Tahoma,Verdana,Arial,Sans-Serif;
margin:0px 0px;
padding:10px 10px;
color:#000;
border:4px solid #eeeeee;
-webkit-box-shadow:inset 0px 0px 2px #000;
-moz-box-shadow:inset 0px 0px 2px #000;
box-shadow:inset 0px 0px 2px #000;
}
#comment ul {
margin:0px 0px;
padding:0px 0px;
}
#comment ul li {
border-bottom:2px dashed #eeeeee;
padding:3px 0px;
list-style:none;
}
#comment ul li b a,
#comment ul li b a:link,
#comment ul li b a:visited,
#comment ul li b {
color:#333333;
text-shadow:0 1px 1px rgba(0,0,0,0.4);
}
#comment ul li b:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kLdWJbs879GasMfwYI65g1OTw8dUFGSJwcUKZ8q69QJZPtC4wrdWRhbtpBhF7JjH_D8y3dCLvUaVCxO2zRBBLOVSsgQhPcentQeBjLdInf5U66Md3wpIHkDse7OisvvMcfl_9q6Ey8IU/s1600/JSONComment+www.bloggerspice.com.png);
margin:0px 4px 0px 0px;
display:inline-block;
*display:inline;
vertical-align:middle;
}
</style>
<div class="JASON-Montobbo">
<script type="text/javascript">
var numcomment = 5,
    numcharacter = 150,
    home_page   = "http://bloggerspice.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
/* Blogger Quick JSON Search Result by www.bloggerspice.com*/
function displaycomment(json) {
        document.write('<div id="comment"><ul>');
        var entry, urlcomment, contcomment, showcomment;
        for (var i = 0; i < numcomment; i++) {
                entry = json.feed.entry[i];
        if (i == json.feed.entry.length) break;
                for (var k = 0; k < entry.link.length; k++) {
                        if (entry.link[k].rel == 'alternate') {
                                urlcomment = entry.link[k].href;
                                break
                        }
                }
                urlcomment = urlcomment.replace("#", "#comment-");
                if ("content" in entry) {
                        contcomment = entry.content.$t
                } else if ("summary" in entry) {
                        contcomment = entry.summary.$t
                } else {
                        contcomment = ""
                }

                var re = /<\S[^>]*>/g;
                contcomment = contcomment.replace(re, "");
                if (contcomment.length > numcharacter) {
                        contcomment = contcomment.substring(0, numcharacter) + "...";
                }
                document.write('<li>');
                document.write('<b><a rel="nofollow" href="' + urlcomment + '">' + entry.author[0].name.$t + '</a>: </b>');
                document.write('<span class="cont">' + contcomment + '</span>');
                document.write('</li>');
        }
        document.write('</ul></div>');
}
document.write('<scr' + 'ipt src="' + home_page + '/feeds/comments/default?redirect=false&alt=json-in-script&callback=displaycomment"><\/script>');
//]]>
</script>
</div>

Step 5 Now hit the Save button.

Customization

  • Change digit var numcomment = 5, for the number of comments you want to show.
  • Change digit numcharacter = 150,for the number of character you want to show.
  • Replace home_page   = "http://bloggerspice.com/";  with your Blog URL

Now check your Blog and see the JSON powered recent comment widget which is very light weight to load. Thanks

3 comments

  1. nice widget tanx vai image show korle beshi valo hoto - www.esobondhu.com
    • Fast loading ar jonno image option add kori nai.
  2. When you are working on JavaScript, you will see that you need to address internationalization. Let's understand what this means from the front end point of view. Take a look: javascript
Go Up