In this post Macro Raman shares a fantastic script he created that allows people for the first time to add images, different color text and scrolling text to comments on Blogger.Here on Spice Up Your Blog we have made great strides in improving the Blogger comments with tricks like Adding
Replies To Blogger Comments and
Adding Smileys and Emoticons to Blogger Comments.This script will bring the comments on your blog to another level allowing readers to use different colors, share images and just for fun use Marquee scrolling text when they comment.
Live Demo - Click To See The Demo :
Blogger Comment Images And ColorsMacro writes his blog in Tamil but has done a great job in Writing this post in English to share his new script with Spice Up Your Blog Readers.I will summarise the steps and show you how to add a message above the comment form to let readers know of the options below Macro's post.
Note - This post and script can not be republished on other blogs by request of Author, if you want to share this you may link to this post.
New Blogger Scrip Display Images And Colors In Comments
Guest Post - By
Macro RamanWe do see many of them chats with shorten words, symbols, smileys and more to tell in short form. Now its a time of zero typing where image speaks a lot more than words. Let us imagine there is a colorful animated new year greeting post where you like to greet the author the same way.You know greeting pictures speak Louder than words,so you too created a splendor greeting picture for the blog author but the blog restrict you to post images. Then?
Of course, Blogger.com restrict the readers to post images in their comments column.We know It is possible to posts picture comment in wordpress blogs by adding just <img> tags. then what is the solution for the blogger's blogspot? Here I introduce new javascript which try to minimize the maximum extend of this restriction. and be aware of it that it doesn't work in script disabled browsers.
How to add image?This is just simple, you need to start with [im] and end with [/im] place your image address in between of it.Like This :
[im]http://domain.com/folder/sample.jpg[/im]
How to install?This is the code
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-IlJVzvSCVVSsiCqqQ5Bn4soziCBcd7DetVFsPvbjCMRJ136yeOqY41CdMZtj3Bmb2_OwWRCin7zuIs-dxw9tyc2fitpdO8ZFi2IccLjOnhdWkFxtY-8y6mryCktW5nJpQbhnIa-_1ZaB/s1600/best+blogger+tips.png'/></a><script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'/><a href="http://www.spiceupyourblog.com">Best Blogger Tips</a>
which you need to paste it before </body> in the source code of blogspot or any blogger's website.
That's it The Script take care of it, and don't forget to tell to your readers about picture comments.
What more ?Do you need more colorful comments? then use :
[ma]....your text...[/ma]
for marquee effect i.e. running letters.
[co="red"]...your text...[/co]
for red colored text. you can change the color as your wish.You can try this code and add what you feel, if you agree.
Summary And Message Above Comments
Add The Script To Your BlogStep 1. Click Design > Edit Html
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code -
More Info)
</body>
Step 3. Copy And Paste The Following Code Directly Below / Under </body>
<script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'/><a href="http://www.spiceupyourblog.com">Best Blogger Tips</a>
-To add an image to a comment wrap it in [im][/im] like this :
[im]Image URL Here[/im]
-To Change Color Of Text In Comment Wrap It In [co="color"][/co] Like This :
[co="red"]Comment Text Here[/co] - Change Red To The Color You Want.
-To Add Marquee Text Wrap It In [ma][/ma] Like This :
[ma]Comment Text[/ma]
Add Message Above Comment Form
You will want to let your readers know the options so below i will show you how to add a message above the comment form.You can see the message we are adding on the demo.
Step 1. In your Blogger Dashboard click > Design > Edit Html > Expand Widget Templates :
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code -
More Info)
<p><data:blogCommentMessage/></p>
Step 3. Copy And Paste The Code Below Directly After <p><data:blogCommentMessage/></p>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-IlJVzvSCVVSsiCqqQ5Bn4soziCBcd7DetVFsPvbjCMRJ136yeOqY41CdMZtj3Bmb2_OwWRCin7zuIs-dxw9tyc2fitpdO8ZFi2IccLjOnhdWkFxtY-8y6mryCktW5nJpQbhnIa-_1ZaB/s1600/best+blogger+tips.png'/></a><b>Comment Options -</b> You Can Add Images, Colored Text And Marquee Text To Your Comment.<br/><br/><b>Image -</b> [im]Image URL Here[/im]<br/><b>Colors - </b>[co="red"]Comment Text Here[/co] - Change Red To The Color You Want.<br/><b>Marquee -</b> [ma]Comment Text[/ma]<br/><b>Get This -</b> <a href="http://www.spiceupyourblog.com/2010/12/images-colored-text-blogger-comments.html" target="_blank">Blogger Comment Script</a><br/>
Save Your Template and your readers will now know all the options they have.
Author -
Macro is a Blogger And Designer, he created this script and wanted to share with Spice Up Your Blog Readers.You can find Macro on his
Blog.
The floating share bars are very popular among bloggers.You know the bar the scrolls along beside posts as you read.These allow you to Tweet and Like the post at anytime.This is a very cool WordPress plugin that works with the same principle but for your comments.The floating comments plugin places a miniature comment form beside your posts that scrolls so readers can comment anytime.Once the reader clicks inside the comment field it opens with the options to add a comment.The comment form is then set so the page does not need to reload once the reader adds their comment so they can continue reading.
In January 2010 i published what has become the most popular Search Engine Optimization (SEO) posts on Spice Up Your Blog (SUYB).The post titled '
In the comments here on Spice Up Your Blog when i as the admin or author, post a comment in the bottom corner there is a sparkling animated badge with the word 'Admin'.I have received so many requests to cover this in a tutorial so today i will show you how it's done.OK so back in April i published a post showing how to use different colors on the authors or admin comments on Blogger and we actually use the very same technique here but this time with a background image.While i will give you the URL for the admin badge i have been using and everyone seems to like so much you can use any image.
A question i was asked this week was 'I notice a big empty gap below the comment form on my blog.There is a big space between the comment form and the older posts, home and newer posts links, is there a way to remove it ?'.The problem is in the size given to the iframe for the comment form and you can indeed remove the space by making the iframe smaller.We simply find the code for the comment form iframe and make a quick change, couldn't be easier.
In the comments for my Recent Post about the 
One of the features i have seen added to comments on Wordpress blogs recently is the Facebook like button.This is a quiet clever addition to the comments as the like button only takes a second to click and if a reader is leaving a comment they obviously do like or have an opinion on the post making them more likely to share your post with their facebook friends.So in this post i will show you how to add a 