How to Add Post Rating Widget End of Blogger Blog Post?

How to Add Post Rating Widget End of Blogger Blog Post?
rating widget

Blog Post rating widget is not an official widget of Blogger. This is just a manual rating system for your Blog post. However This widget will show your visitors about Post information like Post title, Author, Category, rating and votes. Generally we can add this widget the end of Blog post, I mean above Related post or comment section. Though by watching this widget a visitor will get details information about post so you can use this widget instead of breadcrumb. However the rating option is fixed and it won't change the value and readers won't able to rate your content. Because Google Blogger doesn't support rating system. But still this widget is very attractive for the readers and Bloggers.

So for adding this widget please follow the below steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now find ]]></b:skin> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 
Step 4 And Paste the below code above/before ]]></b:skin> 
#post-rating {
font-weight: 700;
Color:#333333;
padding: 10px;
padding-bottom: 0;
background: #FFFFFF;
text-decoration:none;
}
#post-rating a:hover {
Color:#333333;
font-weight: 700;
text-decoration:none;
}
.post_byfix {
float: left;
background: #FFFFFF;
Color:#333333;
width: 100%;
overflow: hidden;
clear: both;
margin-bottom: 10px;
}
.post-img {
display: block;
float: left;
padding: 4px!important;
margin-left: 2px!important;
padding-right: 10px!important;
margin-top: 5px!important;
overflow: hidden;
}
.post-img img {
width: 100px;
height: 100px;
}
.post-by {
float:right;
color:#333333;
width: 100%;
font:normal 12px 'Trebuchet MS',Helvetica, sans-serif;
text-decoration:none;
}
.post-by ul {
margin: 0;
padding: 0;
margin-top: 9px;
}
.post-by li {
list-style: none;
padding: 3px 10px!important;
}
Step 5 Now find <data:post.body/> by Pressing Ctrl+F (Windows) or CMD+F (Mac)    
You will find 3/4 times this code go for second one.

Step 6 And Paste the below code above/before <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Widget by www.bloggerspice.com -->
<div id='post-rating'>
<div class='post-by'>
<div class='post-img'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail radius tooltip' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
 <b:else/>
<img alt='no image' class='post-thumbnail radius tooltip' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSzZHMiU9EBWiCS2GytMoCK70H6OmWonySKWjmZDefioLHYbMQ-hwnc_BSjuLTCGeOfu_e7_UlBpXYkO2s27gHisuKSY4cEquBs0txhctifoyYcopKg1LmlQwkLQzXsgL7BC8w5SAIgMsp/s1600/no_image.jpg'/>
</b:if>
</div>
<ul>
<li><b>Title :</b> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></li>
<li><b>Author :</b> <span class='post-author vcard'> <b:if cond='data:post.authorProfileUrl'><span class='fn' itemscope='itemscope' itemtype='http://schema.org/Person'><meta expr:content='data:post.authorProfileUrl' itemprop='url'/><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><span><data:post.author/></span></a></span><b:else/><span class='fn' itemscope='itemscope' itemtype='http://schema.org/Person'><span><data:post.author/></span></span></b:if></span></li>
<li><b>Category:</b> <span class='post-labels'>
<b:if cond='data:post.labels'>      
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> <i class='icon-angle-right'/>
</b:if>
</b:loop>
</b:if>
</span></li>
<li>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<b>Rating :</b> <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
<span itemprop='average'>100%</span>
</span>
based on <span itemprop='votes'>10</span> ratings.
<span itemprop='count'>5</span> user reviews.
</div>
</li>
</ul>
</div>
</div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div style='position:fixed;z-index:-500;opacity:0;top:0px;left:0px;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
Item Reviewed: <span itemprop='itemreviewed'><data:post.title/></span>
<span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'> <span itemprop='average'>9</span> out of <span itemprop='best'>10</span> based on <span itemprop='votes'>10</span> ratings. <span itemprop='count'>9</span> user reviews.
</span>
</div>
</div>
<div class='clear'/>
</div>
</b:if>
Step 7 Now simply hit the Save Template button.

To check the widget please visit any post from your Blog and see the widget. Post image, title and category will change post by post. But rating will be fixed and you will able to change rating manually . For any further help you can write us. Thank you.
Go Up