Adding images and more text formats to the body of the comments


In a couples tutorials on the comments subject you have learned how to make the comments area better.
Now you can change the default style of the comment form, you can have threaded comments on your blog; but when posting a comment you are limited only to 3 ways to format your comment: bold,italic and anchor tags. In the next tutorial you will learn how to format your comments better.
After this tutorial you and your visitors will be able to add image in the body of the comment, to add marquee text, or text with different color, with different size.
 Also you will be able to center the text, to create a box around it and a couples other formats.



How to add images and format text in comments body?

1. Log in to your dashboard--> Template- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find </body>. Before it paste the code:

<script type='text/javascript'>
        //<![CDATA[
/*developed by neechalkaran@gmail.com*/
a=document.getElementById('comments');
if(a){b=a.getElementsByTagName("DD");for(i=0;i<b.length;i++){_str=b.item(i).innerHTML.replace(/\[im\]/gi,"<img src=' ");
_str=_str.replace(/\[im\#\]/gi,"<img width='100%' src='");_str=_str.replace(/\[\/im\]/gi,"' class='image'/>");
_str=_str.replace(/\[ma\]/gi,"<marquee>");_str=_str.replace(/\[\/ma\]/gi,"</marquee>");_str=_str.replace(/\[si\=\"/gi,"<font size='");
_str=_str.replace(/\[\/si\]/gi,"</font>");_str=_str.replace(/\[co=\"/gi,"<font color='");_str=_str.replace(/\[\/co\]/gi,"</font>");
_str=_str.replace(/\"\]/gi,"'>");_str=_str.replace(/\[ce\]/gi,"<center>");_str=_str.replace(/\[\/ce\]/gi,"</center>");
_str=_str.replace(/\[ma\+\]/gi,"<marquee direction='right'>");_str=_str.replace(/\[\/ma\+\]/gi,"</marquee>");_str=_str.replace(/\[box\]/gi,"<table frame='box'><tr><td>");
_str=_str.replace(/\[\/box\]/gi,"</td></tr></table>");_str=_str.replace(/\[mark\]/gi,"<table align='center' frame='vsides' width='70%'><tr align='center'><td>");
_str=_str.replace(/\[\/mark\]/gi,"</td></tr></table>");_str=_str.replace(/\[line\]/gi,"<hr/>");
_str=_str.replace(/\[card\=\"/gi,"<table align='center' border='1' width='75%'><tr><td align='center' bgcolor='");_str=_str.replace(/\[\/card\]/gi,"</td></tr></table>");
_str=_str.replace(/\[hi\=\"/gi,"<span style='background-color:");_str=_str.replace(/\[\/hi\]/gi,"</span>");b.item(i).innerHTML=_str}}
 //]]>
    </script>

/*For adding video in comments body*/
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

4. Find <b:loop values='data:post.comments' var='comment'> and before it paste the next code: <div id='multimedia'>. Then find </b:loop> and after it paste the closing tag </div>


5. How to add your images and the rest of the text formats? Just use the next tags to make it appear on your comments.

To get Images [im].....[/im]
To get scrolling effect [ma]....[/ma]
To decide font size you can change numbers} [si="2"]...[/si]
To decide font color [co="red"]...[/co]
To centralize the text [ce]...[/ce]
To get scrolling effect in right side [ma+]...[/ma+]
To box the comment [box]...[/box]
To mark the comment [mark]...[/mark]
To get background effect [card="blue"]...[/card]
To get image to fit the column(width=100%) [im#]...[/im]
To Highlight the words [hi="yellow"]...[/hi]
To add video only from Youtube.com [youtube] link of the video [/youtube]

 IMPORTANT: Replace the " ... " with the text or link to the image.

VERY IMPORTANT:

It's possible that in some blogs this trick won't work. Seems like those blogs don't have tagname 'DD'. You have to change your template or add those tag names for the comment div. How to do it? It's simple, just find the next code:

<p><data:comment.body/></p>

... and replace it with the next one:

<p><dd class='comment-body collapseable'><data:comment.body/></dd></p>

Get Latest Updates For Free!

Subscribe via Email

22 comments

Arash
September 16, 2011 at 3:13 PM

Nice. Thank you very much for the tutorial.

September 16, 2011 at 4:26 PM

@Arash Glad i can help.

September 16, 2011 at 7:53 PM

WOW...this is awesome anymore...
hihihi
good good master \m/

September 16, 2011 at 8:54 PM

how to add embed video master...xixixixi

September 17, 2011 at 12:48 PM

@Beben KobenI updated the tutorial. Check the changes to step 3 script to see how to add video to comments.

September 17, 2011 at 7:49 PM

@ArtisTutor i have write email to neechalkaran and you has make it...
hihihi awesome master...thanks ;)
usually, repost to my blog master...hohohoho

September 17, 2011 at 8:14 PM

not worked!!! wekekeekkk :P

September 17, 2011 at 8:48 PM

@Beben KobenWell it should work. I have tested in one of my blogs and it work.
Make sure you respected all the steps.

By the way I didn't get any email from you. :)

September 17, 2011 at 10:24 PM

i think this is trouble my master...
it's your's
src='http://www.youtube.com/embed/"

src='http://www.youtube.com/embed/'"

minus '

September 17, 2011 at 10:35 PM

after work add frame youtube on comment...when to the press play
an error occured please try again
LOL

and one more thing, after do it comment with youtube tag, next comment not it/look...i don't why...hihih..hihihi

September 17, 2011 at 10:49 PM

@Beben Koben Well I don't know what to say.

Here is another of my blogs and it work just fine:

http://tyjuj.blogspot.com/2011/04/test-hideshow-full-post.html

When you add the link it must be like this:

[youtube]http://www.youtube.com/watch?v=6ku-n_F7MXk[/youtube]

September 19, 2011 at 8:27 PM

are you forgotten the closed script for youtube that much just what some less! example to cover such

theText = theText.replace (/ \ [\ / youtube \] / gi, "? rel = 0 'frameborder = '0' allowfullscreen> ");

September 19, 2011 at 8:47 PM

@ocimnet Yes that was the problem. Thanks for the correction.

December 31, 2011 at 4:43 PM

my man ....what's going on with mine ????
i can't add this script to mine ... when i put it to my edit html and when i save it then show the message like this :

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "dl" must be terminated by the matching end-tag "".

why ??? could you tell me why ??? coz i'm a new comer in the cyber blog :'(

January 5, 2012 at 11:35 AM

@Aksatriya Diwangkara NusantaraMake sure you follow the exact steps in the tutorial.

February 10, 2012 at 8:01 AM

I used your code in my blog. Almost every thing works except the you tube function.

There is this text on the very left bottom of my blog in small letters:
/*For adding video in comments body*/
It's not in a 'gadget' it's on the background.
http://ziggyflo.blogspot.com

I can't find the comments to read or subscribe to. Please help me with the solution.
ziggyflo@aol.com

February 10, 2012 at 10:39 AM

@ZiggyFloFind that text in your template and delete it.

February 11, 2012 at 2:41 AM

Thanks, I removed the text, but I still can't get the video option to work. All the other options work great.

February 22, 2012 at 8:59 PM

WOW. This is very impressive! :(o)

February 23, 2012 at 6:14 AM

I found so many methods of replacing the tag to another tag using JQuery on Stackoverflow. I just give you a new solution. The thing is, if I use this, when I saw the comments list on the classic way (popup window), every comment is so messy.

However, by using two existing tags (<b> and <i>), you can change the object without having to worry about bad fallback. And it worked fine on my blog. Thanks a lot for this idea. Thanks!!!!

Example:

Replace <i rel="pre">code here...</i> with <pre>code here...</pre>:

$('#comments dd').each(function() {
$('i[rel="pre"]').replaceWith(function() {
return $("<pre />").append($(this).contents());
});
});


Etc.. etc...

March 9, 2012 at 12:26 PM

I wanna share your post on my facebook,u know,the link,I like your post! is that ok?

March 9, 2012 at 8:00 PM

@beats headphones Yes you can share my posts on facebook :)

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers