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 reader 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. Blogger has already included this feature for us. So in this tutorial i will show you how to implement this widget in your blog. Besides i have found that blogger has limited number of reaction buttons. So, in addition i will 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. This will take you to a new window where you'll find many options including 'Reactions'. Check the box in order to enable reactions for your blogger.
3. 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 the next step; otherwise skip it.
4. Right-click on reaction field area and select 'Inspect element'. Find out input tag with reactions-editor id. Now look for maxlength attribute and change its value 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.
5. 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' and place the following code below <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/> or wherever you want.

   
   <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>
   

   and save your template.

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