[Update] Add Five Star Rating widget In Blogger

Rating widget is beneficial for online shopping store sites or movies blog or any to rate any product.while five star widget can be added to any article site.It used as feedback, may be you have seen in other blog at the bottom of post.

Fist i tell you about this widget.It show text rate this rate this post with five star.you have to edit blogger template to show in your blog.It also show how many people rate this post votes.before editing blogger template take backup of your template

It is used to restore your template if you did some mistake so that can be recovered easily.this widget also increase beauty of your blog.you can add floating search box to stylize your template.

How to create five star rating in blogger

First login to blogger account

Go to template edit HTML

Now search for his code 

</head>

Above </head> paste the given code.

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

Find this one

<data:post.body/>

Just below <data:post.body/> paste give script.

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

Note:you may find <data:post.body/> more than time,in that case place this script below the last one.save your template.

View your blog that your five star widget is working fine.If it is not working then you have to place this script below all <data:post.body/> tags.

Share this post