Home
Blogging
Scripts

How to Add Star Rating Widget For Blogger

Enhance your Blogger site with our easy guide on adding Star Rating Widget. Boost user engagement and SEO with this simple tutorial!

A lot of website owners wish to incorporate a Star rating feature to their web pages so that visitors can rate articles and subsequently enhance the content based on those ratings. However, they have been unsuccessful in doing so as Blogger currently does not offer any Star Rating Widget.

How to Add Star Rating Widget For Blogger

Copyright: Tech4era.com

In this article, we will discuss how to add a Star Rating Widget to a Blogger website. This widget allows visitors to rate articles on your website without the need for you to add any code to the article HTML repeatedly.

How to Add a Star Rating Widget Widget?

To add an article rating widget to your Blogger website, you don't need to have in-depth knowledge about HTML, CSS, or JS. All you need to do is copy and paste the provided codes in the right place on your Blogger website.

Important!Before we start adding codes in XML, I will recommend you take a Backup of your current theme. By chance, if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On the Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to the 'customize' button.

Step 4: Click Edit HTML to redirect you to the editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above it.

If your template has a dark mode feature, and if you want a different colour when in dark mode, you can customise the codes as needed. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.

/* Article Rating by Fineshop */
.pRate{display:none;padding:30px 0 10px 0}
.pRateC{display:flex;max-width:400px;margin-top:30px;padding:25px 17px;line-height:25px;background:#fff;border-radius:5px;box-shadow:0 5px 35px rgba(149,157,165,.3);font-size:16px;font-family:inherit;color:#08102b;text-align:center;justify-content:center}
.pRateC .ld{display:inline-flex;align-items:center;font-size:13px;opacity:.8}
.pRateC .ld svg{width:18px;height:18px;margin-right:5px;stroke:none !important;fill:#08102b}
.pRateS{background:#fff;position:absolute}
.darkMode .pRateC, .darkMode .pRateS{background:#252526}
.darkMode .pRateC{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}
.darkMode .pRateC .ld svg{fill:#fefefe}

Step 6: Now add the following HTML just below to <data: post.body/> 

<b:if cond='data:view.isPost'>
/* Article Rating by Fineshop */
  <div id='pRating' class='pRate'>
    <div class='pRateC'>
      <div class='ld'><svg viewBox='0 0 50 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg>Getting Info...</div>
      <div id='wpac-rating' class='pRateS'></div>
    </div>
  </div>
</b:if>

Step 7: Add the following JavaScript Code just above the </body> tag. If you don't find it, it is probably already parsed which is &lt;/body&gt;

Following is Lazyload JavaScript, so don't worry about Lighthouse, Performance and Loading Speed. Anything will not be affected.

<b:if cond=''data:view.isPost'>
<script>/*<![CDATA[*/ /* Article Rating Script by Fineshop (Lazyload) */ var lazyrs=!1;window.addEventListener('scroll',function(){(0!=document.documentElement.scrollTop&&!1===lazyrs||0!=document.body.scrollTop&&!1===lazyrs)&&(!function(){wpac_init=window.wpac_init||[],wpac_init.push({widget:'Rating',id:32139}),function(){var t,e;'WIDGETPACK_LOADED'in window||(WIDGETPACK_LOADED=!0,(t=document.createElement('script')).type='text/javascript',t.async=!0,t.src='https://embed.widgetpack.com/widget.js',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(t,e.nextSibling))}();document.querySelector('#pRating').style.display='block';}(),lazyrs=!0)},!0); /*]]>*/</script>
</b:if>

If you have already added Rating Widget by Widget Pack on your website and you are going to replace it with this Widget, replace the marked Rating ID with the old Widget Rating ID or create a new Rating Widget ID here. Keep it as it is if you don't know about it because we want you to avoid any difficulty.

Step 8: Lastly, Save the changes by clicking on this icon

Conclusion

This is all about adding the Article Rating Widget to Blogger Website. I hope you enjoy this article. Please do share this article. If you are facing a problem in any section or you have any questions then ask us by Joining the Telegram Group. Thank you for Reading!

Reference:
Fineshop