How to Add Star Rating System in Blogger

Once I use to share a simple CSS star rating module which was only made using CSS and HTML and one of my blog visitor asked me to write an article about how we can add star rating in our blogger blog. On his demand today I am writing this article.

In this article we are going to create and blogger widget which adds up functionality to rate your articles in blogger.

As you know that blogger does not support any kind of database for instance we are going to use third party site to make this possible.

This widget gives your website of premium look even if it is made on blogger CMS.

So if you want to add this starting system into your blogger blog follow the steps which are provided below and I hope you will do as it is said.

The widgets which I have heard on my website 100% working if you face any difficulty let me know in the comments section.

Follow These Steps:

1. Go to https://widgetpack.com and make an account.
2. Copy the ID which is given to you on https://widgetpack.com.
3. Now Go to Blogger Dashboard
4. Go to Layout Section
5. Click Add Gadget where you want to add this widget.
6. Select HTML/Javascript widget from the list.
7. Now copy the code provided below and paste it as widget content.

<style>
#wpac-rating{margin-top:10px;font-family:Roboto,sans-serif;font-size:14px;line-height:1}
.wp-r .wp-rating-score,.wp-r .wp-rating-stars{vertical-align:-2px;}
</style>
<div id="wpac-rating"></div>
<script type="text/javascript">
//<![CDATA[
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 19144, color:'ff9800', html: 'User Rating: {{=it.rating}} {{=it.stars}} {{?it.count>0}}Up to the present {{=it.count}} voted. {{?}}'});
(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>

Replace the highlighted text with your ID.

8. Save Widget

Now if you are facing any difficulty while creating this widget you can ask me and I will make video for you.

One thing you should keep in mind is that the third party site which we have used only allows you to add one website.

This website also consists of some more plugins or widgets that can help you and adds new functionalities into your blogger blog or wordpress website.

These are some plugins which are offered by these third party site:

• Star Rating Plugin
• Comment Plugin
• Review Plugin

As I have told you in the above paragraph, you can also use this star rating systems and other plugins offered by this third party site into your wordpress site.

Conclusion:

You can also add two more plugins which are offered by this site into your blogger blog by following the same steps.

If you face any kind of errors, comment your issues below in the comment section it's empty for you. I am also waiting for your response.