Tech & Fun Zone

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.

<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);}  
</style>

6. Now Visit the Widget Pack website and create an account.
   
7. Next Add your website.
   
8. Now Go to Menu ➤ click on Rating option and select Install .
   
9. 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>.
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);
})();
</script>

10. 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>

11. Now Click on Save to Save the Theme
12. Now Go back again to the Widget Pack website and change the Rating Settings.

Set the Settings as Below :

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..

Go to Link

© Tech & Fun Zone