How to Add Post Rating Widget End of Blogger Blog Post?
How to Add Post Rating Widget End of Blogger Blog Post?
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 == "item"'>
<!-- 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 != "true"'> <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.
10 comments
http://www.bloggerspice.com/2015/03/How-to-use-data-highlighter-tool-for-your-blog.html
Thank You.
"div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'"
Try to visit this page: http://data-vocabulary.org/Review-aggregate
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 'data-vocabulary.org' to 'schema.org' . :)
Yeah 2015 is different from 2016 ^_^
I hope you can fix it sir. thank you
According to Schema.org markup I have already published tutorial.
http://www.bloggerspice.com/2016/04/enable.schema.org.markup.star.rating.html
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