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

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

Comments: 10
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;
padding: 10px;
padding-bottom: 0;
background: #FFFFFF;
#post-rating a:hover {
font-weight: 700;
.post_byfix {
float: left;
background: #FFFFFF;
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 {
width: 100%;
font:normal 12px 'Trebuchet MS',Helvetica, sans-serif;
.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 -->
<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'/>
<img alt='no image' class='post-thumbnail radius tooltip' expr:title='data:post.title' src=''/>
<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=''><meta expr:content='data:post.authorProfileUrl' itemprop='url'/><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><span><></span></a></span><b:else/><span class='fn' itemscope='itemscope' itemtype=''><span><></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'><></a><b:if cond='data:label.isLast != &quot;true&quot;'> <i class='icon-angle-right'/>
<div itemscope='' itemtype=''>
<b>Rating :</b> <span itemprop='rating' itemscope='' itemtype=''>
<span itemprop='average'>100%</span>
based on <span itemprop='votes'>10</span> ratings.
<span itemprop='count'>5</span> user reviews.
<div itemscope='' itemtype=''>
<div style='position:fixed;z-index:-500;opacity:0;top:0px;left:0px;'>
<div itemscope='' itemtype=''>
Item Reviewed: <span itemprop='itemreviewed'><data:post.title/></span>
<span itemprop='rating' itemscope='' itemtype=''> <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.
<div class='clear'/>
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.

Speak Your Mind

ঠিক মতন আসতেছে না , একটা উল্টা পাল্টা হয়ে যাচ্ছে - স্কিনশ্ট

Apnar template ta check korte hobe. Ami aai widget ta Blogger default and Custom 2 template a test korci. Aai matro abar check korlam. Ata 100% kaj kortece. Amar mone hoy apni CSS code ta thik moto add korte paren nai.

I was searching for this articles. At last I got solution. Thank you bro.
Best Regards;
ALLDIGITRICKS || Blogger Tips, Make Money Online Tips, SEO ||

Hi Krishna..I hope you would love this widget.Thank you.

THIS sierve Friend For The google search results . That the stars to be displayed? and The Visitor from his punctuation

Hi Johan, Google officially doesn't support voting system in Blog posts. But if you can correctly set structured data highlighter then your content links will display with star rating in Google Search engine.

Thank You.

I have 3 . Where should I put the code.

Hi Jerland, It depends on template coding. But mostly work with 2nd one. if Widget is not displaying with 2nd one then try with 3rd <data:post.body/> code. :up

Sir Rabbi, I just found out that the link is 'Not Found' ERROR 404. That is why the script above will not work anymore.

"div itemscope='' itemtype=''"

Try to visit this page:
that link above is dead and It's inside your script/code that is why the script/code that you've made will not work anymore.

can you convert the code, from '' to '' . :)
Yeah 2015 is different from 2016 ^_^

I hope you can fix it sir. thank you

Hi Jerald,
According to markup I have already published tutorial.

but the star rating will display only on your Blog search result. Not is Google search engine result page. :)

To display star rating in Google Search engine result page you have to use WordPress platform because there are several plugins helps to display star rating on Google search result. :up

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *