How to Display Emoticons Smiley In Blogger Comments

This tutorial I want to share how to display a smiley emoticons on blogger comments. Although maybe dipencarian google you will find many blogs tutorial discusses how to add yahoo smiley emoticons on blogger comments but that uses JQuery concept may still rare. This is a facility that can automatically change the emoticons symbol :),: D,: P, into a predetermined image. Hopefully with this trick threaded comments your blog to appear more attractive.

Once logged in, on the dashboard to enter the menu and then click Edit HTML template and proceed:

• Click Ctrl + F and search for the code]]> </ b: skin>
• Add the following CSS code thereon;

.emoWrap {
  background-color:#fff;
  border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}

Then add the following jQuery script above code </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

For those of you who already have or install the JQuery script in your template then just ignore the steps above!

add the following script again under the JQuery script before

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script src='https://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js type='text/javascript'/>

Save the template and see the results of your blog!
Similarly tutorial on how to add a smiley emoticons blogger comments. Hopefully useful!