Emoticons / Smileys to Blogger Comments

By on August 1, 2014

In this tutorial I am going to show you how to add emoticons a.k.a. smileys into your Blogger comments system. As you might know, Blogger doesn’t have this build option so I’ll give you the key to implement this.
Emoticons/smileys are a great way to stimulate the users to comment on your blog, making it more fun and much more expressive then simple text comments. You want people to comment on your blog as their comments are in fact unique generated content which is good for Search Engine Optimization (SEO).
The comments section with emoticons will look something like the image below:
kolobok-blogger-emoticons

So let’s start adding smileys to our Blogger comments.

Step 1:
Go to your Blogger Dashboard, click on “Template” then click on “Edit HTML”

blogger_dashboard_edit_template

 

Step 2:
Click on the code area and hit Ctrl + F to open the search box.
In the search box type </body>

code_search_body

Step 3:
Right abobe the </body> tag copy and paste the following lines of code:
Option 1 –  For comments systems with no reply function

Option 2 – For threaded comments system with reply function

Please have in mind that the steps 4 and 5 are only for comments systems with NO reply function. So if you have  threaded comments with reply function ignore the steps 4 and 5.

Step 4:
Search for the following line of code (CTRL + F):

After yo find it  just above it copy and paste the following  tag:

Step 5:
Search for the following code snippet:

Just after the above code snippet copy and paste the close div tag :

Step 6:
Search for the following code snippet:
Option 1 –  For simple comments systems with no reply function (you might find this one multiple times. Just stop to the second one)

Option 2 – For threaded comments system with reply function

Step 7:
Now we add some functionality script and the smileys strings.
Add this block of code just after it.
If you have any code experience you can change and use your own smileys.

Please have in mind that the steps 8 and 9 are only for comments systems with NO reply function. So if you have  threaded comments with reply function ignore the steps 8 and 9.

Step 8:
Search for the ]]></b:skin> tag.

Step 9:
Add the below code just above the ]]></b:skin> tag.

So this is just about it. Enjoy!
If you have any trouble or questions about this, just leave a comment below and we’ll help you as soon as possible.

Leave a Reply

Your email address will not be published. Required fields are marked *