Sunday, April 28, 2013
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://lh3.googleusercontent.com/-KPQu6NIPilE/UXsdSgYF02I/AAAAAAAAFRY/wymkPoZkMmk/s144/Plus-722086.png";
var icon_collapse="https://lh3.googleusercontent.com/-hjQlrsZ7Gc0/UXsdSVuOYsI/AAAAAAAAFRI/iJ1faB-USEE/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


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. :)

1 comments:

  1. Củ tam thất tươi có tác dụng chữa trị bệnh gì ?Củ tam thất được chia làm 2 loại đó là tam thất tươi và tam thất khô.
    Hình ảnh và công dụng của cây cỏ seo gà xẻ nửaCây cỏ seo gà xẻ nửa là loại cây như thế nào, có công dụng gì mà được nhiều người tìm
    Cây cát lồi có công dụng trị bệnh gì?Xung quanh ta có rất nhiều loại cây mọc hoang nhưng chúng ta không biết rằng đó là một loại cây thuốc quý giá và cây cát lồi là một trong những loại cây mà chúng tôi muốn giới thiệu đến các bạn.
    Trái bồ kết có tác dụng gì, bán ở đâu ?Trái bồ kết có tác dụng gì, bán ở đâu ?
    Cây thiên niên kiện có tác dụng chữa bệnh gì ?Thiên niên kiện là loại cây mọc hoang ở nhiều nơi vùng quê, có người còn sử dụng cây để trang trí làm cây cảnh trong nhà.
    Cây thiên niên kiện là cây gì, mua ở đâu?Chế biến cây thiên niên kiện thành thuốc cũng khá đơn giản, sử dụng rễ của cây đem phơi hoặc sấy khô sau đó thái lát mỏng đêm ngâm với rượu thành thuốc dùng xoa bóp khi đau nhức hoặc có thể phối hợp với thuốc khác làm thành bột dùng để uống.
    Cách ngâm rượu củ thiên niên kiệnĐây là loại cây thuộc họ ráy Araciae nhiều người hay gọi là củ ráy rừng mọc nhiều ở vùng quê đặc biệt vào mùa mưa.
    Đông trùng hạ thảo Aloha có tốt không, giá bao nhêu?Có thể thấy sản phẩm đông trùng hạ thảo Aloha có nhiều công dụng thiết thực để chăm sóc sức khỏe.
    Đông trùng hạ thảo Hàn Quốc dạng nước có tốt không, giá bao nhiêu?Trong đó, sản phẩm đông trùng hạ thảo Hàn Quốc dạng nước rất được ưa chuộng, đây là loại dung dịch màu vàng nhạt, vị chua chua, ngòn ngọt, lại rất tốt cho sức khỏe.
    Đông trùng hạ thảo nhật bản có tốt không giá bao nhiêu ?Hầu hết chúng ta, nhất là những cặp đôi trẻ và khoẻ mạnh đều nghĩ rằng chúng ta có thể thụ thai tự nhiên và sinh con khi chúng ta muốn. Nhưng không phải lúc nào cũng đơn giản như vậy
    Đông trùng hạ thảo của mỹ có tốt không giá bao nhiêu ?Nếu không biết điều này, bệnh tình sẽ trở nên trầm trọng hơn, thậm chí có thể gây tổn thương thần kinh ung ương, ung thư da hay tử vong.

    ReplyDelete