How To Add Star Rating Widget in Blogger Website

Hello Everybody, Today on this occasion I will share a tutorial on How To Add Star Rating Widget in Blogger Website. If you want to give a more professional look to your website, then you must to add star rating widget to your blogger post.

We often find this Star Rating Count Widget or Star Rating Count Widget on a website. this widget becomes a rating widget consisting of a star icon with a rating indicator that shows the rating of an article and is rated by the visitor, whether he gives an indicator with 5 stars or only 4, it comes back again depending on the visitor, if he thinks the article is good and interestingly, he will also give a 5-star appreciation for the article.

What Is Star Rating Widget

The Rating Count Star widget plays an important role in providing a good or bad appreciation value for an article that is read by the visitor. there are also many websites that install the coun star rating widget.

The more stars that are given by the visitor, of course the reputation of your article will be better in the eyes of other visitors and even in the Google search engine itself.

For those of you who can't wait to install the widget, please follow the steps below :-

How To Install Star Rating Widget On Blogger Website

Step 1 :- First of All, You need to Login With Your Blogger Account.

Step 2 :- Now Go to Your Blogger Dashboard.

Step 3 :- Then Click on Theme Menu.

Step 4 :- Click the arrow down icon next to the 'customize' button.

Step 5 :- After That Click on HTML.

Step 6 :- in this Step Copy the Code Provided Below and Paste it Above ]]></b:skin> or </style> tag.

#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 7 :- Then look for the Code <data:post.body/> .

Note :-
Usually there are 3 to 4 of these codes in the template, please Try All These Codes One By One.

Step 8 :- If you have found the location of the code, please copy the code below and put it after the code <data:post.body/> tag.

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

Step 8 :- Next, please copy the Javascript code below and place it above the code </body> .

<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 21697});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true; //true ubah ke False
    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 9 :- Now Don't Forget to Click on Save Button. Finished. Now open Your Any Post to see the results of star rating.

Conclusion

With the Rating Count Star widget, it will be very useful for website visitors to give value to the article or post that he is reading.

Well, Thus the discussion this time about How to Install Star Rating Widget on Blogger . If you have any questions regarding the post above, please ask in the comments column,I Hope it is useful for All.