Five Star Rating Widget is an awesome source of getting feedback and Positive response from your readers, this widget shows 5 stars at the ...
Five Star Rating Widget is an awesome source of getting feedback and
Positive response from your readers, this widget shows 5 stars at the
top or below the blog post, where one can rate your blog article.
Before this, I used to see this widget mostly on the blogs hosted by Wordpress. Wordpress users can simply do this by using WordPress plugin designed for this. But unfortunately, bloggers like me who host their blogs at blogger.com were unable to add this rating widget, but from today onwards we also use this widget easily on our blogger websites easily just by following below given steps.
DEMO
1. Login to your blogger account
2. Select your blog and navigate to 'Template' section
3. Click on 'Edit HTML'
Additional Tip:
Smart bloggers always make a backup of their blog templates before editing and making any changes to the template. Here is the guide of how to make backup and restore blogger template before editing. This step is not necessary but still useful in the case if you would make any big mistake in the template then the only way to get back your template is restoring. If you don't have backup of template in advance then you may lose some or full design and scripts of your blog.
4. Now find this tag </head> in your template. To locate easily, you can use CTRL+F keys and type this tag in the search box.
5. Now just above </head>, you have to paste this script
You may find this tag more than 4 or 5 times, depend on your template design. In my case, I found 4 times the same tag in one of my private blogs.
Now just below this code, you have to paste this script
But I would recommend you to add this widget only at the last of the post because readers will find it useful to give ratings only after reading the full post.
8. Now save your template, and you have done it.
Before this, I used to see this widget mostly on the blogs hosted by Wordpress. Wordpress users can simply do this by using WordPress plugin designed for this. But unfortunately, bloggers like me who host their blogs at blogger.com were unable to add this rating widget, but from today onwards we also use this widget easily on our blogger websites easily just by following below given steps.
DEMO
1. Login to your blogger account
2. Select your blog and navigate to 'Template' section
3. Click on 'Edit HTML'
Additional Tip:
Smart bloggers always make a backup of their blog templates before editing and making any changes to the template. Here is the guide of how to make backup and restore blogger template before editing. This step is not necessary but still useful in the case if you would make any big mistake in the template then the only way to get back your template is restoring. If you don't have backup of template in advance then you may lose some or full design and scripts of your blog.
4. Now find this tag </head> in your template. To locate easily, you can use CTRL+F keys and type this tag in the search box.
5. Now just above </head>, you have to paste this script
6. Now locate this one, <data:post.body/><link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />
You may find this tag more than 4 or 5 times, depend on your template design. In my case, I found 4 times the same tag in one of my private blogs.
Now just below this code, you have to paste this script
7. You can also add this rating widget below the title of post or say at the starting on the post. For this, you have to paste the above given script above <data:post.body/> tag instead of placing below tag.<b:if cond='data:blog.pageType != "static_page"'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div><div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'></script></b:if>
But I would recommend you to add this widget only at the last of the post because readers will find it useful to give ratings only after reading the full post.
8. Now save your template, and you have done it.
COMMENTS