How to add star Rating widget in Blogger Posts

How to add star Rating widget in Blogger Posts ?If you are curious, here's a tutorial on installing the star Rating button on blogger.

How to add a Rating Widget in a Blog Post - Installing a star Rating widget in every blog post will look more professional, besides that this can also serve as an assessment of visitors' views regarding your website content and increase domain authority while increasing SEO on Google search engines.

How to add star Rating widget  in Blogger Posts
star Rating widget in Blogger

Now you may be thinking how to install a Rating widget on every blog post page? on blog platforms such as wordpress the feature to install Rating widgets is provided by default, but unfortunately Google's Blogger service does not yet have a built-in Rating widget feature. In other words we have to take advantage of third party widgets to be able to apply the Rating Widget on blogger.

In this post, I will share a tutorial on how to install a widget Rating on Blogger, for a demo you can check at the end of this article. If you are interested in installing it on a blog that you manage, you can follow the steps below:

How to add Star Rating Widget on Blogger

Step #1 : Login to your blogger dashboard Account

Step #2 : Go to Theme menu > Edit HTML

Step #3 : Copy and Paste the CSS Style code below right before the code ]]></b:skin> or </style >

<style type='text/css'>
/* Rating Count Star */#wpac-rating:before {content: "Beri Ranting Artikel";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 #4: Continue looking for the following code </body> Copy and Paste the JavaScript code below right before the code.

<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 #5 : Then enter the following caller code markup, you can place it as you wish

For example, I will apply it at the end of the post for all articles on this blog, then apply it to save the calling code right after the <data:post.body/> code in our HTML template

//calling code markup
<div id="wpac-rating"></div>

Step #6: If you have, save the template

You can also place the calling code only in certain articles, namely by copying the code into certain posts in HTML Mode


So, that was How to Make Widget Rating  in Blogger Posts , now you can check every article on your blog to see the results. If you follow the tutorial carefully there won't be any problems. Hopefully useful, if there are problems you can ask through the comments column.