How To Create Star Rating Widget in Blogger ?

Hello everyone, In this tutorial I will share with you all how to make Star Rating Widget in Blogger. Installing a Star Rating Widget in every blog post on your website would be more beneficial, as well as it can serve as a measure of user views 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 use Js along with Html and Css to be able to implement rating widget on blogger.

In this post, I will share a tutorial on how to set up Star Rating Widget 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 of all go to Blogger.Com.

Step 2 :- Then login to your blogger account.

Step 3 :- After that click on Theme menu.

Step 4:- Click on Edit HTML.

Step 5: - After this copy the given Css Code and paste it  </head>above.

<style type='text/css'> /* Post Star Rating Widget By Technical Success Official */ #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 Html code given below and paste it <data:post.body/>below.

<div id="wpac-rating"></div>

Step 7: - After this copy the given JavaScript code and paste it </body>above.

<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://cdn.widgetpack.com/widget.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling); })(); </script>

Step 8 :- After that 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 will be useful for all blogger blogspot users. If you are facing problem in installing this widget then comment us we will help you. Thank you for visiting our webiste.