Simple HTML for Formatting Blogger Comments
Wed 30 Aug 2006Sherdie, fellow Brisvegas blogger, has asked for some tips on adding styles to Blogger comments. Many bloggers have tools for adding formatting to their posts, but not their comments. I thought I’d post my answer here so that other bloggers can benefit as well.
We’ll cover just simple stuff, bold, italics and hyperlinks.
[Note to advanced web developers and XHTML coders: Nothing to see here folks. Move along. Corners (and some W3C XHTML validation rules) will be cut.]
When can we use formatting?
Good news: Usually Bad news: Not always.
Some blogging software and some blog owners can turn off HTML formatting. Sometimes you just won’t know until you try it. A good indication that you can use HTML formatting is if the comment form says something like…
You can use some HTML tags, such as <b>, <i>, <a>
What is a Tag?
Very simply, a tag is something enclosed in angle brackets <>. For example, <b> is the tag for “Turn Bold On”.
When your readers’ browsers (Internet Explorer, Firefox, whatever) encounter tags that they recognize, they will replace these tags with formatting.
Don’t forget the End Tag.
Note that each of the tags we are using here, work in pairs. That is, there is a Begin Tag and a corresponding End Tag which starts with a slash /. For every <b> (bold on), there must be a corresponding </b> (bold off). This is important.
Bold
Surround the text you want to appear in bold with <b> and </b> tags. Example, type this into the comment box:
Sometimes I just want to <b>shout</b>!
Readers will see this:
Sometimes I just want to shout!
Italics
Enclose the text you want to appear in italics with <i> and </i> tags. Example, type this into the comment box:
I thought, <i>Hang on a minute, Defrag!</i>
Readers will see this:
I thought, Hang on a minute, Defrag!
Hyperlinks
Including a Hyperlink in a comment is very similar to Bold and Italic. Hyperlinks use the <a> (for “Active”) tag.
Step one is to enclose the text you want to appear as a hyperlink with <a> and </a> tags. Example, type this into the comment box:
You should read <a>MikeFitz's post</a>
If you leave it at that, readers will see this. Note that the hyperlink doesn’t work yet:
You should read MikeFitz’s post
Step two is to include the address that you want to link to in the opening <a> tag. This is done by including href="" in the tag. Then place the address between the two "" characters. (The address is the thing that starts with http://. You probably already know that you can copy the address from the address bar at the top of your browser.)
For example, here we have added the href="":
You should read <a href="">MikeFitz's post</a>
Finally, here it is with the address placed between the two "" characters:
You should read <a href="http://mike.brisgeek.com/2006/08/30/simple-html-for-formatting-blogger-comments/">MikeFitz's post</a>And here’s what readers will see:
You should read MikeFitz’s post
Bold and Italics (Walking and Chewing Gum)
Bold and Italics can be combined provided they are nested correctly. Example:
I shouted: <b><i>Look Out!</i></b>
Readers will see:
I shouted: Look Out!
This is an example of incorrect nesting. The </i> should come before the </b> Don’t do this:
I shouted: <b><i>Look Out!</b></i>
Bold, Italics and Hyperlinks (Walking, Chewing Gum and Talking to your Mother on your Mobile)
Here’s a more complex example where correct nesting is important:
One of my favourite books is
<a href="http://www.awprofessional.com/bookstore/product.asp?isbn=0201633612&rl=1"
title="Addison-Wesley website">
<i><b>Design Patterns</b>
: Elements of Reusable Object-Oriented Software</i>
by Gamma, Helm, Johnson and Vlissides</a>.Readers will see:
One of my favourite books is Design Patterns: Elements of Reusable Object-Oriented Software by Gamma, Helm, Johnson and Vlissides.
and Finally
Hopefully my fellow bloggers will find this information useful when commenting.
If you found it useful, please let me know or leave a comment. If you find an error, let me know about that too.
Happy Blog Commenting — Mike
August 30th, 2006 at 14:29
Well, MikeFitz, I feel more learned now. In fact, I applaud you.
*hopes she didn’t bugger it up*
August 30th, 2006 at 15:09
Well done, Sherdie.
Are you sure you haven’t played this game before?
August 31st, 2006 at 10:08
You should have seen how long it took me to do that. I’ve always been of the trial-and-error school of html (aka the google and wikipedia school) so it’s nice to have it all set out. Also, didn’t know that nesting was important. So all silliness aside, thank you!
August 31st, 2006 at 10:55
Excellent overview, Mike, without getting bogged-down in unnecessary detail.
September 2nd, 2006 at 16:07
Oooh, this will make me feel so much more celverererer when I make comments now! I won’t show off like Sherdie (although if she hadn’t done it I would have). Thanks for the tips!
September 2nd, 2006 at 16:20
Dion: Thanks, hopefully I found the sweet spot between too much and not enough.
Miff: Happy to help!
October 9th, 2006 at 1:04
Thanks a lot for posting this- found it through Google. Very helpful.
January 12th, 2008 at 10:13
Thanks, John. You’re welcome.
January 17th, 2008 at 8:02
Ah - thanks to Google eh…
Just what I needed to know thanks Mike… Cheers
Belongum
January 18th, 2008 at 1:26
You’re welcome, Belongum. Thanks for dropping by and commenting. This post seems to get quite a few visitors via Google.
March 11th, 2008 at 9:33
Hello,
I have a question: do you have the code/instruction for adding this “leave a reply” section for each post in Blogger?
March 11th, 2008 at 10:15
G’day Kimsta. This is a self-hosted WordPress blog backed by a mySQL database. I’m pretty sure the code you are after is part of the WordPress software which is available free.
However, I don’t think out-of-the-box Blogger allows you to enter comments on the same page as the post. Instead it takes readers off to a separate https:// page.
Even if we could modify a Blogger template to include this “Leave a Reply” form, I doubt Blogger would give our code permission to write to the database where comments are stored. Interesting idea though.
Cheers — Mike
March 11th, 2008 at 11:17
Thanks for the reply, Mike. How is Beautiful Queensland today? I’m from Melbourne
March 11th, 2008 at 11:26
28°C, gentle breeze, dappled sky, you wouldn’t like it. Victorians should stay where they are and be happy with their lot.
April 17th, 2008 at 23:42
Thanks for the tips. I was trying to edit some comments in my own blog, and then realized I had turned off all the formatting. Now happy again, thanks for the tips.
April 24th, 2008 at 3:54
Just testing the italics command. Thanks.
April 24th, 2008 at 9:51
You’re welcome, Susan.
Chris, congratulations! You italics skills are now second to none!
April 28th, 2008 at 3:30
I did it! Maybe now my blog will get noticed a bit more. Thank you.
May 17th, 2008 at 2:53
test
google
test
google
July 18th, 2008 at 0:49
Absolutely great - thank you! Easier than I ever would have thought. Mind if I practice?
September 4th, 2008 at 10:17
Thank you. Good stuff and helpful for a rookie like myself.
September 25th, 2008 at 23:01
Great information - just what I was looking for! Thank you!!
September 26th, 2008 at 23:25
I have been trying to figure out how to put links to blog posts I wanted to reference in comments for AGES. This is a life saver. Thanks!!
October 13th, 2008 at 0:56
I am looking for a way to add such tags as a in comments. Any idea how I can do it?
October 20th, 2008 at 0:07
“You can use some HTML tags, such as <b>, <i>, <a>”
The words, “such as” lead me to believe other tags I can use i the when commenting back. Are there other tabgs I can use? What are they?
Thanks.
December 13th, 2008 at 2:37
i want to try this because I couldn`t make it work!
December 16th, 2008 at 1:02
Mike
Thank you for your very usable information!
I’ve always wondered how the tech experts were doing that!
I will use it for my Positive Affirmations based website! (Hope that works!?)
Thank you again,
Johnny London
December 16th, 2008 at 1:40
Hi Johnny,
I see you also added the rel=”nofollow”. Are sure you are a newbie at this?
December 16th, 2008 at 23:23
Thank you. Good work!
December 22nd, 2008 at 11:29
This is good news!
Thanks,
Good News Economist
January 26th, 2009 at 5:39
Thanks a bunch for posting this information. Exactly what i was looking for.
March 21st, 2009 at 1:33
Thanks…I was able to hyperlink in my comment!
June 7th, 2009 at 8:17
Thanks, for this article I can now link in Blogs…Finally
Thanks,
Radko Christmas Ornaments
June 11th, 2009 at 17:25
Thanks Mike, you explain this so well, I often get asked how to hyperlink comments, and it’s difficult to explain. I’ll be sending them to you in future.
June 11th, 2009 at 22:54
Thank you. Now I can look as cool as the next sweet talking guy.
Here is my first attempt…
Andy Sewina passed this on to me.
August 28th, 2009 at 12:25
I’ve been wanting to insert hyperlinks into blog comments for a long time. Wish I had found you sooner! Thanks.
October 3rd, 2009 at 21:45
Nice article.
May I ask, is there any way to change allowed tags in comments box?
(In wordpress I know there is, so I ask for blogger).
Some wordpress blogs allow: object, embed, and img tags in comment box so yoy can embed a youtube video as a comment!
What about blogger?
Thanks.
October 7th, 2009 at 15:32
ok what the heck,
Im folloing exactly what you say but my super awesome comment isent leading to superawesomedating.com when i use it on other sites.
Either the link is just highlighted but is not clickable OR it creates a hyperlink to (for example) www.domain.com/post-title/comments-page-2/superawesomedating.com which ends up as a page not found error.
Please help! Feel free to email me.
October 7th, 2009 at 16:50
Hi David,
Your link is missing the “http://”
Do this: <a href=”http://www.domain.com”>super awesome</a>
NOT this: <a href=”www.domain.com”>super awesome</a>
Without the “http://”, your link is interpreted as a page on the current site.
Cheers — Mike
October 15th, 2009 at 6:21
Hi Mike,
Thank you for such a great explanation! Your article helped me to place a Hyperlink in the Blogger comment form.
Cheers buddy!
November 11th, 2009 at 1:38
Thanks - I was looking for that.
And a test to see if I got it right!!
If you use xTuple and want your database in the cloud - then we have a hosted solution
November 11th, 2009 at 7:45
Hi Mitch,
Unfortunately your hyperlink contained too many double-quotes around the hyperlink address.
You said:
we have a <a href=””http://www.opensurgegroup.com/host/host.html”” rel=”nofollow”>hosted solution</a>
Try this instead:
we have a <a href=”http://www.opensurgegroup.com/host/host.html” rel=”nofollow”>hosted solution</a>
November 20th, 2009 at 17:02
Thanks for the info. Its good to know. I’ll have to share a link on my blog: www.ninehats.com
November 20th, 2009 at 21:33
I wish it would allow the <ul> tag so one could show lists in comments.
December 5th, 2009 at 14:19
can i insert a picture in the comment?
December 28th, 2009 at 17:38
hello sir.
can you tell me how to post an HTML comment (for example, image from photobucket.com) then below the image, you will write your message without being hyperlinked..
that’s really my problem now..
can you tell me what to enclose my text ?
thank you very much.
God bless.
December 28th, 2009 at 23:37
Hi Freann, Something like this?
A picture with a caption.
Note that not all blogs will allow images, but if they do, here’s what you need for the image…
<img src=”http://url_of_your_photobucket_image” />
Your caption is then just plain text on the next line.
Cheers — Mike
December 30th, 2009 at 23:22
Thank you So Much. I have been Searching for this.
I used it on my website’s comment Casino Galore
January 2nd, 2010 at 3:01
Hi, Thanks a lot, dear Mike, for the wonderful tutorial on HTML for formatting Blogger Comments. I’ve just tried in in my blog and it seem to work fine.
I’m just trying it out, here, too, just in order to check up. Hope, you don’t mind.
NETAJI GAVE FIRST FREEDOM TO INDIA IN ANDAMAN
January 2nd, 2010 at 3:04
Woooooooow… Look at that…!
It does work, Mike! Thanks a ton, again, for the excellant tutorial! Wish you and your family a mighty Happy, Peaceful and Prosperous New Year 2010…! Cheers!!! :))
Shrinath Vashishtha
Port Blair
Andaman & Nicobar Islands (India).
January 6th, 2010 at 14:56
Thank you! Your post is the first that popped up when I searched “hyperlink in blogger comment”, and I have referenced your instructions multiple times already. Finally, I know how to put my website address in as a link (www.thegiftedblog.com) and not plain text!
Really appreciate it.
January 31st, 2010 at 14:33
I’m testing this out….this was helpful!