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 visitors asked me to write an article about how we can add star ratings to 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 blogger does not support any kind of database, for instance, we are going to use third-party sites 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 star rating system to 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 are 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 the 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 a 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 adds new functionalities to your blogger blog or WordPress website.

These are some plugins that are offered by this 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 system and other plugins offered by this third-party site on your WordPress site.

Conclusion:

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

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