Thursday, July 25, 2013

How to Add Smileys/Emoticons in Blogger Comments

,
The Smileys/Emoticons way to give the visitors a lot of fun and confidence to your blog,It is known that these smileys used in social websites as Facebook.
To do this just follow the steps:

1.  Go to Blogger Dashboard  --> Template
2.  Please! download  a copy of your template
3.  Now click on Edit HTML
4.  Use Ctrl+F to find </body>
5.  Then copy and paste just  above/before it, this code:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]>
</script>
<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
</b:if>

Note: You can change blue with your own words.
6. Now the next step to find the code ]]></b:skin>
7. Then copy and paste just  above/before it, this code:
.emoWrap {
  position:relative;
  padding:10px;
  margin-bottom:7px;
  background:#fff;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Opera */
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
  border:3px solid #860000;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  font-weight:normal;
  color:#333;
}
.emoWrap:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}
8. Add the below code above/before </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/
9. Finally click save template.
Now you can see the result and be happy. :-d

75 comments:

  1. Nice and helpful article.
    Thanks to admin. His work is really helpful.
    x-) (k)

    ReplyDelete
    Replies
    1. Thanks bro!!
      When I see an encouraging responses, trying hard to help u and to move forward.

      Delete
  2. I like your blog. It is realy very helpful for us. I would love to gives smile :-)

    Regards,
    Content Writing Services

    ReplyDelete
  3. Why the Emoticon not before comment iframe...?
    Thank's before for your opinion

    ReplyDelete
    Replies
    1. Yes, that happens sometimes caused problem in my template. @-)

      Delete
  4. please send Me A Video Url How to Do This,I Try It Many Times But Not Working :-?

    ReplyDelete
    Replies
    1. Just u need a few of the focus I've tried more than a blog and succeeded.

      Delete
  5. Plz Help Me Its Not Working Watch This Video : http://youtu.be/PQhX-5LyZMY

    ReplyDelete
    Replies
    1. Don't worry my friend just follow the step number 8 in the tutorial.

      I'm sorry for the delay.

      Delete
    2. I try But Not Working Plz Help

      Delete
    3. It seems that your template is Old.
      If you want to verify that, try to apply this tutorial on a new blog and a new template to know exactly where the flaw is located.
      Hope this helpful...

      Delete
    4. So Plz Give Me Link To Download Best Template For Games blog

      Delete
    5. It is better to look alone, because my taste is different from your taste.
      Look this: Top 10 Best Blogger Templates Sites

      Delete
  6. Grazie,grazie per le informazioni,bellissimo post.

    ReplyDelete
  7. nice post gan, langsung ke TKP...

    ReplyDelete
  8. Nice and helpful article.
    Thanks to admin. His work is really helpful.
    x-) (k)
    vct back pls http://iklans-ukses.blogspot.com/

    ReplyDelete
  9. Thank you very much :) Very helpful article (h)

    ReplyDelete
  10. coba ahhh...penasaran. Ditunggu gan kunjungannya di dering.co.id

    ReplyDelete
  11. ya its working i am really amazing see my blog thats crct or not

    www.computertricksintamil.blogspot.com

    ReplyDelete
  12. Great Work Bro !! :D

    This Is Worked For Me !! (h)

    ReplyDelete
  13. Nice information and tips for me,,
    success :)

    ReplyDelete
  14. Thanks bro for the fantastic post but some of the emotions are not working please sort it out it will be great help for us

    ReplyDelete
  15. [-( It's not working for me either but, I'm wondering if it's because my Blogger comments is connected to G+?!?!

    ReplyDelete
  16. Saya coba Di Blog Saya Kok Gak Tampil gan ???

    ReplyDelete
  17. Wih mantaaab sob thanks ane coba di blog ane berhasil (y)

    ReplyDelete
  18. Hi, admin, could you help me to make smiley emoticons without jquery ? I don't want to use jquery on my blog frequently because it is heavy load.

    ReplyDelete
  19. Why not work in my site? :-?
    http://www.armagan2014.com/2015/04/echo-from-past-3.html

    ReplyDelete
  20. https://lh5.googleusercontent.com/-u__sc3DgZ2c/T2d0_lDLueI/AAAAAAAACkw/YbeuRNde61Q/s36/03a.gif

    ReplyDelete
  21. Thank you ... your blog and the best x-)

    ReplyDelete

 

Disclaimer | Terms and Conditions | Privacy Policy | Copyright © 2012 | Template design by bbloggertutorials