Show / Display Skype Emoticons In Blogger Comment Form

skype-in-Blogger Many tutorials have already been published on how to display emoticons in BlogSpot comments but since unique content is what MBT always publishes, today we will learn on how to add a collection of cute Skype emoticons above Blogger comment form. The tutorial is as easy to understand as you can imagine! :>

 

 

Kindly have a look at the demo first,

Live Demo

 

Follow These Steps:

  1. Go to Blogger > LayoutEdit HTML
  2. Check the “Expand Widget Templates” box
  3. Search for,

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

   4.     Just below it paste the code below,

<div style=' width: 370px;  text-align: left;  border: 2px solid #0084ce;  background: #FEF9EA; padding: 10px;   color:#0084ce;  font-weight:bold;  '>

<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif'/> :a

&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/> :b

&#160;
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/> :c

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/> :d

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/> :e

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/> :f

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/> :g

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/> :h

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/> :i

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/> :j

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/> :k

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/> :l

&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/> :m

&#160;
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/> :n

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/> :o

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/> :p

&#160;
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif'/> :q

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif'/> :r

&#160;
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif'/> :s

&#160;
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif'/> :t
</div>

Save your template and view your blog to see a rectangular block of emoticons as shown below,

skype-emoticons-above-blogger comment form

 

Note:- To change the appearance of the rectangular block simply edit the code in bolded green colour

    5.. Now find </body>  and paste the code below just above </body>

 Note:- You can also try adding the code below just above </head> instead.

<script type='text/javascript'>

//<![CDATA[
a = document.getElementById('comments');
if(a) {
    b = a.getElementsByTagName("DD");
    for(i=0; i < b.length; i++) {
            if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') {
                _str = b.item(i).innerHTML.replace(/:j/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:k/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:l/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:m/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:n/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:o/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:p/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:q/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:r/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:s/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99zPt4vI/AAAAAAAAC90/SOCwFsYa4M4/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:t/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");

                _str = _str.replace(/:a/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7jnvQpuI/AAAAAAAAC8s/kgswZH3dAng/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:b/gi, "<img src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:c/gi, "<img src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:e/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:f/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:g/gi, "<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:h/gi, "<img src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:i/ig,"<img src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
                b.item(i).innerHTML = _str;
            }
    }
}

//]]>

</script>

 

 

     6.  Save your template and view the beautiful change! :D

The Emoticons Will appear In Both Readers and Author’s Comments!

As you know the yahoo smileys tutorials has one disadvantage and that is that the emoticons appear only in readers comments and can not be displayed in author comments. In order to make the emoticons appear even in Authors comment block then simply replace the code in bolded red colour above (i.e  Author-comment-body ) with the CSS class for blog owners customized comments. If you do not know how to do it then simply share your blog URL and I will let you know what code should you paste instead of Author-comment-body

How did you find it?

I made it as simple as it could be and I hope it will add an extra sweet flavor to your blogs. The codes for the emoticons are made easy so that readers could easily use an emoticon of their choice. You can increase the number of emoticons and can also customize the look and feel of the rectangular box of emoticons that will appear above the comment form. I wrote this in hurry so if you have any questions just drop me a hi! :>>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

41 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. It doesn't seem to be working for me. :( The images show, but the script won't work. Help please!

    ReplyDelete
  2. Also one more. Without your permission, I have added your link in my blog. See that on my "My Friends" Sidebar widget. So sorry.

    Please help me with this emoticon script. Its not working in my blog. Just visit the mentioned post comment section. You can see that. There are two comments and both are mine.

    ReplyDelete
  3. Great Mohammad! You are the first to do that. But, I use Yahoo smiley in comments. This is also good, I will try it ;) And yes, take a look my new custom domain:

    www.hacktutors.info

    Thanks!

    ReplyDelete
  4. hmmm...emoticon anymore
    its a great...cool b-)

    ReplyDelete
  5. i'll waiting for your template...hohohoho ;)
    thanks...:-bd

    ReplyDelete
  6. @Robin Hood

    Dear I have updated the post. Kindly re-add the Javascript code again according to the instructions above.

    If it still did not work then add the code above </head>

    And yes it is more than an honour that you have added the MBT badge on your Blog. Thanks a bunch for that love and respect! :>>

    ReplyDelete
  7. No dear. Its not working too. Any I got fed with it. Tell me what to do.

    ReplyDelete
  8. @Robin Hood

    Dear I have visited your blog. The main reason that I see is that you have used pretty dense javascripts everywhere. The blog load time is great too. These emoticons work best on templates with neat and light coding. Kindly try the code on some other test blog. I have checked the code on all my test blogs and they work just fine.

    The best solution is to try it on another blog and see if it works. This way you may figure out the problem your self. If you still want them to appear on your current blog then email me your template I will do it for you :>

    ReplyDelete
  9. Mohummad that is really something remarkable. You have utilized the code really well. Thumbs up bro!

    ReplyDelete
  10. Ok Brother. I am sending my template to you. Ooops. What is ur email Id?

    ReplyDelete
  11. The main reason is I could not find the tag you told to search for in the step 3. Can you find the related or the same tag in my blog.

    ReplyDelete
  12. @Robin

    My email Id is mustafa.stc @ G M

    It will work just fine. Just chill for the time being and leave the burden on me :p

    ReplyDelete
  13. @Anonymous

    Those remarks sounded kewl! Thanks pal! :>>

    ReplyDelete
  14. Check your mail brother. I have send my blogger template. Kindly go through it and pls insert two things in it 1. the smiley on the comment form and 2. Highlighting Author comments.

    ReplyDelete
  15. @Robin Hood

    Dear I spent 15 minutes in figuring which class describes your comment styling. Honestly it is one of the terribly coded template with no proper CSS rules applied. The reason why the emoticons are not appearing is because it is not clear which class to use either it is comment-body collapseable or commentlist or comment nothing is clear tried all. The only solution left is to change the entire styling of your comment body but that will take me a further 20 minutes which I am afraid I can not afford. But bro you must pay attention to the huge number of Java-based widgets and to the compatability of your template because just on a single view I can assure you that you are going to suffer a lot on the hands of search engines because the template is really not optimized!

    Mentioned all these points because a good template is the pioneer step towards Blogging success! Hope you got the point! :)

    ReplyDelete
  16. Congrats Mohammad. You got your pagerank 3 :) Before these days I shifted my blog from hacktutors.blogspot.com to www.hacktutors.info therefore, I get dropped my PR 0 :(


    What I have to do to gain back my pagerank?

    Anup

    ReplyDelete
  17. @Anup

    Thank you dude for being the first to wish me such a good news!:D
    yeh it is normal to loose PR when you change domain. I also lost PR-2 when I changed to mybloggertricks.com from tnt-by-stc.blogspot.com. It took me 40-50 days to get it back. So it is normal to get the PR back within 5-7 only if your backlinks are intact. So just wait till then and keep blogging because you need to live several good experiences in future.=D

    ReplyDelete
  18. Thanks Mohammad for encouragement. I'm dropped in tension before. But, you encourage me highly with lecture :) Best of luck for your future too ;)

    Thanks again!

    ReplyDelete
  19. testei no meu blogs mas não deu certo.

    ReplyDelete
  20. Made all the steps, but don´t work at my blog.

    ReplyDelete
  21. Hey, can i add the (smileycodetext) to (textarea) by clicking the smiley?

    tell me how to do that?

    ReplyDelete
  22. @shoplicius

    Kindly replace comment-body with this comment-author

    You can find this code just after the bolded red text in the code above
    @Anup

    You are always welcomed! :>

    @Muhammad
    I really don't know any such way as yet! But I will surely see if any such script exists. Thanks for the idea! :)

    ReplyDelete
  23. hello mohamad,

    im fail to do that lol. 5 time to tried. :(

    ReplyDelete
  24. @fid
    where exactly are you facing problem. Were you able to add the box just above your comment box?

    Do one thing replace Author-comment-body with comment-author


    Let me know..

    ReplyDelete
  25. Hello Mohammed,

    Good evening!

    I visited your tutorial from a Brazilian blog's article about emoticions at Blogger, called "Dicas para Blogs". I've talked with the blog's owner about my problems with Blogger, but he couldn't know what that problem. I visited your blog beyond his blog's origin and I resolve my problem with you so I see you're verye xperient in HTML and CSS, I'm sure you can help me. Let's?

    Then, I followed your teachings, I added my own Ubuntu emoticions and wrote the correct codes as your codes with the image's correct codes. I also added the correct script codes part. I could save my blog.

    I was going to test my comment. The emoticions work in the comment body. See the image:
    http://img526.imageshack.us/img526/6928/listadeemoticions.png

    But when I wrote a comment, the emoticions didn't appear, see the exmaple:
    http://img502.imageshack.us/img502/9674/errodocomentrio.png

    I know you would go to tell I should decrease many emoticions to few emoticions, but I've already decreased to 24 emoticions but the emoticions didn't appear in a comment that i wrote either.

    Your emoticions work in my blog.
    I don't know why and what this problem is. Then what is this problem?

    Thank you!

    Gustavo Reis
    From Brazil

    ReplyDelete
  26. Hi Mohammed

    this simply not works though, neither in FF nor with IE, i can see the emoticons with both browsers after installing them, but if you click they not appear in the comment box, i use MBT Church Test theme without any code.............

    i have done this long and correct and now i am giving up

    ReplyDelete
  27. @Gustavo

    Sorry brother I was busy with exams. If you are reading this comment then please confirm so that I could start helping you with the problem.

    @JennyKanchana

    Dude its simple. You just don't need to click the emoticons rather paste the code like :r :p. Hope you get it.

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
  29. Mohammad ji,

    Fantastic trick and it work like a charm

    see my blog

    www.egyhacks.net

    Thanks.

    ReplyDelete
  30. Not working for me..pls check following url..

    http://www.prasadchavan.tk/2011/03/will-we-be-able-to-see-and-know-our.html

    ReplyDelete
  31. @Prasad
    I checked your blog and you installed the codes correctly..
    And I see that its not working...

    Try replacing Author-comment-body with comment-author as suggested by Mohammad and lets us if it still doesn't work..

    ReplyDelete
  32. hello bro mohammed just installed this script and the emos are visible already but after commenting it doesnt appear in the commented post

    ReplyDelete
  33. forgot to enter my website
    www.shababfci.com

    ReplyDelete
  34. Hi Mohammad!
    Fantastic trick, thank you.
    Please tell what to put instead of
    'Author-comment-body'
    http://westplains-mon.blogspot.com/

    ReplyDelete
  35. @mon.romanoff

    thanks brother. In your case kindly replace it with comment-author

    ReplyDelete
  36. Lol I have successfully added the code. Thank you, bro!

    ReplyDelete
  37. not bad but yahoo emotions are more than skype emotions

    ReplyDelete