Add Reactions Widget to Aspire

I received a comment from Daniel (a visitor on my blog) , on how to enable Reactions on your blog post. The procedure is simple if you are using default template (why would you want to use default template when there are so many beautiful templates floating around).

But We are using one of the best template – Aspire.

So we are going to make it even better….. let’s get our hands dirty, or as dirty as they can get by typing on keyboard…..

First go to Dashboard > Layout > Page Elements.

Now click  Edit on Blog Posts.

A new window will open. Now check the box in front of Reactions:

This is just the first step, now save your changes and go to Layout > Edit HTML.

Warning: Make sure to make a backup of your template BEFORE making any changes.

Now find

<data:post.body/>

 

And just below it add the following code

 

<!-- /* *****************Add Reactions ********************* */ -->
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><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> 
<!-- /* **************End of Add Reactions **************** */ -->

 

Save the template and preview your blog. You should see Reactions on your blog post like the image below.

 

That’s it…. Enjoy your new feature for Aspire. Hope you will like it.

You can customize reactions, but I will leave that to you to play with. And don’t forget to check appropriate box to rate this post.