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

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

Friday, September 16, 2011 | Posted by ArtisTutor | Edit Post

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>

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email