Sunday, 8 February 2015

How to Add Emoticons (Smiley) in Blogger Comments

Make your blogger comments interesting and more productive for your readers with emoticons.  10 types of emoticons have been provided.

Add emoticons in blogger comments

Update - 1: This posted have been updated for your use. I have also been able to provide you to choose your specific emoticon/emoticons as per requirement, for this simply edit the variable emocode.

Update - 2 Two more New Emoticons have been added and code had been optimized to include only emotions in your widget, the ability to insert code and block-quote have been removed. If you are using it previously we recommend you to update your code.

Emoticons can be really useful to express your comment more effectively. This also make your blog stand out and encourages your readers to comments on your article. Though is pity it is not provided by default in blogger.

But sure we can easily add this emoticons plugin in blogger commenting system. I have made this plugin very interesting and easy to use. I have also provided not one type of emoticon but eight TEN types of emoticons for you.

Its best for us to provide you with more than one option since every blog template is quite different from each other. Choose any one of the below emoticons and stick to it. It is important to note that once you have added one of emoticons then you could not be able to shift to another type of emoticons since they are not compatible with each other.

The code provided here lets you choose various options for you. Like in case you can allow readers to insert images in comments or add code snippets or blockquote. For more information read this article.

How to add this emoticons in your blogger comments?


Step 1: Make a backup of template before proceeding the further steps. In this steps you should choose any below of CSS style for emoticons widget. Every style is very different from each other and it does make sure your blog stand out in crowd. Feel free to edit the CSS code to make it compatible to your blog design.

Choose any one of the below CSS code and place before ]]></b:skin>

Style 1:
css emoticons style 1
.conemo{display:block;background-color:#F2D790;padding:10px;color:#735555;border:4px #D2C2C2;border-style:double}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#C73535;padding:4px;color:#fff;border-radius:3px}.emobttn:hover{box-shadow:2px 2px 5px #E77B7B}.emobttn{margin-left:15px}.emo-button{color:#fff!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}

Style 2:
css emoticons style 2
.conemo{display:block;background-color:#FFF;padding:10px;color:#494949;border:5px solid #eee}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#8b8b8b;padding:4px;color:#fff;border-radius:3px}.emobttn:hover{box-shadow:2px 2px 5px #B2AAAA}.emobttn{margin-left:15px}.emo-button{color:#fff!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}

Style 3:
css emoticons style 3
.conemo{display:block;background-color:#F7F7F7;padding:10px;color:#735555;border:2px #A6A6A6;border-style:dashed}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#fff;padding:4px;color:#fff;border-radius:3px;border:1px solid #F5ACAC}.emobttn:hover{box-shadow:1px 1px 5px #E77B7B}.emobttn{margin-left:15px}.emo-button{color:#E47B7B!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}

Style 4:
css emoticons style 4
.conemo{display:block;background-color:#E78282;padding:10px;color:#FFF}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#E78282;padding:4px;color:#fff;border-radius:3px;border:1px solid #FFF}.emobttn:hover{background-color:#FFF}.emobttn{margin-left:15px}.emo-button{color:#fff!important}.convert-button:hover,.emo-button:hover{color:#000!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}

Style 5:
css emoticons style 5
.conemo{display:block;background-color:#82C4E7;padding:10px;color:#FFF}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#73AECD;padding:5px;color:#fff;border-radius:2px}.emobttn:hover{background-color:#EF7F7F}.emobttn{margin-left:15px}.emo-button{color:#fff!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}

Steps 2: Add the below JavaScript inside and before </head>

Here in the below JavaScript some variable can edited as per your will.
  • pwd : This variable will tell the widget to appear just over comments form. Change it if this value doesn’t work.
  • notetext : This is string variable and can be edited as per your will. This text will appear just above widget.
  • emobox : This is Boolean variable means it can take only “true” or ‘false” as their input. Change their value to false if you doesn't want to display widget, but still the widget will still work in background.
  • emocode : This is variable in which you have the ability to allow specific numbers of emoticon for your blog. Simply remove those emoticon code which is not useful for your readers.

Choose any one of the below emoticons and copy its JavaScript code inside and above </head>.

Rice Balls (png)
rice emoticon
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :| ^o^ :@ :-} :s %OD :&#39;( :-! :frown: :o xD :halo: <3 8| :-* 8-0 :D :-# $-) >:-> 8-| >:O P-( :-> +o( :) :p (N) (Y) :&#92; :-{{ ;) :yum: ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/riceemo-eutectics.js' type='text/javascript'/>

Fancies (png)
fancies emoticon
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " ^o^ :@ (B) :-} :bomb: (Z) :s 8| :'( >:-> %-6 :/ >:) (X) :D =) <3 :mac: 8-| <:o) P-( :( 8-0 +o( :-# |-) :) :stop: O.O :&#92; (N) (Y) :p x> ;) ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/emo2-eutectics.js' type='text/javascript'/>

Trollicons (png)
troll emoticon
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :-Z :-{{ |-( :-V :s :> :O >:) I:| ):-) :fkyeah: |< :-O =) :/ :-| :) :-)) :| 8-| %-} (P) 8| :@ :-@ =D :( :&#39;( @:-) :p (*0*) O.O :-! :-p :< :? :-(0) ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/troll-eutectics.js' type='text/javascript'/>

Onion Club (Animated gif)
onion emoticon
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " +-( |@ :@ -:| B) :&#39;( |( :? (Y) +_+ :) |) |+) (hi) :f :-( =| :-) <3 X/) :X O.O :-@ :3 :O :( :E |-) :J :stfu: %&lt;) %| o.O :wind: :yawn: ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/onionemo-eutectics.js' type='text/javascript'/>

Pidgin (png)
pidgin emoticon

Updated : More emoticons added.
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " >-) (A) :< (N) (bye) (mp) (clap) :s B) (^0^) 8*) }:-) :? D: :X (Y) <3 :E :D :b 8-| :-| <:o) :@ ?:| ^:D :( :-> :o +o( :) xD ^.^ &#39;:-) :&#92; :p >:-) >| ;) -_- -o- :| :&#36; (hi5) ({) (}) :-# |-) ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/pidemo-eutectics.js' type='text/javascript'/>

Simple White Smiley (png)
simple white emoticon
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " ^o^ :@ ^w^ :s B) 8D :&#39;( ;3 }:-) :( :o >) :-) ^_^ ^.^ <3 x| x) 8-D >:D :-3 :-t ^^ +o( :) :| >:) 8) o.O 8( (N) (Y) -_- :p xp :< :/ ;D ;) ;p ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/whiteemo-eutectics.js' type='text/javascript'/>

Yolks (png)
yolks emoticon
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :@ X| @.@ B) :-Z |D <3 (B) :o x. 8-| :-@ &#39;:) :wtf: +o( |-) o.O :) :D :< -_- +o+ :G O.O xd PD &#39;:| ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/yolksemo-eutectics.js' type='text/javascript'/>

Qip 2005 (Animated gif)
qip 2005 emoticon
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :) :( ;) :p B) :D :&#36; :O :&#39;( 8- d^^b :s |p :-D }:-) B) :-* +o( |^o @^^. (L) (Th) (hi5) <3 (B) :help: (Z) 8s :-d 8:@ |-( :-v ;-D d^_^b :nono: d-.-b *^_^* *^O^* ^_^* (bye) (Y) (N) :bang: :-E :-s ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/qipemo-eutectics.js' type='text/javascript'/>

Wordpress smileys - New
Wordpress smiley for blogger
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :mrgreen: :arrow: :twisted: :evil: &gt;:D :idea: :oops: :roll: :lol: :cool: :( :) :?  :D :P  :o :x :| ;) :!: :?: &lt;3 &gt;-I |_| :burrito: O_o o_O (w) :star: :developer: :bear: ^^&#39; :&#39;( :/ :facepalm: =^-^= :alien: :cat: :dog: :gun: :poop: :santa: (Y) (N) :victory: ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/wpemo.js' type='text/javascript'/>

Most general forum style (Animated gif) - New
GIf emoticons for blogger
<script>
//<![CDATA[
var emoRange = "#comments p, div#emoWrap",
    pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
 emobox = true,
emocode = " :) :( =( :waaa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :yaya: :&#39;( T_T :&#92; :p B) :Q :Ozz 7:( &#92;o/ &#92;m/ **p &lt;3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( &lt;:) &lt;=) (-.-,) *=p =p* &#39;&#39;J :W :bye: :imhere: :cendol: :rolled: *bang* :drummer: :guitarist: :vocalist: ";
//]]>
</script>
<script src='https://blogeutectics.googlecode.com/svn/tags/emo/emo10eutectics.js' type='text/javascript'/>

Troubleshooter:


1: If your emoticons box appears below commenting box. Then try this, open your HTML template editor and search for
document.getElementById(domId).insertBefore(replybox, null);
and replace with below one.
document.getElementById(domId).insertBefore(replybox.parentNode, null);

More from author:


If you require to adjust the size of your emoticons to make it smaller simply add this css code before ]]></b:skin>
.emo{
Width:30px;
}

Add only width not height value since the emoticons will adjust itself accordingly. Change the width value as per your requirement.

Hope you like this small and excellent plugin by us. If you face any problem regarding this article do comment. For more article like this subscribe us using your emails or like/follow on social domains.

Thanks for reading. :)

43 Discussion

  1. Sorry, can you help me :(,

    what about this " To insert Image enclose your link like this Image Link
    To insert blockquote enclose your text like this Your Text "

    I don't understand and i want to remove it but i can't :( .... plzz help me.

    if you don't believe it so you can check at my blog : occultum26.blogspot.com

    ReplyDelete
    Replies
    1. HI Anama.
      I have seen your blog, its seems like you have included the code twice. Remove one of the code.
      To remove the text that is appearing simply change the value of allowimage = true,
      allowqoute = true

      to
      allowimage = false,
      allowqoute = false


      Also it seems your trollicons box doesn't appears above commenting box.
      Try this, open your HTML editor and search for document.getElementById(domId).insertBefore(replybox, null); and replace it with this below one document.getElementById(domId).insertBefore(replybox.parentNode, null);
      Hope this helps :) 8-|

      Delete
    2. wow, thank you very much for your help. finally i can add an emoticon to my new blog, i owe to you :D.

      Delete
  2. Nice post :)
    Can you help me with my blog: http://www.armagan2014.com/2015/04/echo-from-past-3.html

    ReplyDelete
    Replies
    1. Try this, open your HTML editor and search for document.getElementById(domId).insertBefore(replybox, null); and replace it with this below one document.getElementById(domId).insertBefore(replybox.parentNode, null);
      Hope this helps :) 8-|

      Delete
  3. how to use wordpress smileys - New only blogger post ? and small size like wordpress ?

    ReplyDelete
  4. Help!

    Did I everything set correctly, BUT it not maybe to press on Smiley, that it?

    Sorry to English (it is a translator)

    http://makcimilian.blogspot.com/2015/09/blog-post.html

    ReplyDelete
    Replies
    1. Hi Maximilian, try to put the JavaScript code inside Head tag (<head></head>) or Body tag (<body></body>), let me know if that works :?:

      Delete
    2. Thank you that visited my blog.

      I tried to set on other blog, but does not turn out, the same problem (( Tried for itself to do, as you said, but it does not turn out, it is sorry. However to you thank you, that tried to help! To India hello from Ukraine))

      (a translator translated) :roll:

      Delete
    3. Hey Maximilian, this might work change your Jquery library from 1.6.3 to 1.11.1.
      To simply put replace this code <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script> with this <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/> Hope this works. :) :victory:

      Delete
    4. thank you so much - HELPED ME, ALL WORKED!!! :) :) :)

      Delete
  5. i have uploaded the codes but cant see emoticon box
    i have Syahira template for my blogger heres the live thme link http://themeforest.net/item/syahira-responsive-blogger-template/full_screen_preview/5148877
    you can check it on my blog http://pcfullcracked.blogspot.com/

    ReplyDelete
  6. Can help me? emoticon is already to use but the box not show. http://www.keluargagoogle.com
    Thanks in advanced sir :)

    ReplyDelete
    Replies
    1. Check out css code for emoticons box its not properly placed. :P

      Delete
  7. Replies
    1. Ahhh, I get it. They just don't show up on the preview, but everything's fine once the comment is posted.
      Thanks, man!

      Delete
  8. please check my blog www.legitwayofearning.blogspot.com
    Emoticons are showing below the comment box, I also removed the javascript code, but nothing happens :oops:

    ReplyDelete
  9. please check my blog www.legitwayofearning.blogspot.com
    Emoticons are showing below the comment box, I also removed the javascript code, but nothing happens :oops:

    ReplyDelete
  10. Mine is not showing at all. not the box, not emoticons

    ReplyDelete
  11. 404. That’s an error.

    The requested URL /svn/tags/emo/troll-eutectics.js was not found on this server. That’s all we know.

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

    ReplyDelete
  13. Would you please check my blog and see why it's not working? www.sexysandrad.com

    ReplyDelete
  14. Hi admin, can you please replace the ,js files, they are not working anymore, but how you use the emotions on your blog, please help, thanks in advance

    ReplyDelete
  15. Thanks for sharing this tips, very helpful for all blogger.

    ReplyDelete
  16. It's interesting that many of the bloggers your tips helped to clarify a few things for me as well as giving.. very specific nice content. And tell people specific ways to live their lives.Sometimes you just have to yell at people and give them a good shake to get your point across.

    Car Wash services in Mumbai

    ReplyDelete
  17. Thank you for sharing such a nice and interesting blog with us. I have seen that all will say the same thing repeatedly. But in your blog, I had a chance to get some useful and unique information. I would like to suggest your blog in my dude circle.
    Jobs in Chennai
    Jobs in Bangalore
    Jobs in Delhi
    Jobs in Hyderabad
    Jobs in Kolkata
    Jobs in Mumbai
    Jobs in Noida
    Jobs in Pune

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

    ReplyDelete
  19. this is really valueable information for Bloggers and thanks for sharing about add emoticons smiley in blogger comments

    ReplyDelete
  20. Thanks for providing such nice information to us. It provides such amazing information on care/as well
    Health/.The post is really helpful and very much thanks to you. The information can be really helpful on health, care as well as on
    exam/ tips. The post is really helpful.
    Thanks for providing such nice information to us. It provides such amazing information on Medical Exams/

    ReplyDelete
  21. you are posting a good information for people and keep maintin it and give more updates too.
    seo company india

    ReplyDelete
  22. superb.....blog is much interesting which engaged me more.Spend a worthful time.keep updating more.
    SEO Company in India
    SEO Services in India
    SEO Companies in India

    ReplyDelete

Note : All comments will be moderated. Do Not Spam.