<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.admin-comment {
background: #F4F4F4;
margin: 4px 4px 4px 0;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED;
}
.admin-comment:hover {
background: #EDEDFF;
border: 1px solid #D0D0FF;
}
.normal-comment {
padding: 3px 3px 0 3px;
margin-right: 4px;
border: 1px solid white;
}
.normal-comment:hover {
background: #F8F8FF;
border: 1px solid #EDEDFF;
padding: 3px 3px 0 3px;
}
.comment-reply-link { font-weight:bold !important; margin-right:1em; }
#comments-block .comment-footer { margin-bottom: 2px; margin-top:0px;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Threaded comments for Blogger v2
// by MS-potilas 2012
// Supports "Blogger threading" (feed) and has easy install.
// See http://yabtb.blogspot.com/2012/01/blogger-threaded-commenting-hack-v2.html
//
// config:
var maxThreadingLevels = 999; // limit to 2 to get Blogger-like threading; 3-4 is good, too
var useBloggerThreading = true; // read Blogger threading information from feed
var preferBloggerThreading = true; // prefer Blogger threading over @nick threading
var threadIndent = 43; // pixels/level
var replyCommentText = "Reply";
var replyToUser = "Reply to ";
var deleteCommentText = ""; // leave empty to use default (img)
var useAdminPic = true; // use same img as Blogger threaded comments
// config end
// two xpand/collapse hack functions
function getCmtBodyElm(elm) {
if(elm.className=="admin-comment" || elm.className=="normal-comment") elm=elm.firstChild;
while(elm && (elm.nodeType != 1 || (elm.className != "comment-body" && elm.className != "comment-body-author"))) elm = elm.nextSibling;
return elm;
}
function tglCmt(event, elm) {
var txt='';
if(window.getSelection) txt = window.getSelection();
else if (document.getSelection) txt = document.getSelection();
else if (document.selection) txt = document.selection.createRange().text;
var target = event.target ? event.target : event.srcElement;
if(target.nodeType != 1) target=target.parentNode;
if(txt != '' || target.nodeName.toLowerCase() == 'a' || target.nodeName.toLowerCase() == 'img') return;
$(getCmtBodyElm(elm)).slideToggle();
}
var hlInstalled;
if(!($(".normal-comment").length+$(".admin-comment").length)) hlInstalled=false;
else hlInstalled=true;
var cmtblock = $("#comments-block");
var cmts = $("dt", cmtblock);
var hrefr = $('.comment-footer a[href*="/comment.g"]:last').attr("href");
if(!hrefr || hrefr=="") {
hrefr = "";
if($('.blogger-comment-from-post').length)
hrefr=$('#comment-editor').attr("src").match("^.*postID=[^&]+")[0].replace("comment-iframe.g", "comment.g");
}
var onclk = $('.comment-footer a[href*="/comment.g"]:last').attr("onclick");
if(!onclk) onclk = "";
cmts.each(function() {
var c0=$(this);
var c1=c0.next();
var c2=c1.next();
var cid=c0.attr("id");
var author = $(".avatar-image-container img",c0).attr("title");
var cdelete = $(".comment-delete", c2);
if(deleteCommentText != "") cdelete.html(deleteCommentText);
var cdeletep = cdelete.parent();
cdeletep.detach();
var ctime = c2.children(":first");
ctime.detach();
c0.append(ctime);
var creply = $(".comment-reply-link", c0);
// add reply to comment hack if needed
if(!creply.length) {
if(hrefr != "" && author != "") {
var onc='"'+onclk+'"';
if(onclk.search('"') > -1) onc="'"+onclk+"'";
var href = hrefr+"&postBody=%40%3Ca%20href%3D%22%23" + cid + "%22%3E" + author + "%3C%2Fa%3E%26%2332%3B#form";
creply = $('<a href="'+href+'" onclick='+onc+' class="comment-reply-link" title="'+replyToUser+author+'">'+replyCommentText+'</a>');
}
}
else {
creply.detach();
creply.css("float", "");
creply.html(replyCommentText);
}
c2.append(creply);
c2.append(cdeletep);
var txtNode = c0.children()[0];
while(txtNode && (txtNode.nodeType != 3 || (txtNode.nodeType == 3 && txtNode.nodeValue.search("...")==-1))) txtNode=txtNode.nextSibling;
if(txtNode) {
var txtWrote = " " + txtNode.nodeValue.replace(/\s*\.\.\.\s*$/, "") + " ";
txtNode.nodeValue = txtWrote;
}
if(c0.hasClass("blog-author") && useAdminPic) {
var txtAuthor = c0.children('a[href*="profile"]:first').html();
c0.children('.avatar-image-container + a').after(' <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9B' + 'RUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0U' + 'pKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==" title="' + txtAuthor + '" style="margin:-3px 2px -5px" /> ');
}
// Add "highlight comments hack" if needed:
if(!hlInstalled) {
cmtblock.append('<div id="x'+cid+'" />');
c0.detach();
c1.detach();
c2.detach();
var newdiv = $("#comments-block div:last");
newdiv.append(c0);
newdiv.append(c1);
newdiv.append(c2);
if(c0.hasClass("blog-author")) newdiv.addClass("admin-comment");
else newdiv.addClass("normal-comment");
newdiv.click(function(event) { tglCmt(event, this); } ); // xpand/collapse hack
}
});
// and finally the function to thread comments, pretty much the same as 2011 version:
function threadComments(json) {
var replyToCommentID = [];
if(useBloggerThreading && json)
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var rela = "";
var self = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'related') rela = entry.link[k].href.split("/comments/default/")[1];
if (entry.link[k].rel == 'self') self = entry.link[k].href.split("/comments/default/")[1];
}
if(rela!="" && self!="") replyToCommentID[self] = rela;
}
else
preferBloggerThreading = false;
var clss = [];
var elements = document.getElementsByTagName("*");
for(var i=0 ; i<elements.length ; i++)
if(elements[i].className=="normal-comment" || elements[i].className=="admin-comment")
clss.push(elements[i]);
var prevAuthor = "";
var prevNode = null;
var authornodes = {};
for(var x=0 ; x < clss.length; x++ ) {
var moved = false;
var width = clss[x].scrollWidth;
clss[x].style.position = "relative";
clss[x].style.left = "0px";
var thisID = clss[x].id.split("c")[1];
var author = clss[x].innerHTML.toLowerCase().indexOf("%22%3e");
author = clss[x].innerHTML.substr(author+6);
if(author.toLowerCase().indexOf("%3c%2fa%3e") > -1)
author = author.substr(0, author.toLowerCase().indexOf("%3c%2fa%3e"));
else
author = "";
if(author == "")
author=$("#xc"+thisID+" .avatar-image-container img").attr("title");
var cmtChild = clss[x].firstChild;
while(cmtChild && !/(^| )comment-body( |$)/.test(cmtChild.className) && !/(^| )comment-body-author( |$)/.test(cmtChild.className))
cmtChild = cmtChild.nextSibling;
var txt = cmtChild.innerHTML;
var elm = null;
// from feed:
if(preferBloggerThreading && replyToCommentID[thisID] && replyToCommentID[thisID] != "")
elm = document.getElementById("xc"+replyToCommentID[thisID]);
if(!elm) {
var cmtID = txt.toLowerCase().indexOf("href=\"#");
if(cmtID == -1) cmtID = txt.toLowerCase().indexOf("href=\"" + (window.location.href.toLowerCase()).split("#",1)[0] + "#");
if(cmtID > -1) {
var commentid = "x" + txt.substr(cmtID).split("#")[1].split("\"")[0];
elm = document.getElementById(commentid);
}
}
if(!elm && prevAuthor != "" && x && prevNode)
{
if(txt.indexOf("@" + prevAuthor) > -1)
elm = prevNode;
else if(prevAuthor.length > 3 && txt.toLowerCase().indexOf("@" + prevAuthor.toLowerCase()) > -1)
elm = prevNode;
else if(prevAuthor.split(/[\s,-.]+/)[0].length > 3 && txt.toLowerCase().indexOf("@" + prevAuthor.split(/[\s,-.]+/)[0].toLowerCase()) > -1)
elm = prevNode;
}
if(!elm)
for(var tmp in authornodes)
if(txt.indexOf("@" + tmp) > -1)
elm = authornodes[tmp];
if(!elm && replyToCommentID[thisID] && replyToCommentID[thisID] != "")
elm = document.getElementById("xc"+replyToCommentID[thisID]);
if(elm) {
var ind = 0;
if(elm.style.left != "")
ind = parseInt(elm.style.left);
if(ind < 300 && parseInt(ind / threadIndent)+1 < maxThreadingLevels) {
if(ind < 140)
ind = ind + threadIndent;
else
ind = ind + parseInt(threadIndent / 3);
}
var parNode = elm.parentNode;
var place = elm;
var xpos;
do {
do place = place.nextSibling;
while(place && place.nodeType != 1);
if(place && place.style && place.style.left != "")
xpos = parseInt(place.style.left);
else
xpos = 0;
} while(place && xpos >= ind);
if(place != clss[x]) {
parNode.insertBefore(clss[x], place);
moved = true;
}
clss[x].style.position = "relative";
clss[x].style.left = ind + "px";
width = width - ind;
}
clss[x].style.width = width + "px";
if(!moved) {
prevAuthor = author;
prevNode = clss[x];
}
if(author != "")
authornodes[author] = clss[x];
}
}
var cfeedbase = $('link[href$="comments/default"]').attr("href").split("/default")[0];
if(useBloggerThreading && $('a[href*="'+cfeedbase+'"]').length)
document.write('<script type="text/javascript" src="'+cfeedbase+'/summary?max-results=500&alt=json-in-script&callback=threadComments"></'+'script>');
else threadComments();
//]]>
</script>
</b:if>
Post Comments (Atom)
Click on a single comment to hide/show its text
46 comments:
Thanks for your hack, the new threaded comments do not work for my custom template, now with your work i can have it
Excellent master, this is rock \m/
@Beben Koben Test Reply...
Yeah its one good hack for commnet blogger
@Beben Koben test reply your komen beben koben
@Beben Koben xxxxxxxxxxxxx
I followed your instructions but am not getting the correct results. I get a little REPLY under the first comment but no where else. See this post as an example: http://www.hybridrastamama.com/2012/01/160-uses-for-coconut-oil.html
Any thoughts??? Thank you!
@Hybrid Rasta Mama
Hi, seems to work now when I looked the post, maybe you got it fixed already. If you still have some trouble, please tell what browser you are using. I tested the page on Chrome and Firefox.
Internet Explorer seems to be the issue. I do see that it works fine in Firefox. However, most of my readers use IE and apparently comments were getting disappearing yesterday. So I'll see what modifications I can make to fix it. Thanks for a great hack though!!!!
@Hybrid Rasta Mama
Hi, thank you for the info, I got the bug pinned. I was using "textContent" on a fairly unimporant place, and IEs below 9 does not recognize it. It worked on my blog, because I have "EmulateIE9" setting (EmulateIE7 is the default on many templates).
I modified the script: replaced the textContent with nodeValue, which works also on Internet Explorers below version 9. The changes are on lines 104, 106 and 107.
Sorry about the bug, teaches me (once again) that always should test more on Internet Explorer than just a simple "smoke test"... But now it is fine
Oh wow! That is great! I will go in and replace the code and let you know what happens. Seriously - you are genius!
شكراااااااا@Hybrid Rasta Mama
I created a new custom template and this hack no longer works. You mentioned making some modification to custom templates. Any idea what those might be?
@Hybrid Rasta Mama
First of all you have to make sure, that Blogger threaded comments don't overrun this, disable Blogger's threaded comments. Then you should check for any javascript errors, etc. The document object model (DOM) of the comment section should be similar to, for example, Simple template (same class names etc), or the script needs modifications.
Hi, that depends on the custom template
I once installed this before </head> and wondered for a while why it did not work...
I looked at your site, which looks great. You might want to consider anonymous icons for non-registered commenters to go with the threaded commenting.
Hope you get this working on your new template, too. I can try to help you further if you have some additional info.
@MS-potilas Got it working! Yay! Looks great! Thanks again.
I have a custom made template made by Rainy Day. My comments are set to pop up. body is an the end of the template. I did add version 2 codes before body. Saved template and did not work. I am using Safari and Chrome. I really wish it was working. Any tips? Thanks for everything.
@Helene Hi, try this: put the first line, the one with jquery-latest.js, just before </head>. Then put rest of the script before </body> Hope that helps
I'm in the exact same boat as Helene and for some reason it's being stubborn for me and doesn't want to work. I want my comments to be a pop out, but I don't even have the option to reply to comments, let alone thread them. If you have anymore suggestions I would greatly appreciate them! Thank you for your time and help!
@Sarah Hi, I looked at the source code of your blog page, and there are errors with the threaded comment hack installation. First, all lines are after each other, without line breaks, and it won't work that way. Secondly, there are also the line numbers in the code, and they should not be. Use the "Download Raw" link and copy the code from that window that pops out. Remove the old code from template and replace it with that. Hope you get it working
@MS-potilas Haha gosh, I feel sheepish. I know nothing about HTMLs whatsoever. I did what you told me to and it still didn't work though
Maybe it's just my template, I don't know. Thanks anyway for your help though! I'll see if I can figure it out somehow.
@MS-potilas Just kidding, it DID work!! You are a computer genius! Thank you for your help
Do you know if the reply comment gets sent to their e-mail? Or do they have to check back to my blog to see it?
@Sarah Hi, great that you got it working! There used to be a checkbox when writing a comment for following the comments of a topic, but it has disappeared when the comment page style changed. So users can either check back to your blog, or they can subscribe to the comment feed, for example in Google Reader. I've got one hack to let users subscribe new article's comments to email, see at the bottom of this page. But that of course requires some html editing again
Thanks a lot for this! This was one thing I really missed on blogger.
hi admin, thanks for this pro tutorial,
i found problem to install it
i had nested on my template, i want you to visit my blog to show what to do to install it correctly,
http://bestertem.blogspot.com/
thanks to answer
@Mr Admin Hi,
you currently seem to have installed this threaded commenting hack: http://miscah.blogspot.com/2011/12/threaded-comments-untuk-komentar.html That seems pretty good, too. Nice idea to hide the "@someone" links, one could do that with my hack with a little editing, too.
If you want to use this threaded commenting, then you should have no other threaded commenting active. You could make a test blog and try my hack there, and if you like it, then reset the comments widget on your other blog to default (remove the previous hack), and install mine.
so how to desable other threaded comments system?
you mean just remove after you threaded comment system it will work correctly..
@MS-potilas
@Mr Admin For my threaded comments to work, the comments section must have same/similar DOM (document object model) structure as the basic Blogger templates, like Simple. The hack traverses comment's DOM and makes the threading. So if DOM is different (different class names, etc.) then the hack can not work.
So the other threaded commenting should be removed and replaced with the basic commenting. The template looks pretty much customized, so it might not be easy.
Easier way to test this threaded commenting would be to make a test blog with Simple template, and install it there. I'm not familiar with the threaded commenting your template uses, so I don't know if my hack offers anything more than that. Well, my hack can be easier to customize, because javascript is not obfuscated.
thanks@MS-potilas
amazing hack
but i have a problem on comments time
@Διελκυστίνδα Hi, I checked your blog. The comment timestamps (date+time) seem to be missing from your comments section. This threaded comments hack rearranges elements already on the screen, including the timestamp, so if timestamps are missing, they still are missing after threaded comments is run.
So there is some customization in the comments section of your blog template that has removed the date. Maybe it is the comment numbering hack. There should be a block of code looking like this in the template (widgets expanded):
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
(it may differ a bit)
Hope you get the timestamps back
@MS-potilas
thanks a lot
i add this code and appears at the top and not on each comment
. I can' find the right location...
@Διελκυστίνδα It may be too hard for me to try to position that code in your template. I suggest you create a new test blog, with the "simple" template. Then examine that new blog's template and that way try to find the right place for the missing timestamp code in the other template. Good luck!
@MS-potilas
Thank you for your advice.
@MS-potilas
My friend, I solved the problem.
I removed the code above, and added this code here. http://yabtb.blogspot.com/2011/10/reply-to-blogger-comments-hack.html
Greetings from Greece
@Διελκυστίνδα That was a very well invented solution, as that hack is compatible with this. Great you got it working.
Greetings from (still snowy) Finland, and all the best
@Διελκυστίνδα Test
Wow.
Its so awesome
thanks
Me again! So last week your hack just stopped working for no apparent reason. I have not changed anything on my blog. Thoughts?
@Hybrid Rasta Mama
Hi,
your article pages give a javascript error about "CommentsCounter" variable. The variable is defined in an odd place (in CSS definitions), and the <span class="numberingcomments", where CommentsCounter is displayed, has some html errors, too. I saved one article page from your blog, removed the CommentsCounter-codes from page html, and then the threaded commenting worked again (you probably don't want to remove the numbering of comments, but correct the errors).
@MS-potilas I am not very literate when it comes to HTML. The CommentsCounter code that I want to edit is from your hack code right? Do I want to remove that code or edit it somehow? Sorry...still learning all this!
@Hybrid Rasta Mama
Hi, the CommentsCounter code is from somewhere else, not from my hack. It might be this: http://www.bloggerplugins.org/2009/08/numbering-your-blogger-comments.html. It might be best to first try to remove the comment numbering hack and then reinstall it.
It's great... I love this TC style...
I just created a blog in blogspot and when people are posting comments, it doesn't automatically expand them. It only says "1 comment" below the post. How can I make the comments automatically show in expanded format? Thanks!
http://kathieaustinphotography.blogspot.com/
@Kathie Austin
Hi,
that is the normal way Blogger blogs display comments: on the main page only the articles and comment counts are shown, and when an article is opened, its comments are shown below it. To show comments on the main page would require modifications to the template.
Thanks a lot for this GREAT work ^_^
Hello MS-Potilas..
Verry clever for blogger threaded commenting.
I wanna ask about threaded commenting from blogger, not this hack. How to get Commenter link opened in new tab?
Thanks before.
Let Me Try Too
See the hack to make the 'Post a Comment' link bigger.
Post a Comment