Display Smiley Emotions Above Blogger Comment Box

Display Smiley Emotions above Blogger Comment Box

11
data:blog.title
Comment Box Tricks

This time I want to share ways of displaying smiley emoticons on blogger comments. You will find lots of tutorials blog which discusses how to add yahoo smiley emoticons on blogger comments using the concept of jQuery but may still rare. These are facilities that can automatically transform  emoticons symbols :),: D,: P, into a predetermined image. Hopefully this trick help you to tailor your Blog commenting system.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> and Save the templates.


/*Widget By www.bloggerspice.com*/
.BSemoWrap {
  background-color:#fff;
  width: Auto;
  border:2px solid#000000;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.BSemoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}
input.BSemoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}


Step 5 Now again Find </head> by pressing Ctrl + F

Step 6 Copy the below code and Paste it Before/above </head> and Save the templates.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.BSemoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script src=' http://bloggerspicebd.googlecode.com/files/BSEmoticons.www.bloggerspice.com.js' type='text/javascript'/>

Customization:

  • If you found this code http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js  then paste the code  only this line <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Display Smiley Emotions Above Blogger Comment Box
4 Stars stars - "Display Smiley Emotions Above Blogger Comment Box" This time I want to share ways of displaying smiley emoticons on blogger comments. You will fi...

Nice shearing Brother Smiley working ! have a good Job :)

thanks bro for using it

is it working? testing :( :) :p

100% guarantee..it will work

Great! But, how I can add that button "Emoticon"?

This is different coding...I didn't share this..hopefully I will write an article soon. Thanks

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *