Oh, you might wanna see the demo first?
Demo For new Blogger,
Please go to this site homepage or on the Archives page. Look at the bottom of each post. there you’ll see the result of this hack.Demo for Old Blogger,
Please go here: BlogClassic dot Blogspot dot Com.

Sorry Britney, you are not on the list ;)Introducing you a new hack for blogger now. enjoy it

Truly, i really don’t have any idea where should i start this post, so let me just post an email from my friend Zhu, she often read this blog, so here it is;

Zhu from Correr Es Mi Destino says,

Hi Jack, I have a question for you regarding blogger comments… if you know the answer, you might want to put it on your blog.First, I’d love to display who commented on one line, just like this

“2 comments from: X, U, Y etc”

Second, I’d like my comments to display in a colorful box.

I feel really bad asking you that but you look pretty cute skilled. Please, just don’t reply if you don’t have time, I don’t wanna look like I’m using you!

Juliette

– Thank you Juliette

Hey Jack, you said it was from Zhu, but the signature’s Juliette? are you lying here?

What? oh.. no, it’s her nickname Zhu. I have modified a little bit of the email, hope it’s ok Zhu
OK, let’s just come to the anwers,

Oh, you might wanna see the demo first?
Demo For new Blogger,
Please go to this site homepage or on the Archives page. Look at the bottom of each post. there you’ll see the result of this hack.

Demo for Old Blogger,
Please go here: BlogClassic dot Blogspot dot Com.

See the differences?

I. How to make that … em.. what it’s name? well.. 1’st question.
1. Go to your HTML editor under your blogger Dashboard.
2. Tick the Expand Widget Templates
3. Find this code below;

<title><data:blog.pageTitle/></title>

4. Copy this line below, and paste it right after the line above.

<script type="text/javascript"  src="http://files.lifewg.googlepages.com/jackbook-rc-1.0.js"></script>

it should become like this now;

<title><data:blog.pageTitle/></title><script type="text/javascript"  src="http://files.lifewg.googlepages.com/jackbook-rc-1.0.js"></script>

5. Find this code below;

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if>

If you have problem on finding that codes, try to at least you can found the first 2 lines. the main code is inside the first 2 lines, and the last 2 lines.

What I’m trying to say is, we will wrap that main codes with this tag

<noscript>

</noscript>

So let say your codes look like this;

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'>---YOUR OLD CODE HERE--</b:if></b:if>

to be like this;

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><noscript>—YOUR OLD CODE HERE–</noscript></b:if></b:if>

see the bold lines?

so, it should pretty much look like this now;

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><noscript><a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></noscript></b:if></b:if>

6. Put this code on top of the <noscript> line on the code above;
UPDATE:

<script type="text/javascript"  expr:src='"http://www.blogger.com/feeds/YOUR-BLOG-iD-HERE/" + data:post.id + "/comments/default?orderby=published&alt=json-in-script&callback=rp"'></script>

Thanks to Zhu, she reported to me that it shows only 25 comments at max. even the post has more then 25 comments, it still shows only 25 comments at max. to fix it, edit or replace the line above with this line below:

<script expr:src='"http://www.blogger.com/feeds/"   + data:post.id  + "/comments/default?orderby=published&alt=json-in-script&max-results=500&callback=rp"' type="text/javascript"></script>

Note:
I add max-results parameter to the line above, this means i put 500 as the max results. on default, it will shows only 25 results. you can modify it as your desired. you can change it into 1, 10, 100, or even 1000 or more.

So it’s now should look like this;

<b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'>

<script type="text/javascript"  expr:src='"http://www.blogger.com/feeds/YOUR-BLOG-iD-HERE/"   data:post.id   "/comments/default?orderby=published&alt=json-in-script&max-results=500&callback=rp"'></script>

<noscript><a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></noscript></b:if></b:if>

Replace what YOUR-BLOG-iD-HERE with your own blog id.

What is my blog id? How can i get my blog blog id?
Well.. are you still inside your HTML Editor now? look at your browser address box. does it look like this;

http://www.blogger.com/html?blogID=1234567890123456789&tpl=true

that red text is your blog id.

NEW ADDED, thanks Zhu for your bug report.
7. Find this code below;

<b:if cond='data:newerPageUrl'><span id='blog-pager-newer-link'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a></span></b:if>

<b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a></span></b:if>

8. Change with this code below;

<b:if cond='data:newerPageUrl'><span id='blog-pager-newer-link'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='"new-" + data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a></span></b:if>

<b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='"new-" + data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a></span></b:if>

Guess what the different?
9. Save your template,

10. And refresh your blog and done.

There are a better result if you try it on old version of blogger. on old version of blogger, you need to do easier;

1. Go to your HTML Editor,
2. Find this code below;

<BlogItemCommentsEnabled>  <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a></BlogItemCommentsEnabled>

3. Change with this code below;

<BlogItemCommentsEnabled><div class="thecomments"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$><script type="text/javascript">if (<$BlogItemCommentCount$> == 0) {document.write("Comment");} else {if (<$BlogItemCommentCount$> == 1) {document.write("Comment");} else {document.write("Comments");}document.write(" from ");}</script><noscript> Comments from </noscript></a><BlogItemComments><$BlogCommentAuthor$>,</BlogItemComments></div></BlogItemCommentsEnabled>

4. Save your template
5. Refresh your blog and done.

Now, 2′nd Question,
II. How to display my comments in a colorful box?

The steps,
For New Blogger

1. Go to your HTML Editor,
2. Find this code on your HTML Code, usually it’s right before the </head>

]]></b:skin>

3. Add this code below before the the code above;
/* New Added by JackBook.Com
———————————————– */

.comments-box {
margin: 10px auto;
padding: 12px;
background: #B8860B none;
border: 2px solid Green;
color: #fff;
}

So it should now look like this;

/* New Added by JackBook.Com----------------------------------------------- */

.comments-box {margin: 10px auto;padding: 12px;background: #B8860B none;border: 2px solid Green;color: #fff;}

]]></b:skin>

4. Find this code below;

<dl id='comments-block'><b:loop values='data:post.comments' var='comment'><dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/><b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/></dt><dd class='comment-body'><b:if cond='data:comment.isDeleted'><span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd><dd class='comment-footer'><span class='comment-timestamp'><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl>

Now you can wrap that code with a Div element with class comments-box;
example:

<div class=”comments-box”><dl id=’comments-block’><b:loop values=’data:post.comments’ var=’comment’><dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’><a expr:name=’”comment-” + data:comment.id’/><b:if cond=’data:comment.authorUrl’><a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/></dt><dd class=’comment-body’><b:if cond=’data:comment.isDeleted’><span class=’deleted-comment’><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd><dd class=’comment-footer’><span class=’comment-timestamp’><a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’><data:comment.timestamp/></a><b:include data=’comment’ name=’commentDeleteIcon’/></span></dd></b:loop></dl></div>

Basically, the main content of that code is this line:

So you can be creative to try it your self to put that div.
So you can also put the div only on that code;

<div class=”comments-box”><b:if cond=’data:comment.isDeleted’><span class=’deleted-comment’><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></div>

5. Save your template,
6. Refresh your blog and done.

How to apply it on old blogger?
1. Go to your HTML Editor
2. Find this code below

  </style>

3. add this line before that line above;

/* New Added by JackBook.Com----------------------------------------------- */

.comments-box {margin: 10px auto;padding: 12px;background: #B8860B none;border: 2px solid Green;color: #fff;}

So it should now become like this

/* New Added by JackBook.Com----------------------------------------------- */

.comments-box {margin: 10px auto;padding: 12px;background: #B8860B none;border: 2px solid Green;color: #fff;}

</style>

4. Find this code below

<BlogItemComments><dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a><$I18NCommentAuthorSaid$></dt><dd class="comment-body"><p><$BlogCommentBody$></p></dd><dd class="comment-timestamp"><a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a><$BlogCommentDeleteIcon$></dd></BlogItemComments>

5. Replace with this code below;

<BlogItemComments><div class=”comments-box”><dt class=”comment-poster” id=”c<$BlogCommentNumber$>”><a name=”c<$BlogCommentNumber$>”></a><$I18NCommentAuthorSaid$></dt><dd class=”comment-body”><p><$BlogCommentBody$></p></dd><dd class=”comment-timestamp”><a href=”#c<$BlogCommentNumber$>” title=”comment permalink”><$BlogCommentDateTime$></a><$BlogCommentDeleteIcon$></dd></div></BlogItemComments>

6. Save your template
7. Refresh your blog and done.

More about the style

/* New Added by JackBook.Com----------------------------------------------- */

.comments-box {margin: 10px auto; /*This is the top margin, you can add more margin by adding more line eg. margin-bottom: 10px; margin-right: 4px; margin-left: 4px; */padding: 12px; /*this is the padding. you can modify it also like the margin above*/background: #B8860B none; /*this is the background color, change it as you like. you can even add picture as the background. just add this url(http://the-url-of.com/theimage-here.jpg), ro replace the none*/border: 2px solid Green; /*no doubt, this is the border*/color: #fff; /*this is the color of the text*/}

I have tested all that code, and that works prefectly. please re-read all the instruction above, slower step-by-step if you missed it.

Please write your question on the comment form below.

If you like this hack, would you spread it to the world?
thank you.

hope it’s useful.

Related Entries

• Removing the Comment Moderation on JackBook.Com
• Thanks for favoriting us at Technorati.
• Nofollow Comment, Why should I remove the “nofollow” tag?
• Should we use HaloScan? (I am so disappointed to HaloScan)
• I am sorry..
• Should You Worry About Your Posting Frequency?

Or Read Our Articles Via Your Feed Readers?