Add Star Rating in Blogger

Looks like Widgetpack is currently down.

Hello Guys! Welcome to Shiva Technic World in this article we are going to show you how to add a star rating in Blogger. So let's check.

Advantages of using Star Rating

You, website visitors, can rate your article and you can know how much they like your article.

How Star Rating works?

This Star Rating works with the help of widgetpack.com. It will work when visitors touch the star example visitors touched the 5th star then the article gets 5 stars if visitors touch the 4th star the article will get 4 stars.

How to add Star Rating?

First, go to Blogger
Then click on the Theme option
Then you can see a down arrow near customize click on that
Then click on Edit HTML
Then press CTRL+F and find <data:post.body/>

Then paste this HTML code below <data:post.body/>

<!--Star Rating-->
<b:if cond='data:view.isPost'>    
<div class='pRate' id='pRating'>
<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>Please wait...</div>
<div class='pRateS' id='wpac-rating'/></div></div></b:if>

Then copy this CSS and paste above </head> or </head>

<!-- Star Rating CSS-->
  <style>
.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}</style>

Then copy this Javascript, HTML codes and paste above </body> or </body>

<b:if cond='data:view.isPost'>
  <script>/*<![CDATA[*/ /* Star Rating Script (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:33379}),function(){var t,e;'WIDGETPACK_LOADED'in window||(WIDGETPACK_LOADED=!0,(t=document.createElement('script')).type='text/javascript',t.async=!0,t.src='https://cdn.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>

Last words!

Hope this article will helpful to you. If you have any doubts related to this article ask me in the comment. Thanks for visiting our site!

Watch tutorial

About

Website: Shiva Technic World
Created on: January 24,2022
Used code: HTML, CSS, Javascript
Tags: Advantages of Star Rating, How to Add Star Rating, How Star Rating works, Star Rating