How To Make Automatic Star Rating Widget

How To Make Automatic Star Rating Widget_You must have seen the star rating widget while browsing on other people’s sites, so what’s the point? Star rating widget is useful for assessing article quality and improving content. but many fail to add this widget.

now you don’t need to go anywhere to look for Tips and Tutorials about blogging because the simple Blogger Tutorial will continue to make special updates for those of you who are currently entering the world of bloggers.

according to the title, this time I will give a tutorial on how to make a special Star rating Widget Script for those of you who want to add a star rating widget to the post. let’s just go to the script.

How to Create an Automatic Star Rating Widget?

1: Please Login to Blogger 

2: Choose Theme And Edit Html

3: Find the code ]]></b:skin> and put the following CSS code right above it

If your template has a dark mode feature, and you want a different color when in dark mode, adjust the code to your needs. Each template has a different class, so please adjust it, you can replace the class marked with your template’s dark mode class.

.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}
.drK .pRateC, .drK .pRateS{background:#252526}
.drK .pRateC{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}
.drK .pRateC .ld svg{fill:#fefefe}

4: Put the following HTML right below the code <data:post.body/>

<b:if cond='data:view.isPost'>
  <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>

5: Now add the following JavaScript code just above for the </body>mark. If you don’t find it, it’s probably already parsed ie <!–</body>–></body> or &lt;/body&gt;

loading speed will not be affected as we have provided Lazyload JavaScript so don’t worry about Lighthouse, Performance and Loading Speed.

<b:if cond='data:view.isPost'> <script>/*<![CDATA[*/ 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 as it is if you don’t have idea about it because we do not want you to face any difficulty.

6: Finally, Click the Save Icon

Widgets will automatically be included in all articles. don’t bother making, just follow the method above and you’re done. Thank you for visiting, if you have questions, please comment, we will reply to your comments but not fast response…

Referensi:

https://www.fineshopdesign.com