Commenting is another major activity you find when it comes to blogging. You can engage with readers and vise versa through commenting. It aids you to gain feedback for your posts and for your blog itself from your blog readers. So generally a comment form is available in almost all blogging platforms. So Blogger provides you comment form by default for your blog too. Using Blogger comment form, your readers can comment and you can reply to their comments too. It's all based on text. But in addition to text-based standard commenting feature, wouldn't it better if you can add more color to your comment form by enabling emotion icons aka smilies for your commenters to express their emotions along with their comments?
Blogger let you decide who can comment, it has comment moderation capability and comment form is capable of threaded comments too. But Blogger comment form has no built-in emotion icon feature, if you wanna make use of. Eventhough it's not a built-in feature, you can enable smilies or emotion icons just by adding few simple lines of code to your Blogger template. It has really cool emotion icons where your visitors would definitely love to use when they commenting on your posts. In addition to their text-based ideas and thoughts, smilies will help them to add their emotions to their feedback too. Interesting? Let's find out how to add smilies for your blog comments.
Before You Go:
* The smilies doesn't work if you have Blogger threaded comments enabled on your blog.
* The smilies will work with comment form types - Embedded, Popup window and Full page. But visitors may need a preview of smilies and corresponding codes before they make use of smilies in comments. But here we able to display available smilies, only if you are using embedded comment form on your blog. Else visitors won't able to see available smiles before they comment eventhough they works. So here it's recommend to use embedded comment form if you are willing to use these smilies. Read How to Enable or Disable Comments in Blogger and change your comment form type to embedded comment form.
Before You Go:
* The smilies doesn't work if you have Blogger threaded comments enabled on your blog.
* The smilies will work with comment form types - Embedded, Popup window and Full page. But visitors may need a preview of smilies and corresponding codes before they make use of smilies in comments. But here we able to display available smilies, only if you are using embedded comment form on your blog. Else visitors won't able to see available smiles before they comment eventhough they works. So here it's recommend to use embedded comment form if you are willing to use these smilies. Read How to Enable or Disable Comments in Blogger and change your comment form type to embedded comment form.
Steps:
1. Go to Blogger Dashboard.
2. Click on your Blog Title.
3. Now navigate to Template tab.
Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.
4. Click Edit HTML button.
5. Now search for the following tag within your template.
</body>
6. Add below line of code right before the </body> tag.
<script src='https://sites.google.com/site/mayura4ever/smiley.js' type='text/javascript'/>
7. Now find below code in your template,
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Note: You might encounter two or four search results after searching above line of code. If you have found total of two results, just skip first one and use second one for next step. If you found total of four results, it's best to skip first and third search results and select second and fourth results for next step.
8. Add below set of code right before the line you found at above step. It will display available smilies for visitors above your comment form.
<div width: 100%; text-align: left; border: 0px solid #cccccc; padding: 5px 5px 5px 5px; background: #ffffff; height: 50px'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
Color Indication Information:
- Background color of smiley display area
- Alignment of smilies and related code on display area
- Padding of smiley display area - Top, Right, Bottom, Left
- Width of smiley display area
- Height of smiley display area
9. Now save your template.
10. Go back to view your comment section to find your cute smilies animating.
- Background color of smiley display area
- Alignment of smilies and related code on display area
- Padding of smiley display area - Top, Right, Bottom, Left
- Width of smiley display area
- Height of smiley display area
9. Now save your template.
10. Go back to view your comment section to find your cute smilies animating.
Note: Smilies will only be rendered after submitting the comment, not while you're composing it.
Enjoy :-)
This is great, thank you.
Do you have any tips on including these in the blog posts too? I'd just like to have a few smilies in with my blog rather than hot linking them with HTML code. I'd rather if I could use a key press like you have done here for comments but in the main blog posts also.
Thank you.
Hi Lisa,
Thanks for your compliments :) And currently I have no post about using 'em on blog posts dear. However it's a nice suggestions for me. I ll try find a way to figure out your problem.
Cheers...