Blogger have added a new feature for us to use in our post: Reactions. This widget acts like a mini-poll beneath each of your blog posts and offers the ability for readers to leave feedback quickly.
How to add "Reactions" to your Blogger template
To add this new function to your Blogger layout, you will need to activate the feature through Blogger in Draft. Once logged in to your Draft dashboard, go to Layout>Page Elements and click the "Edit" link for the "Blog Posts" widget. In this pop-up window, you will see the option to add "Reactions" to your posts:
Adding the required code to your template
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.
Color Schemes for the Reactions Add-on
The colors for the reactions add-on are taken from existing variables in your color scheme:- Foreground: textcolor, textColor, mainTextColor
- Highlight: linkcolor, linkColor, mainLinkColor
Save as PDF
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
Post a Comment 48 Comments:
Hi Amanda,
You get insider intel or what??
Blogger in draft just added this feature and you even blogged a howto for that.
That is called 'AWESOME'
Go get some sleep too....Don't work so hard.
Cheers
Anurag Bansal
http://www.knowliz.com
Thanks for the Tip....
Thanks a lot. I had no idea about this feature. :D
Thanks Amanda!I posted this post giving u the credits on my blog.hav a look
http://templatestreasure.blogspot.com/2008/08/bloggers-new-reactions-feature-how-to.html
Thanks again, Amanda-san ^^
mine does not look good in IE. any thought about how i can adjust it?
great post like always..
nATE
You know what cracks me up? I find out about these new features from you, before I ever find from my blogger dashboard.
i don't know how to thank u
thank u very much
u r the best
but, this new features allow my visitors to select multiple answers
i want to obligate them to choosse only one but i don't know how??
may i ask u to help me to find a solution for this??
Batoot
I've noticed a major problem. The numbers are not going up at all. ie: even if I use different browsers and different ip's through proxies.
Anyone noticed the same or is it just me, or you may suggest something to fix the problem
@ بطوط حبوب...To add this new function to your Blogger layout, you will need to activate the feature through Blogger in Draft. Once logged in to your Draft dashboard, go to Layout>Page Elements and click the "Edit" link for the "Blog Posts" widget.
In this pop-up window, you will see the option to add "Reactions" to your posts:
---
Here, if u click Edit, u can delete and write ur own reactions, just separate them with comma.
--------------------
@ Daniel...I found that I can click all of them. Not sure about incrising of value though. :(
As always I am getting a error code when I try to add html:
bX-lilymr
Is my template just not compatable to html alterations?
this is great...thanks!
You lied that nothing will happend if you click on Revert Widget Templates to Default.Do you know how much time it coast to make my template?Now its ruined!Coz of you!Now I need to do all I did again!So hard work and now...
...;-C
It's all ruined!
Cool blog buddy!! ALready bookmark your's. Do drop by mine at http://islandcrisis.blogspot.com
you are really good.. that's the reason why i recommend you to some of my blogger friends! Thanks!
http://www.boffillbernardes.com
Hi Amanda, I want to ask if it is possible to do this two tweaks with reactions:
1.tweak html so reactions will appear only when post is expanded (with Whats next and Comments), never on a landing page. Reader sometimes dont know at landing page if something is "cool" or "boring".. Could it be possible for you to tweak this feature to appear like this?
2.if not, then how it will be possible to change settings of color scheme to make Reactions look different from theme settings. If i "must" have it on a landing page than i would prefer to use different colors to put it more to background of theme.
Thanks for answers and keep going, youre great with blogger platform
I saw this on the element section, thanks for the update. Tinh
@ Martin... 1. It's possible. Look for the code div class='post-body' expr:id='"post-" + data:post.id'
b:if cond='data:blog.pageType == "item"'
style #fullpost{display:inline;}/style
p data:post.body/ /p
and add the code given by Amanda below it.
There are a few UI problems, especially in IE, that will be fixed soon. I mean, um, will probably be fixed soon. ;)
Reactions are designed to not be mutually exclusive, however -- there is NOT a way to limit readers to click only one.
Hi Amanda, This feature looks like our postreach clickcomments services. Instead of just text we have stylish icons. And in addition to the comments we recommend other posts from the same blog that have received the same comment that the user just clicked. IE: If you clicked on 'insightful' it recommends other posts on that blog that are insightful. Please check it out at www.postreach.com
Thanks!
Thanks for the tip...I will share your post and this little "reactions" addition to my subscribers so they can update and pick their favorite posts...
Thanks for the info!!!!
Yep...it worked like a champ!!!
~Bobby Ozuna
Drawing Stories...With Words
Hey Amanda, thanks for the heads up on this new function. I tried it but it didn't quite work. I found the following code "p class='comment-footer'" and added the script you supplied right afterwards. Not sure if you have received any similar requests for help, but, HELP!!
Take care.
Hey Amanda :D! Thank you for this awesome tip :] It worked nicely. But.. the border for the bottom of the reactions aren't showing.
Hi Amanda thank for much tutorials... heppy blongging
Thanks for the instructions to add this feature. It appears after each post on my blog, but is not keeping track of the # of reactions.
I saw another comment about this above...is there a way to fix it or am I missing something here?
www.randomchilee.blogspot.com
Strangely on IE7 this post was all kinds of messed up. Well anyway, this thing is buggy. You can click on ALL the reactions without penalty.
i put it under
post-header-line-1
and it works well.. and placed under my post title.. thans amanda :)
Thanks Amanda
I see that it's been added to real blogger now. However, I can't get it to work. :-(
I tried changing to one of the standard templates and it still didn't work. Any ideas?
This is me http://clickjack.blogspot.com/
You are true with your quote amanda, you are making me build a better blog
Thanks so much! I was going nuts trying to get this work and tried every which way and that and then got kicked over here by accident. Am so pleased ;-) and will subscribe to your blog.
Thanks dude for that amazing and easy tutorial...That really helped me in a custom template.
YOU ROCK.
myviewbeta.blogspot.com
Like one of early posters,get well formed error everytime i try to add code to edit html.Help please?It's a blogger blog.
RONVUE.COM
namaste amanda,nice posting,I want to add two new independant widget sections one beloe other on right side in my bloogger template.plase reply how to do that
Thanks Amanda! I have been trying to get this to work since the day it came out, I added the given code and it fixed it right away! Have a look if you want!
http://pendragonsart.blogspot.com/
thank u! i've been worrying about this reaction thingy when i changed my template into a 3rd party template! :D
It's installed and works and everything but it won't SAVE the counts or increase the counts.
What good is it if it doesn't work?
in picture above its show the checkbox "Show Star Ratings" can you tell me how to add that future.
Thanks
man, I get the tick boxes, but the names don't appear, there's no cool or funny etc :( why?
thanks so much Amanda you're the best! I've been trying to figure out how to add this without losing my customisation. You're a lifesaver!
I have a 3rd party template and I cannot change my color scheme so that the reaction links show up. They are black and I can't find anything in my html that indicates black (my links are white). Is there any way to custmise the font for the reactions only?
Love your blog!
Nice post. Thanks for sharing this blog.
how to manage three column templete?? i have added three column templete but i got problem in posting new post i did not find from where to go in add new
post
Thank you so much!!!!
Not showing betterly
please check the problem at www.linkextreme.blogspot.com
Please reply to me there only.
Thank A lot, i was searching for it and i got it from your blog.
Please Visit: http://www.py4php.blogspot.com
Please Visit: http://www.piyushsaraf.com
Shame this feature doesnt work on your own template at ThemeForest called 'Planet Play'.
Maybe if you supported your products I wouldn't have posted this comment here.