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,
Follow These Steps:
- Go to Blogger > Layout > Edit HTML
- Check the “Expand Widget Templates” box
- 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
 
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z7j2K2ixI/AAAAAAAAC8w/aBjS3JiC9fA/s800/emoticon-0101-sadsmile.gif'/> :b 
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z7kDXfZsI/AAAAAAAAC80/JrDuueBH-mE/s800/emoticon-0102-bigsmile.gif'/> :c 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kQ8V_nI/AAAAAAAAC84/9WEQPmHLJiI/s800/emoticon-0105-wink.gif'/> :d 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z7kWgRFeI/AAAAAAAAC88/2jjlfg01MIA/s800/emoticon-0104-surprised.gif'/> :e 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FBbw3UI/AAAAAAAAC9A/8iSol6bUSDk/s800/emoticon-0106-crying.gif'/> :f 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FdrL9dI/AAAAAAAAC9E/rbB37xy1Ybw/s800/emoticon-0109-kiss.gif'/> :g 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z8FpL8dkI/AAAAAAAAC9I/p_OhzAyH-SQ/s800/emoticon-0111-blush.gif'/> :h 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8FmT-INI/AAAAAAAAC9M/GOURDHmPe9E/s800/emoticon-0110-tongueout.gif'/> :i 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z8Fw5N1LI/AAAAAAAAC9Q/xY9rjSFroCY/s800/emoticon-0126-nerd.gif'/> :j 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z9DendQuI/AAAAAAAAC9U/jtRdRpcopRQ/s800/emoticon-0103-cool.gif'/> :k 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9DcebxfI/AAAAAAAAC9Y/Xew2m0j1B9I/s800/emoticon-0130-devil.gif'/> :l 
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9DpaPbrI/AAAAAAAAC9c/M74FsmQxqrw/s800/emoticon-0133-wait.gif'/> :m 
<img border='0' src='http://lh4.ggpht.com/_7wsQzULWIwo/S6z9D-KY1cI/AAAAAAAAC9g/PZppx2BcToc/s800/emoticon-0137-clapping.gif'/> :n 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z9D6YdKmI/AAAAAAAAC9k/io_WlgJQL2w/s800/emoticon-0136-giggle.gif'/> :o 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99cfdl1I/AAAAAAAAC9o/aJP10AXzhGE/s800/emoticon-0141-whew.gif'/> :p 
<img border='0' src='http://lh3.ggpht.com/_7wsQzULWIwo/S6z99UcZMKI/AAAAAAAAC9s/p7NVe245uP4/s800/emoticon-0148-yes.gif'/> :q 
<img border='0' src='http://lh5.ggpht.com/_7wsQzULWIwo/S6z99sMaIFI/AAAAAAAAC9w/gIu5t9057us/s800/emoticon-0149-no.gif'/> :r 
<img border='0' src='http://lh6.ggpht.com/_7wsQzULWIwo/S6z9-FFVEeI/AAAAAAAAC94/T1IXnlT43-M/s800/emoticon-0178-rock.gif'/> :s 
<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,
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! :>>
|
Respected Readers:
|
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
subscribe to our regular Email Updates!
49 comments:
It doesn't seem to be working for me. :( The images show, but the script won't work. Help please!
Its not working in my blog buddy. Keep a look in this post http://robinhoodsoftwares.blogspot.com/2010/03/download-nitro-pdf-professional-6031.html
I just added the emoticon. But I can see only the letters and not the graphics. Please help me
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.
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!
hmmm...emoticon anymore
its a great...cool b-)
i'll waiting for your template...hohohoho ;)
thanks...:-bd
@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! :>>
No dear. Its not working too. Any I got fed with it. Tell me what to do.
@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 :>
Mohummad that is really something remarkable. You have utilized the code really well. Thumbs up bro!
Ok Brother. I am sending my template to you. Ooops. What is ur email Id?
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.
@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
@Anonymous
Those remarks sounded kewl! Thanks pal! :>>
greats....
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.
@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! :)
Thanks..!!! ^^
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
@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
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!
testei no meu blogs mas não deu certo.
Made all the steps, but don´t work at my blog.
Hey, can i add the (smileycodetext) to (textarea) by clicking the smiley?
tell me how to do that?
@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! :)
hello mohamad,
im fail to do that lol. 5 time to tried. :(
@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..
http://bhagyapwc.blogspot.com
can you please tell me what to put in to Author-comment-body ??
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
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
@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.
Mohammad ji,
Fantastic trick and it work like a charm
see my blog
www.egyhacks.net
Thanks.
Not working for me..pls check following url..
http://www.prasadchavan.tk/2011/03/will-we-be-able-to-see-and-know-our.html
@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..
hello bro mohammed just installed this script and the emos are visible already but after commenting it doesnt appear in the commented post
forgot to enter my website
www.shababfci.com
:(
Hi Mohammad!
Fantastic trick, thank you.
Please tell what to put instead of
'Author-comment-body'
http://westplains-mon.blogspot.com/
@mon.romanoff
thanks brother. In your case kindly replace it with comment-author
Thank you very much!
http://hritikroshanisthebest.blogspot.com/
Lol I have successfully added the code. Thank you, bro!
surelink making designing look more smart !!
Pull Up banner
Not working bro..
www.ProHacker.IN
Dear Mhmd bro..
Please visit my blog and do help me..
Waiting eagerly!!
www.ProHacker.IN
Este blog é uma representação exata de competências. Eu gosto da sua recomendação. Um grande conceito que reflete os pensamentos do escritor. Consultoria RH
NIce emoticions
check this also it will increase value of these emoticions
http://www.tech-cave.com/2011/12/how-to-add-skype-emoticons-to-your-blog.html
Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Try the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon my review.
Regards,
Mohammad