Adding Blogger's New "Reactions" Feature

Posted by Prem Godara | 11/08/2008 07:16:00 PM | , | 0 comments »

Blogger today launched a new feature named "Reactions". This widget acts like an instant rating beneath each of your blog posts and offers the ability for readers to leave feedback quickly.

The "Reactions" add-on can be moved around like other elements in the post-footer and will adapt to the color scheme of your blog template. You can customize the buttons and labels through the "Blog Posts" widget in your dashboard. The default labels currently implemented are "funny/interesting/cool". But these labels can be customized according to the individual needs of their bloggers.

Adding "Reactions" Widget to your Blogger Template:

To enable this feature, go to "Layout" > "Page Elements" and click on "Edit" in the "Blog Posts" element. In this pop-up window, you will see the option to add "Reactions" to your posts.Tick the options box and edit the labels for your buttons as required. Then finally save this setting.



If you use a customized/third party template, you will need to add the required code to your template manually. In this case, go to Layout>Edit HTML in your Blogger dashboard and check the "Expand widget templates" box. Next, search for the following line of code (or similar):

<div class="post-footer-line post-footer-line-1">

Immediately after this line, add the following section of code:

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

Preview your template to see the newly added "Reactions" add-on appearing beneath each of your blog posts, and finally, save this new add-on to your template.



If you cannot find the "post-footer-line" in your blog template, search for 
<p><data:post.body/></p>


instead, and paste the code immediately after this line.



0 comments

Post a Comment


Your Ad Here