How To Create Star Rating Widget in Blogger ?

How To Create Star Rating Widget in Blogger

Hello Everyone, in this tutorial I will share with you all how to create star rating widget in blogger. Installing a star rating widget in each blog post on your website will look more professional, plus it can also serve as an assessment of the views of visitors about the content of your website and domain while increasing SEO on Google search.

On blog platforms like WordPress, the facility to install a star rating widget is provided by default, but unfortunately Google's Blogger service does not yet have a star rating widget feature. So we have to take advantage of third party widgets to be able to implement rating widget on blogger.

In this post, I will share a tutorial on how to set widget star rating on blogger. If you are interested in installing it on any blog you create, read the full post below and follow the given steps.

How To Create Star Rating Widget in Blogger :-

Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Login Your Blogger Account.
Step 3 :- Then Click on Theme Menu.
Step 4 :- After Click on Edit Html.
Step 5 :- Then Copy The Given Css Code and Put it Above The </head>.
<style type='text/css'>
/* Post Star Rating Widget By Www.SmartTechMukesh.Com */
#wpac-rating:before{content:"Rate This Article";top:-15px;text-align:center;position:relative;width:100%;}
#wpac-rating .wp-stars .wp-star:hover:before{z-index:999;padding:3px 11px;background:#1a1d23f0;color:#fff;font-size:12px;border-radius:2px;white-space:nowrap;position:absolute;line-height:1.4;text-align:center;-ms-transform:translateX(-30%);-moz-transform:translateX(-30%);-webkit-transform:translateX(-30%);transform:translateX(-30%);top:100%;margin-top:9px;}
Step 6 :- Then Copy the Below Html Code and Put Under <data:post.body/>.
<div id="wpac-rating"></div>
Step 7 :- Then Copy The Given JavaScript Code and Put it Above The </body>.
<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 31970});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
Step 8 :- Then Don't Forget to Click on Save Theme.

Conclusion :-

In this post I have shared tutorial on How To Create Star Rating Widget in Blogger. I hope this tutorial can be useful for all blogger blogspot users. Thank you for visiting our website.

Refrence :


Hey there! My name is Mukesh Kushwaha, I am a Professional Web Designer, Graphic Designer, UI/UX Designer, Logo Designer and Banner Designer. I am Content Creator from Bihar State, India. I love coding and editing, so I always try to create something new and interesting.
facebook instagram twitter pinterest telegram


Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

  1. Hello,

    Now I have changed the domain name
    Old Blog Name: Quang Linh Sharing
    New Blog Name: Quang Linh Pro
    Can you help me change the domain name of to
    Thank you so much ❤

    Blog Name: Quang Linh Pro
    Description: Tech Tricks, Blogger, Facebook Tricks

    1. Check Our Friend Sites Page And Submit Your Blog Description Minimum 50 Character.

  2. how to show this rating on homepage too?

Previous Post Next Post