Expandable Recent Comments Widget For Blogger Blog

Have you ever wanted to show the entire contents of comments just like that on your recent comments widget? Now you got it

With this Expandable Recent Comments widget, you can now let your visitors to expand or collapse the text of comments on your recent comments widget. It means that, your visitors won't have to go anywhere to read the entire contents of comments as shown your on recent comments widget.

To expand or collapse the text comments, your visitors will only have to do a click on "Show quote" or "Hide quote", or on the "+/-" icon on the widget.

How To Add The Expandable Recent Comments Widget to Blogger?

It's easy.. You only have to put some pieces of code on your blog through "HTML/Javascript" widget. Below is the code:

<script type="Text/Javascript" language="Javascript">
var tgl=false;
var title_arr = new Array();
var arr=0;
var err = "[err]";
var icon_expand="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16dq2G2_A6r7Yjx1jIibxdAhFXX3Y5I0ZWa_4GlRpmAxu0hAAzCQ_AHxBqy22gbUwf5z-X9HLT_bStPOavrWbmwxqu807_2QJa18b2z9-4VUEji0DlkX_6qZkQAbNYs1Gx4ODeIS-5K_6/s144/Plus-722086.png";
var icon_collapse="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Oc0KlsQz-U-PGXf9enNCCobCNClU9_Pj8h_eZMjtFaPDDTvWOU6Gh9IH0Rju5wbDpeC4Wg_oRfv46pldVr2DaXD5JnNOC-AQftCo8e5mNyOLRPqorSkY7T1H2mC4SyVJJZnHU7VRI7jv/s144/Minus-720511.png";
var maxcomments=15;

function real_posttitle(postid) {
for (var i=0; i < title_arr.length; i++) {
if (title_arr[i][0] == postid) return title_arr[i][1];
}
return err;
}

function showrecentposts(json) {
var numposts = 9999;

for (i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var postid;
var title;

if (i == json.feed.entry.length) break;
// for (var k = 0; k < entry.link.length; k++) {
for (var k = 0; k < 200; k++) {
if (entry.link[k].rel == 'self') {
postid = entry.link[k].href;
postid = postid.substr(postid.lastIndexOf("/") + 1, 100);
}
if (entry.link[k].rel == 'alternate') {
title = entry.link[k].title;
break;
}
}
title_arr[arr] = postid + "&#176;" + title;
title_arr[arr] = title_arr[arr].split("&#176;");
++arr;
}
}

function unfold(el) {
var comid=el.id.substr(8,10);
if (el.src == icon_expand) {
el.src=icon_collapse;
document.getElementById("com_id" + comid).style.display="block";
} else {
el.src=icon_expand;
document.getElementById("com_id" + comid).style.display="none";
}
}

function unfold_quote(el) {
try {
for (var i = 0; i < maxcomments; i++) {
document.getElementById("com_id" + i).style.display="block";
document.getElementById("click_id"+i).src=icon_collapse;
}
} catch(e) {;}
el.value='Show quote';
}

function fold_quote(el) {
try {
for (var i = 0; i < maxcomments; i++) {
document.getElementById("com_id" + i).style.display="none";
document.getElementById("click_id"+i).src=icon_expand;
}
} catch(e) {;}
el.value='Hide quote';
}

function showrecentcomments(json) {
var numcomments = 9999;
var postid;
var i=0;

for (i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
var anonymous=false;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'self') {
postid = entry.link[k].href.split("/");
postid = postid[5];
}
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}

//alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var profilelink = "";
try {
profilelink = entry.author[0].uri.$t;
} catch(e)
{
anonymous=true;
};

var posttitle = real_posttitle(postid);
if (posttitle == err) {
posttitle = linktext.replace(/-/g," ");
}
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var ctime = commentdate.substr(11,5);

var monthnames = new Array();
monthnames[1] = "january";
monthnames[2] = "february";
monthnames[3] = "march";
monthnames[4] = "april";
monthnames[5] = "may";
monthnames[6] = "june";
monthnames[7] = "july";
monthnames[8] = "august";
monthnames[9] = "september";
monthnames[10] = "october";
monthnames[11] = "november";
monthnames[12] = "december";

if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;} else var comment = "";

if (i < maxcomments) {
if (tgl) {tgl=false;var cl="row-a";} else {tgl=true;var cl="row-b";}

document.write('<div class="' + cl + ' row-div"><img id="click_id' + i);
document.write('" style="cursor:pointer;" onclick="unfold(this);"');
document.write('src="' + icon_expand + '" />&nbsp;');

document.write('On ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdyear);
document.write(', at ' + ctime + ', ');
if (anonymous == false) {
document.write('<a href="' + profilelink + '">' + entry.author[0].name.$t + '</a> ');
} else {
document.write(entry.author[0].name.$t + ' ');
}
document.write('commented on <a href="' + alturl + '">' + posttitle + '</a>');

document.write('</div>');

document.write('<div class="comments1" id="com_id' + i + '" style="margin-left:1.3em;display:none;">'+comment+'<\/div>');
}
}
document.getElementById("numcom").innerHTML=i;

}
</script>

<style type="text/css" media="screen">
.row-aa { background: #f2f2f3; }
.row-bb { background: #F8F5F1; }
.row-div {
margin:0px;
padding:5px;
}
.comment-header {
font-size:0.9em;
border:1px solid #E0E0E0;
background-color:#F3F3F3;
padding:4px;
margin-top:10px;
margin-bottom:5px;
}
.comment-box {
margin:0px;
padding:0px;
font-size:0.9em;
height:500px;
overflow:auto;
}
.comments1 {
background: #F3F3F3;
padding:3px;
border-left:1px dashed #A6A6A6;
color: #888888;
font-style: italic;
padding-top:4px;
margin-bottom:5px;
}
.comment-footer {
text-align:center;
font-size:0.9em;
padding:4px;
margin-top:5px;
}
</style>

<div style="text-align: center" class="comment-header">
<input class="comment-button" id="commshowquote" type="button" onclick="if (this.value == &#39;Show quote&#39;) { unfold_quote(this); this.value=&#39;Hide quote&#39;; } else { fold_quote(this); this.value=&#39;Show quote&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show quote"/>
</div>

<div class="comment-box">
<script type="text/javascript" src="http://j-smith-site.blogspot.com/feeds/posts/default?start-index=1&max-results=9999&alt=json-in-script&callback=showrecentposts"></script>
<script type="text/javascript" src="http://j-smith-site.blogspot.com/feeds/comments/default?start-index=1&max-results=9999&alt=json-in-script&callback=showrecentcomments"></script>
</div>

Here to copy
<br/><script type="Text/Javascript" language="Javascript"><br/>var tgl=false;<br/>var title_arr = new Array();<br/>var arr=0;<br/>var err = "[err]";<br/>var icon_expand="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16dq2G2_A6r7Yjx1jIibxdAhFXX3Y5I0ZWa_4GlRpmAxu0hAAzCQ_AHxBqy22gbUwf5z-X9HLT_bStPOavrWbmwxqu807_2QJa18b2z9-4VUEji0DlkX_6qZkQAbNYs1Gx4ODeIS-5K_6/s144/Plus-722086.png";<br/>var icon_collapse="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Oc0KlsQz-U-PGXf9enNCCobCNClU9_Pj8h_eZMjtFaPDDTvWOU6Gh9IH0Rju5wbDpeC4Wg_oRfv46pldVr2DaXD5JnNOC-AQftCo8e5mNyOLRPqorSkY7T1H2mC4SyVJJZnHU7VRI7jv/s144/Minus-720511.png";<br/>var maxcomments=15;<br/><br/>function real_posttitle(postid) {<br/> for (var i=0; i < title_arr.length; i++) {<br/> if (title_arr[i][0] == postid) return title_arr[i][1];<br/> } <br/> return err;<br/>}<br/><br/>function showrecentposts(json) {<br/> var numposts = 9999;<br/> <br/> for (i = 0; i < numposts; i++) {<br/> var entry = json.feed.entry[i];<br/> var postid;<br/> var title;<br/><br/> if (i == json.feed.entry.length) break;<br/>// for (var k = 0; k < entry.link.length; k++) {<br/> for (var k = 0; k < 200; k++) {<br/> if (entry.link[k].rel == 'self') {<br/> postid = entry.link[k].href;<br/> postid = postid.substr(postid.lastIndexOf("/") + 1, 100);<br/> }<br/> if (entry.link[k].rel == 'alternate') {<br/> title = entry.link[k].title;<br/> break;<br/> }<br/> }<br/> title_arr[arr] = postid + "&#176;" + title;<br/> title_arr[arr] = title_arr[arr].split("&#176;");<br/> ++arr;<br/> } <br/>}<br/><br/>function unfold(el) {<br/> var comid=el.id.substr(8,10);<br/> if (el.src == icon_expand) {<br/> el.src=icon_collapse;<br/> document.getElementById("com_id" + comid).style.display="block"; <br/> } else {<br/> el.src=icon_expand;<br/> document.getElementById("com_id" + comid).style.display="none"; <br/> }<br/>}<br/><br/>function unfold_quote(el) {<br/>try {<br/> for (var i = 0; i < maxcomments; i++) {<br/> document.getElementById("com_id" + i).style.display="block";<br/> document.getElementById("click_id"+i).src=icon_collapse;<br/> }<br/>} catch(e) {;}<br/> el.value='Show quote';<br/>}<br/><br/>function fold_quote(el) {<br/>try {<br/> for (var i = 0; i < maxcomments; i++) {<br/> document.getElementById("com_id" + i).style.display="none";<br/> document.getElementById("click_id"+i).src=icon_expand;<br/> }<br/>} catch(e) {;}<br/> el.value='Hide quote';<br/>}<br/><br/>function showrecentcomments(json) {<br/> var numcomments = 9999;<br/> var postid;<br/> var i=0;<br/> <br/> for (i = 0; i < numcomments; i++) {<br/> var entry = json.feed.entry[i];<br/> var alturl;<br/> var anonymous=false;<br/><br/> if (i == json.feed.entry.length) break;<br/> for (var k = 0; k < entry.link.length; k++) {<br/> if (entry.link[k].rel == 'self') {<br/> postid = entry.link[k].href.split("/");<br/> postid = postid[5];<br/> }<br/> if (entry.link[k].rel == 'alternate') {<br/> alturl = entry.link[k].href;<br/> break;<br/> }<br/> }<br/><br/> //alturl = alturl.replace("#", "#comment-");<br/> var postlink = alturl.split("#");<br/> postlink = postlink[0];<br/> var linktext = postlink.split("/");<br/> linktext = linktext[5];<br/> linktext = linktext.split(".html");<br/> linktext = linktext[0];<br/> var profilelink = "";<br/> try { <br/> profilelink = entry.author[0].uri.$t; <br/> } catch(e) <br/> { <br/> anonymous=true;<br/> };<br/> <br/> var posttitle = real_posttitle(postid);<br/> if (posttitle == err) {<br/> posttitle = linktext.replace(/-/g," ");<br/> }<br/> var commentdate = entry.published.$t;<br/> var cdyear = commentdate.substring(0,4);<br/> var cdmonth = commentdate.substring(5,7);<br/> var cdday = commentdate.substring(8,10);<br/> var ctime = commentdate.substr(11,5);<br/><br/> var monthnames = new Array();<br/> monthnames[1] = "january";<br/> monthnames[2] = "february";<br/> monthnames[3] = "march";<br/> monthnames[4] = "april";<br/> monthnames[5] = "may";<br/> monthnames[6] = "june";<br/> monthnames[7] = "july";<br/> monthnames[8] = "august";<br/> monthnames[9] = "september";<br/> monthnames[10] = "october";<br/> monthnames[11] = "november";<br/> monthnames[12] = "december";<br/><br/> if ("content" in entry) {<br/> var comment = entry.content.$t;}<br/> else<br/> if ("summary" in entry) {<br/> var comment = entry.summary.$t;} else var comment = "";<br/><br/> if (i < maxcomments) {<br/> if (tgl) {tgl=false;var cl="row-a";} else {tgl=true;var cl="row-b";}<br/><br/> document.write('<div class="' + cl + ' row-div"><img id="click_id' + i);<br/> document.write('" style="cursor:pointer;" onclick="unfold(this);"');<br/> document.write('src="' + icon_expand + '" />&nbsp;');<br/><br/> document.write('On ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdyear);<br/> document.write(', at ' + ctime + ', ');<br/> if (anonymous == false) { <br/> document.write('<a href="' + profilelink + '">' + entry.author[0].name.$t + '</a> ');<br/> } else {<br/> document.write(entry.author[0].name.$t + ' ');<br/> }<br/> document.write('commented on <a href="' + alturl + '">' + posttitle + '</a>');<br/><br/> document.write('</div>');<br/> <br/> document.write('<div class="comments1" id="com_id' + i + '" style="margin-left:1.3em;display:none;">'+comment+'<\/div>');<br/> } <br/> }<br/> document.getElementById("numcom").innerHTML=i; <br/> <br/>}<br/></script><br/><br/><style type="text/css" media="screen"><br/>.row-aa { background: #f2f2f3; }<br/>.row-bb { background: #F8F5F1; }<br/>.row-div {<br/> margin:0px;<br/> padding:5px;<br/>}<br/>.comment-header {<br/> font-size:0.9em;<br/> border:1px solid #E0E0E0;<br/> background-color:#F3F3F3;<br/> padding:4px;<br/> margin-top:10px;<br/> margin-bottom:5px;<br/>}<br/>.comment-box {<br/> margin:0px;<br/> padding:0px;<br/> font-size:0.9em;<br/> height:500px;<br/> overflow:auto;<br/>}<br/>.comments1 {<br/> background: #F3F3F3;<br/> padding:3px;<br/> border-left:1px dashed #A6A6A6;<br/> color: #888888;<br/> font-style: italic;<br/> padding-top:4px;<br/> margin-bottom:5px;<br/>}<br/>.comment-footer {<br/> text-align:center;<br/> font-size:0.9em;<br/> padding:4px;<br/> margin-top:5px;<br/>}<br/></style><br/><br/><div style="text-align: center" class="comment-header"><br/><input class="comment-button" id="commshowquote" type="button" onclick="if (this.value == &#39;Show quote&#39;) { unfold_quote(this); this.value=&#39;Hide quote&#39;; } else { fold_quote(this); this.value=&#39;Show quote&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show quote"/><br/></div><br/><br/><div class="comment-box"><br/><script type="text/javascript" src="http://j-smith-site.blogspot.com/feeds/posts/default?start-index=1&max-results=9999&alt=json-in-script&callback=showrecentposts"></script><br/><script type="text/javascript" src="http://j-smith-site.blogspot.com/feeds/comments/default?start-index=1&max-results=9999&alt=json-in-script&callback=showrecentcomments"></script><br/></div><br/>

Just click save and check your blog to make sure that the widget is working as you expect. Just don't forget to download the two images and upload on your own host, in case that i delete them you won't get trouble. Also change j-smith-site.blogspot.com with your own blog url, too get rid of the <br/> if you prefer to copy the code from the text box.

If you want, you can make the first script - <script> to </script> - a .js file to then upload it on a server. And, this widget is supposed to be working, so if it's not working then you may want to contact me.

Too, this code does not belong to me anyway, but i won't tell you a source. :)