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;}
</style>

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;
    WIDGETPACK_LOADED = true;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = 'https://embed.widgetpack.com/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>

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 :
Www.SmartTechMukesh.Com