Add 10 Types of Emoticons (Smiley) in Blogger Comments

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 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.

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:

.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:

.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:

.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:

.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:

.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 

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)

<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)

<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)

<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)

<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)

<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)

<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)

<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)(GTAINSIDE Style)

<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

<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

<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);

Resize Emoticons

If you require to adjust the size of your emoticons to make it smaller simply add this css code before ]]>.

.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.

Source : http://eutectics.blogspot.in/