Reaction Buttons for Blogger

Reaction buttons helps the readers of your blog to react to your blog posts. With help of this feature, you can get feedback from your readers. This is very interesting as well as very helpful for those readers of your blog who don't have enough to say about your blog posts. More or less, reaction buttons are something like polls for every blog posts. Fortunately Blogger has already included this feature for us. So this tutorial will show you how to implement that widget in your blog. Besides I've found that blogger has limited number of reaction buttons. So, in addition I'll show you how to add infinite number of buttons in your blog.

To enable Reaction buttons

1. log in to your blogger account and go to 'Layout' section.
   
2. Click 'Edit' link on the 'Blog Posts' gadget.
   
3. A new window will appear where you'll find many options including 'Reactions'. Check the box in order to enable reactions for your blogger.
   
4. By default blogger provides 'funny', 'interesting' and 'cool' reactions for you. However you can add your own. To do this, click 'Edit' and type your own reactions name. However you can't insert more than 80 characters in reaction input field. If you are not satisfied with this, means if your total reactions characters are more than 80 and blogger is not permitting you to insert more reaction buttons, follow these next steps; otherwise jump to step #7.
5. Right-click on reaction field area and select 'Inspect element'.
   
6. Find out input tag with reactions-editor id. Now look for maxlength attribute and change its value from 80 to some higher value.
   
   For e.g. I've changed it from 80 to 200. To accept the change click out side of the input tag.
   
7. Click 'Save arrangement'.
8. You can even customize the location of the reaction buttons within the post by dragging the reaction box in 'Arrange Items' section. If everything goes right but reaction button didn't appear that’s because your blogger template is modified. In order to fix this, go to 'Edit HTML', search for (Ctrl+F) <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> or <div class='post-footer-line post-footer-line-3'> or <data:post.body/> and place the following code after that.

<span class='reaction-buttons'>
  <b:if cond='data:top.showReactions'>
    <table border='0' cellpadding='0' cellspacing='0' width='100%'>
      <tr>
        <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
          <span class='reactions-label'><data:top.reactionsLabel/></span> 
        </td>
        <td>
          <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/>
        </td>
      </tr>
    </table>
  </b:if>
</span>

9. Click 'Save template'.

I tried my best to keep things as simple as possible. Feel free to ask your question.
Happy Blogging.