We are Using 3rd party Ads Service on our Site. Please bear with us if you face any difficulties

How to Create Star Rating Widget For Blogger

Installing a 5-star rating Widget For Blogger in every blog post on your web site can look a lot of more professional.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

If you are a Blogger platform user, then there's a time once you begin searching for ways that to feature a 5-star Rating Widget For Blogger to your posts. Installing a star rating device in every blog post on your web site can look a lot of professional, and it also can function associate assessment of the views of visitors regarding the content of your web site and domain whereas increasing SEO on Google search.

    Short Talk

    As you may know that Blogger isn't like WordPress, WordPress has many already installed plugins with Star ratings such as: kk Star Ratings, WP-Post Ratings. However sadly Google's Blogger service doesn't nevertheless have a star rating device feature. thus we've to require advantage of third party devices to be ready to implement rating widget on blogger. But that doesn't mean you can't add it.

    In this Article I will show you how you can add star Rating Widget For Blogger, It will also appears star reviews on Google search results. For Demo You can scroll down at this article and see the Rating Widget

    Advantages of using 5-Star Rating Widget for Blogger

    I saw that the viewers had all finished reading the post but did not want to comment to evaluate that post because it took a lot of time. So Adding a star rating widget, and expressing your thoughts on article or post becomes easier with just one click.

    Adding this 5-star rating widget also makes the readers to judge how the quality of the post is.

    As long as you add this 5-star Rating Widget For Blogger and enable Google Rich Snippets mode, a review can seem on your search results.

    How to Create 5 Star Rating Widget For Blogger

    Note :- Before beginning this tutorial backup your blogger theme to avoid any errors and issues.

    To add a 5-star Rating Widget For Blogger to your blog post which can Appear in Google, If you are interested in installing it on any blog you create, read the full article below and follow the given steps.

    1. First Go To Blogger.Com.
    2. Open your blogger dashboard.
    3. Next, Click on the "Theme" Section and Click Edit Html. Option
    4. After, Find </head>Tag on Theme
    5. Copy the below CSS Code and paste above on </head>  Tag.
    6. <style type='text/css'>
      /* Post Star Rating Widget By Www.Techandfunzone.eu.org */
      #wpac-rating:before{content:&quot;Rate This Article&quot;;top:-15px;text-align:center;position:relative;width:100%;font-weight:800;}
      #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;box-shadow: inset 3px 5px 10px #c0c0c0, inset -3px -5px 10px #fff;border: 2px solid rgba(255, 255, 255, 0.2);}  
    7. Now Visit the Widget Pack website and create an account.
      Rating Widget For Blogger
    8. Next Add your website.
      Rating Widget For Blogger
    9. Now Go to Menu ➤ click on Rating option and select Install .
      Rating Widget For Blogger
    10. After that Copy the JavaScript code that you got and paste it into the </body> Tag . Please Don't copy the full code, Just copy from <script type = "text / javascript"> ... </script>.
    11. For Example:
      <script type='text/javascript'>
      wpac_init = window.wpac_init || [];
      wpac_init.push({widget: &#39;Rating&#39;, id: 33302});
      (function() {
          if (&#39;WIDGETPACK_LOADED&#39; in window) return;
          WIDGETPACK_LOADED = true;
          var mc = document.createElement(&#39;script&#39;);
          mc.type = &#39;text/javascript&#39;;
          mc.async = true;
          mc.src = &#39;https://embed.widgetpack.com/widget.js&#39;;
          var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(mc, s.nextSibling);
    12. Now Search for the <data:post.body/> Tag in your theme and paste this HTML under the <data:post.body/> Tag .
      <b:if cond='data:view.isPost and !data:view.isPreview'><div id='ratings' style='width:70%; height:100px; border-radius:30px; text-align:center; border:4px solid #1bfa1e; margin:0 auto; box-shadow: 3px 5px 12px #c0c0c0, -3px -5px 12px #fff ; margin-top:10px'> <p id='wpac-rating'/></div></b:if>
    13. Now Click on Save to Save the Theme
    14. Now Go back again to the Widget Pack website and change the Rating Settings.
    Set the Settings as Below :
    Rating Widget For Blogger
    1. Enable Google Rich Snippets: For Ratings if you choose it will display star ratings on the search results.
    2. Vote via: Choose a evaluation method, so choose Device (cookie).
    3. Color: Choose The Star color.
    4. Stars: Select the Number of stars.
    5. Then you click Save.

    Final Words

    I hope this Article How to Create Rating Widget For Blogger is helpful to design your blogger website. If you want any more information like this article. Please follow our Tech & Fun Zone Telegram Channel for updates.

    Hopefully, the Above tutorial has completely helped you to learn How to Create Rating Widget For Blogger. If you have got any issue in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us

    Was it helpful? If it had been then don’t forget to share this text along with your alternative friends too.. Thank you for visiting. Happy Blogging..

    © Tech & Fun Zone

    About the Author

    Student | Blogger | Developer


    1. If the Above Tutorial have worked for you Please leave a Comment
    2. tnxz i am looking for it
      1. Most welcome
    3. i gave it 5 stars
      1. Thank you ❤️
    4. Not working only show getting info...
      1. try again..and follow the all steps
    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.