Blogger’s New "Reactions" Feature – How to add to customized blog templates

by Sushant Risodkar · 6 comments

As You Must Have Read The Recent Updates n Fixes By Blogger In The Previous Post .Now I will tell you the hack to Add The Blogger’s New “Reaction” Feature as i said in earlier post for those people who are using A Customized Blogger Template.This Hack has been given to me by Bloggerbuster.com

If You are using a Classic template i.e provided from blogger then read this post.

For Customised Template It Goes Like This:

Depending on the type of template you are using, you will need to use one of two methods to add the required code to your template.


If you are using a default Blogger template with no modifications to widgets or the post layout…

Go to the Layout>Edit HTML page in your Blogger dashboard, and look for the “Revert Widget Templates to Default” link near the bottom of the page.

Clicking on this link will replace all of the widget templates with the updated code. All of your existing widgets will remain, so don’t worry about losing any data! Instead, this will simply replace outdated code with new code, and ensure you can add all of Blogger’s new features with ease.

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

<p 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 “Reactions” add-on appear beneath each of your blog posts, and finally, save this new addition 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.

As You can see i m using a customized blogger template n this feature is working properly.
What Do You Say About This?

About Sushant Risodkar

Yo! I'm +Sushant Risodkar & my nickname on web is Typhoon. I'm a 19 yrs. old young blogger from India & the owner of SmartBloggerz. If you are looking for SUCCESS as a blogger & affiliate marketer then SmartBloggerz is the right blog for you. You can follow me on Twitter or be my friend on Facebook. And hey! Don't forget to LIKE SMARTBLOGGERZ on Facebook. Read more About Sushant Risodkar.

has written 377 superb article(s) on this blog

Follow me on Twitter · Visit my website →

Kansas Bob August 16, 2008 at 8:30 pm

I can’t figure it out. I am using a custom (jeans) template and cannot locate the place to insert the code.

http://kansasbob.blogspot.com/

Thx, Bob

Typhoon August 17, 2008 at 9:02 am

Hey Kansas Bob It’s recommended that u don’t add those codes since that feature has some trouble as the voting numbers do not increases that’s why i have removed it from my template also!

Anu July 30, 2009 at 10:30 pm

Hi can any one tell me .. to my customised blog template background color and text color cannot be distinguished ,..let me know how to customise it

Typhoon July 31, 2009 at 3:34 pm

The question is not Clear Anu. Please tell me your prob. again.

Anu July 31, 2009 at 4:35 pm

@Typhoon,

Just Look at my blog
My blog background is black in color
and the reactions widget text is also black
I could nt be able to see the reactions text
could u tell me how to change color of widget text
.-= Anu´s last blog ..THANKs Friends =-.

Typhoon July 31, 2009 at 5:25 pm

Anu I still can’t get to see what the real problem is. Can you please upload a screen shot highlighting your problem.

Upload it to tinypic. So that I can look into the prob. properly.

Previous post:

Next post:



whos.amung.us