My blog has moved into Beta!



Please note that my blog has changed addresses! It's all new and improved. Hence this old friend of mine had to be left alone. You can visit me at The Last Word (beta). It's all warmed up for you! :)

« Home

Prest-Eure-ka!Goodbyes?Hello darkness my old friend!Google Comes Clean (again!)Easier To RunPhinally some PhenylethylamineBookmarking Burst!Why Do We Love?Love Is Only A FeelingWhat The Google?  »





If you manage to look at the comments (example), you'll notice that some of them are coloured blue. If you look even more carefully, you'll notice that the author of those comments is yours truly! :) Now, credit should go where its due, and the idea behind the whole thing was started by (in my head atleast) Johan of ecmanaut. Ofcourse, his knowledge of javascript being much more profound than mine, came up with a more sophisticated bunch of code, but easier to implement. But I managed to come up with something of my own, and the results are to my satisfaction. So here I'm going to tell you how I did it! (Its not going to be a 'finders keepers' scene here!)

The first thing to understand is how Blogger writes comments to your blog posts. It utilises the tag <$BlogCommentAuthor$> to write out the details of the author of the comment with a link to the profile. This is the bit of code that you need to tap. But for my hack to work, your entire comment (including the body with the <$BlogCommentBody$>) has to be included in one element. The author details can themselves be included in a subelement (span for my blog), with the respective style attached to it, but one comment block should be in one element. It doesn't matter what that element is, just has to be one which is not used randomly in the entire blog ... so that it can be referenced without creating too much interference with other similar elements. Now comes the dirty part. The Javascript code...

I'll write out the bit of code first, and then we'll understand how it works!

function author_change(){
var str=/*your profile number*/
var d=document.getElementsByTagName('*element name containing your comment author tag*')
for(var i=0;i<d.length;i++){
if(d.item(i).innerHTML.match(str) && d.item(i).id=="comment"){
/* use CSS to Javascript properties to change the values, or assign it a different
class using the 'className' property as d.item(i).className='something' */
}
}
}
[Edit]: Sample Comment Display Code to make the above code work:
<BlogItemComments>
              <a name="<$BlogCommentNumber$>"></a>
                  <div id="comment">
                  <$BlogCommentBody$>
                          <span id="byline">By <$BlogCommentAuthor$>, at
                        <a href="#<$BlogCommentNumber$>"><$BlogCommentDateTime$><$BlogCommentDeleteIcon$></a>
                     </span>
                  </div>
</BlogItemComments>

The variable str holds the bit of data that you want to search your elements for, which is your profile ID. You can get it by going to your profile page, and selecting the entire set of numbers at the end, and pasting it there. The variable d, will hold an array of the element which you enter here. Notice that for my blog, my comments are stored in a p element, so my element searched for here is p. NOTE: The quotes are part of the syntax, do not remove them! Just replace only the coloured text.

The next stuff is pretty straight forward. Its completely automated, and all you have to do is enter the steps it should take everytime it finds your comment. That goes into the red part, and it will apply those settings everytime it finds a match!

Thats it! Simple! Now all you have to do is, in your body tag, you have add this bit of code: onload="author_change()"

You are set! Save and republish your blog. Then go to the individual post pages, and see if your comments are coloured or not! If they are, congratulations ... if they're not, drop me a line! :) Enjoy!

[Edit (5/3/2006)]: I realised that not a lot of people figured this out. This hack is only for inline comments, as has been implemented on my blog. There's a nice little tutorial to do that from Blogger (here), so first change your template to have that. The only way to use this hack on the existing comments page is to use a Greasemonkey script and Stylish for Firefox. I'll work on those later! :P

Filed Under:


23 Comments

Oh My GOd !!
Thats like the most amazing look of the blog !!
Excellent work !
Keep it up !!

thanks! :) i do put in a good amount of time into it!

This comment has been removed by a blog administrator.

now see
the blog just gets prettier and prettier like every freaking day
aaahhhhhhhh..the blue is soothing to the eyes.
lol you loser you're just too good with this stuff.. *green with envy*
and not to forget my original reaction

OMFG!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THIS

IS

FREAKING

GORGEOUS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

lol.. i seriously have officially hit myself on the head now.

Hey Aditya that's great. I really like it. WHat I don'tr understand however, is how do you show comments in-line under a post. I'd like to do that and, if possible, have have them hidden then when someone clicks the "x Comments" they are displayed rigt there under the post; extendible comments.

@Jana: i'll explain it to you briefly if you're comfortable with javascript. if you aren't, drop me a mail (mail address on the top right!) :)

the element which holds your comments, include them in a master element, and set its style display to none. you might want to set this just for the Main or Archive page by using the tags <MainOrArchivePage></MainOrArchivePage> so that the comments are on by default for your post pages. set the id to '<$BlogItemPermalinkURL$>something', so that each post has its own set of comments stored under different id for each post, but all comments of one post will have the same comment element.

now define a function which will change the display property of the element when the X Comment(s) is clicked. call that function putting a onClick event handler in the link to your comments, and set the href to whatever, prefixing it with a hash ('#'). I use #here for all these kinds of links, which don't anything, just change element states

Hope that helps! :)

I'm sorry, I guess I'm being dense, but I don't understand exactly what goes in the 2nd blue line or the red.

Could you give an example? And does it go in the style sheet?

i cant get this hack works in my blog... *sigh*
don't know what's wrong...

Thank you for sharing! :)
what a beautiful blog!

wow i like the look of this commenting system

How can you implement inline posting comments? I`d like to make my template function just like yours!

hi, I`m not understanding what i put in the part *element name containing your comment author tag*')
of the javascript?

The inline comment form has been adopted from Singpolyma's blog. You can find it here (link).

The element name container part should have the name of the HTML element which holds all your comment tags from Blogger. If you view-source this page, you'll see that the tag is a P, so i put a P in there (in quotes).

the link is this --> singpolyma's tech blog

forgot to add it back there! :P

thanks for all the help aditya. Theres just one more problem, the onload event is clashing with the blogger navbar.

Thanks for helping me out so much But I dont know is it just bad luck or maybe I`m just too stupid to edit one god damn temlate,...I cant do it!!! can you just take a look at my template?(I already e-mailed you) and fix it? I`d like the blue background for my comments too.

test
    Anonymous test, on Fri Jul 21, 11:49:00 PM  

Can it be done for blogger beta?

pamela anderson naked [url=http://myblog.es/normpamelancole]pamela anderson naked[/url]cole]pamela anderson naked[/url]

Wondertul hack by you. I have to try it on my blog and will see.

Anyway thanks!

thanks!!!
    Anonymous Alex, on Fri Nov 17, 03:03:00 PM  

testing 2 times
    Anonymous Karen, on Fri Nov 17, 03:29:00 PM  

mama mia!!
    Anonymous Yino, on Fri Nov 17, 03:30:00 PM  




Leave your comment
You can use some HTML tags, such as <b>, <i>, <a>

Or you can sign in as a different user.







Categories

Latest Updated

Subscriptions

Get My Blog In Your Mail!

Powered by Yutter

add this button to your site/blog as a link to this page! « link to me!
coComments my coComments
my claimID

subscribe to feed
Widgetize!
Google Reader add to google
del.icio.us The Last Word add to del.icio.us
Add to My Yahoo! add to yahoo!
Subscribe with Bloglines add to bloglines
add to msn
Add to netvibes add to Netvibes!
myFeedster add to feedster
Furl The Last Word add to furl


Archive Pages
January 2006 February 2006 March 2006 April 2006 May 2006 June 2006 July 2006 August 2006 October 2006 November 2006 December 2006

Advertisement


Song Of The Day:




Creative Commons License Widgetize!
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
Aditya Mukherjee © 2005-06 | Powered by Blogger