Blogger Beta Peek-a-Boo Comments
Update: There are some issues with this method and using the word verification stuff. Something about security or something. In Firefox, the first time you go to my blog, it would redirect you to the pop-up comments page. In IE, the word verification doesn't work, unless you first open the pop-up comments page. If anyone has a suggestion as to how to make this work, please let me know.
I've done more blog hacking to restore the peek-a-boo (show/hide) comments that I had before. It's similar to how it was done with the old blogger.
The problem with the new blogger is that you cannot access the comments from the main page anymore. What I did was (dynamically) load the pop-up comments window in an iframe and then had that show/hide using Javascript and css. The bonus feature is that you can now comment right from the peek-a-boo comment! IE is a bit wonky and sometimes doesn't like to show the word verification (you can click the "Post a comment" link). IE also partially hides the vertical scrollbar the first time the comments are shown.
One issue right now is that I couldn't get the iframe to resize to the height of the comments. The reason is because I'm loading the comments from an external url.
Here are some code snippets (refer to the instructions for the old blogger as a guide):
css styles. Put this in your style sheet.
Peek-a-boo Javascript code. Put this between <head> and </head>.
iframe code to include the comments. Put this where you want the comments to show up (probably after the labels in <b:includable id='post' var='post'>)
Hyperlink to do the toggling of the comments. Replace the "# comments" and "Post a comment" link with this code.
Use at your own risk!
I've done more blog hacking to restore the peek-a-boo (show/hide) comments that I had before. It's similar to how it was done with the old blogger.
The problem with the new blogger is that you cannot access the comments from the main page anymore. What I did was (dynamically) load the pop-up comments window in an iframe and then had that show/hide using Javascript and css. The bonus feature is that you can now comment right from the peek-a-boo comment! IE is a bit wonky and sometimes doesn't like to show the word verification (you can click the "Post a comment" link). IE also partially hides the vertical scrollbar the first time the comments are shown.
One issue right now is that I couldn't get the iframe to resize to the height of the comments. The reason is because I'm loading the comments from an external url.
Here are some code snippets (refer to the instructions for the old blogger as a guide):
css styles. Put this in your style sheet.
.commenthidden {
display: none;
}
.commentshown {
display: inline;
}
Peek-a-boo Javascript code. Put this between <head> and </head>.
<script type='text/javascript'>
function togglecomments(postID, commentsURL) {
var divElt = document.getElementById(postID + "iFrameDiv");
var showElt = document.getElementById(postID + "TextShow");
var hideElt = document.getElementById(postID + "TextHide");
if (divElt.className == "commentshown") {
divElt.className = "commenthidden";
showElt.className = "commentshown";
hideElt.className = "commenthidden";
} else {
var iFrameElt = document.getElementById(postID + "iFrame");
if (iFrameElt.src != commentsURL) {
if (iFrameElt.contentDocument) {
iFrameElt.scrolling = 'auto';
iFrameElt.contentDocument.open();
iFrameElt.contentDocument.write("<span style='font:small Verdana, Arial, Sans-serif;'>Loading...</span>");
iFrameElt.contentDocument.close();
} else if (iFrameElt.contentWindow) {
iFrameElt.contentWindow.document.open();
iFrameElt.contentWindow.document.write("<span style='font:small Verdana, Arial, Sans-serif;'>Loading...</span>");
iFrameElt.contentWindow.document.close();
}
iFrameElt.src = commentsURL;
}
divElt.className = "commentshown";
showElt.className = "commenthidden";
hideElt.className = "commentshown";
}
}
</script>
iframe code to include the comments. Put this where you want the comments to show up (probably after the labels in <b:includable id='post' var='post'>)
<script language='Javascript'>
document.write("<div id='<data:post.id/>iFrameDiv' class='commenthidden'><iframe id='<data:post.id/>iFrame' style='width: 100%; height: 775px; border: solid #ddd 1px;' scrolling='yes' frameborder='0'></iframe></div>");
</script>
Hyperlink to do the toggling of the comments. Replace the "# comments" and "Post a comment" link with this code.
<script language='Javascript'>
document.write(" | <a class='comment-link' href=\"javascript:togglecomments('<data:post.id/>', '<data:post.addCommentUrl/>')\"><span id='<data:post.id/>TextShow' class='commentshown'>Show</span><span id='<data:post.id/>TextHide' class='commenthidden'>Hide</span> <data:post.numComments/> comment" + (<data:post.numComments/> != 1 ? "s" : "") + "</a>");
document.write(' | <a class="comment-link" href="<data:post.addCommentUrl/>" onclick=\'<data:post.addCommentOnclick/>\'>Post a comment</a>');
</script>
<noscript>
| <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 comment<b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
| <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a comment</a>
</noscript>
Use at your own risk!
2 Comments:
Followed you up to replacing "comments" & post a comment" link. Where abouts is this and which bits am I deleting?
You have to check mark "Expand Widget Templates" and then look for it :p
It's under <b:includable id='post' var='post'> and <div class='post-footer'>
Post a Comment