-
Comment Photos and Highlighting
- body
-
PurpleMoggy has created a set of instructions for using this on Blogger BETA. I have updated my hack to support his new features and fix the bugs he found. There is also now a new 'no image' image.
Awhile back I wrote a post detailing my hack for adding profile photos to comments. Unfortunately that post was rather technical in its explanation. This post attempts to deal with adding the hack to your blog in a more user-friendly fashion and also with using the hack to highlight blog-contributor comments.
Step 1 - The first thing you need to do is find the comment section in your blog template. Edit your template and scroll down until you find the <BlogItemComments> tag. The code inside should look something like this:
<div class="comment-poster" id="c<$BlogCommentNumber$>">
<a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said…
</div><div class="comment-body">
<div class="innerCmntBody"><$BlogCommentBody$></div>
</div><div class="comment-timestamp">
<a href="#c<$BlogCommentNumber$>" title="comment permalink">4/26/2006 07:49:51 PM</a>
</div>Step 2 - If you plan to use comment highlighting (so that the comments made by blog authors look different from those of users) this must be wrapped in another tag so that all of the code for each comment is in one tag. Like so:
<div class="commentelem"><div class="comment-poster" id="c<$BlogCommentNumber$>">
<a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said…
</div><div class="comment-body">
<div class="innerCmntBody"><$BlogCommentBody$></div>
</div><div class="comment-timestamp">
<a href="#c<$BlogCommentNumber$>" title="comment permalink">4/26/2006 07:49:51 PM</a>
</div></div>
Some blog templates will already have a tag around their comments, as will those using the 'standard' comment markup. If you have one of those templates just write down the class of the wrapping tag or add one (the underlined section above).
Step 3 - Next we need the class of the element where we can look for the link to the author. In the example code above this would be comment-poster. When in doubt use the class of the overall wrapping tag. Once you have it, write it down. Count the number of <a> tags there are before the <$BlogCommentAuthor$> tag and write this number down (in the above example it is 1).
Step 4 - The only thing left to do in this part of the code is to insert the element where the profile photo will go. Add this code right before the <$BlogCommentBody$> tag: <div class="commentphoto"></div>
Step 5 - Now go to the <head> section of your blog and add the following code:
<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=830605"></script>
<script type="text/javascript">
//<![CDATA[
function thisblog_showCommentPhotos() {showCommentPhotos('commentphoto','class of author wrapper',# of a tags,'main wrapper class','<$BlogURL$>','highlighted text colour','highlighted text background';}
addLoadEvent(thisblog_showCommentPhotos);});
//]]>
</script>Where class of author wrapper is the class you wrote down in step 3, the # of a tags is the number you wrote down in step 3, and the main wrapper class is the class you wrote down in step 2. If you are not going to use comment highlighting the last for parameters can be left off (from main wrapper class to highlighted tex background) otherwise you have to fill in the color you with the text and background of highlighted comments to be in their appropriate spots above.
Step 6 - Save and Republish!
© 2006-2008 Stephen Paul Weber. Some Rights Reserved.
You can trackback from you own site.
18 Comments
Cool Man,where can I get the code for this comment form?
@Manas - You can find that here: http://singpolyma-tech.blogspot.com/2006/01/new-inline-comments-form.html
Brilliant
In the internet explorer, I didnt get the grey color
hmm… that's odd… I just tested it and it shows up fine on my blog in my Internet Explorer… Is it showing up alright for you on my blog?
nope.. here too, i didnt see the grey color.
That's odd… I can't really find the problem because I works for me in IE… what version of IE are you using?
Sorry, but my english is not good, but I want to know in first place, haw can I do to change de image "NO IMAGE" if is posible, and in the second place, if I can resize all the image at the same format (in pixels)
Great work!
id imagine you can do this by giving the div of where the picture is wrapped and changing the margins & boarder.. im gonna play arround with this later
id imagine you can do this by giving the div of where the picture is wrapped and changing the margins & boarder.. im gonna play arround with this later
id imagine you can do this by giving the div of where the picture is wrapped and changing the margins & boarder.. im gonna play arround with this later
thanks man !
I followed the instructions and I can't make it work…
M I missing some thingy?
( I even moved the script to my FTP , and used your Ex. As a my comment structure)
Is there anything I need to do before I try your hack ?
Okay it does work but very slowly on IE.
for some reason it work very well on FF but on IE it takes lots of time till it work.
Do we have to use the Inline comments for this to work?
Do you mean do you need to have an inline comment form? No.
Do you mean do you need to have comments displaying somehow on your item pages? Yes. Blogger's ugly comment pages can be set to display images anyway…
Wow this is great stuff, thanks!
-Bloof
This is an testing comment by using OpenID account to test if this hack functions well..
Reply / Comment