How To Add Smiley Emotions On Blogger Comment With JQuery

This tutorial I want to share how to display the smiley emoticons on blogger comments. While it may be in the google search you will find lots of tutorials blog that discusses how to add yahoo smiley emoticons on blogger comments but that using JQuery concept may still rare. It is a facility that can automatically change the emoticons symbol :), :D,: P, into a predetermined image ,

Emoticons / smileys can represent expressions blog commentator. Moreover, emoticons / smileys can further enhance the look of the blog comments section. By using JQuery, we can add emoticons feature on the blog platform Blogger. This emoticon emoticons use the base command is interesting. For example, when you want to display a smile emoticon image, use the command / write character :), and so on. In blogger, the command can be adapted in order to bring up the image display smiley / emoticon particular. Bloggers comment on this emoticon feature, I use gif format images that have animation effect (moving).

How To Add Smiley Emotions On Blog Comment

1. Go to Dashboard Blogger >>Template >> Edit HTML
2. Add the following CSS code above ]]> </ b: skin> (searching With Ctrl+F):

.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; 
  *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;
}

3.  Add the following JQuery script above the </ 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 a JQuery script in your template then just ignore the above steps!

4. add the following script under the JQuery script

<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'/>

5. Save template and see the result your blog

6. You are done!

Now visitors bloggers can use emoticons / smileys in your blog comments. Have a nice Blogging.

Posted in: Blogger Design,Blogger Layouts,Blogger Tips,Blogger Tricks,Blogger Tutorials