Friends, You know, what is star ratting?. This is a term to review your posts by visitors. Now i share ten different type advanced star rating widget for your blog. You can install it easily on your blogger. It make a professional feeling about your blog. This widget also shows voting rate and viewers count. If you want to install it in your blogger. Please follow this post ..
First Log into your Blogger account.
- Click on Edit Template button.
- Find (CTRL+F) </head> tag.
- Paste Following Code Just Above </head> tag.
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
- After that Find (CTRL+F) <data:post.body/> Tag. If you see more than one. Find (CTRL+F) below code.
<b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if>
In case that you need to place rating widget under the post title paste it before <data:post.body/> tag.
Example Like This:
<b:if cond='data:blog.pageType == "item"'> Code Here <data:post.body/> </b:if>
In case that you need to place the rating widget in the end of the post place it after the <data:post.body/> tag.
Example Like This:
<b:if cond='data:blog.pageType == "item"'><data:post.body/>Code Here </b:if>
- Paste following Widget code after your Decision.(Select one widget from below list)
NO:1- Ratings + Social Bar
<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 class="ffbs_rating_wrapper">
<div expr:id='data:post.id' class='ffbs_rate ffbs_rate_border ffbs_centered' data-label-rating='icon' data-label-views='icon' data-label-votes='icon'>{[['<img src="http://static.graddit.com/img/star_blue.png"/>']]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats ffbs_centered'></div>
<div expr:id='"share_" + data:post.id' class='ffbs_share ffbs_share_border ffbs_centered'></div></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&share=ffbs_share_" + data:post.id + ""'></script></b:if>
NO:2- Like
<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'>{[['<span style="color: rgb(108, 181, 216);">❤</span>']]}</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/1/" + 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=1&url=" + data:post.url + "&votes=yes"'></script></b:if>
NO:3- Pictures
<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>
NO:4 -Pictures + feedback
<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://img.graddit.com/img/ice_star.png"/>', '<img src="http://img.graddit.com/img/red_star.png"/>']]}</div>
<div expr:id='"feedback_" + data:post.id' class='ffbs_feedback'>{["Useless", "Boring", "Need more details", "Perfect"]}</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 + "&&feedback=feedback_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_fimg&class_star_set=ffbs_star_fimg&class_star_vote=ffbs_star_fimg&average=yes&views=yes&votes=yes"'></script></b:if>
NO:5- Animated
<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://img.graddit.com/img/gifs/star_1.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_1.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_1v.gif"/>'], ['<img src="http://img.graddit.com/img/gifs/star_2.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_2.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_2v.gif"/>'], ['<img src="http://img.graddit.com/img/gifs/star_3.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_3.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_3v.gif"/>'], ['<img src="http://img.graddit.com/img/gifs/star_4.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_4.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_4v.gif"/>'], ['<img src="http://img.graddit.com/img/gifs/star_5.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_5.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_5v.gif"/>']]}</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_aimg&class_star_set=ffbs_star_aimg_set&class_star_vote=ffbs_star_aimg_vote&views=yes&average=yes&votes=yes"'></script></b:if>
NO:6 -Symbols
<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'>{[["☆","★"]]}</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 + "&views=yes&average=yes&votes=yes"'></script></b:if>
NO:7- Sequence
<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'>{[["①","❶"],["②","❷"],["③","❸"],["④","❹"],["⑤","❺"]]}</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 + "&views=yes&average=yes&votes=yes"'></script></b:if>
NO:8- Thumb up/down
<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/thumbup_small.png"/>'],['<img src="http://static.graddit.com/img/thumbdown_small.png"/>']]}</div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/2/" + data:post.id + "?id=" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + ""'></script></b:if>
NO:9 -Up/down arrows
<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'>{[["↑"],["↓"]]}</div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/2/" + data:post.id + "?id=" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + ""'></script></b:if>
NO:10- Only Tracker
<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'>{[[""]]}</div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/0/" + data:post.id + "?id=" + data:post.id + "&labels=labels_" + data:post.id + "&url=" + data:post.url + ""'></script></b:if>
- Save your Template. enjoy.
Leave a comment below… Do you like this post….? Enjoy with master hacks..