Want more tutorials? Request!

Adding Automatic Article Rating Widget to Blogger

Want to get ratings from visitors? This article will help you to add Automatic Article Rating Widget to Blogger Website.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Want to get ratings from visitors? This article will help you to add Automatic Article Rating Widget to Blogger Website.

Looks like WidgetPack is down or maybe it had stopped providing the free services.

Hello! Welcome to Fineshop Blog.

Many people want to add Article Rating to their website so visitors can rate articles and improve their contents according to ratings but they are failed to add it as Blogger currently doesn't have any Article Rating Widget or Gadget.

Article Rating Widget for Blogger
© Fineshop Blog | Article Rating Widget for Blogger

In this article, we are going to add Article Rating Widget to any Blogger Website. Visitors can rate your articles through this widget. Also you don't need to add any codes again and again in article HTML as this widget will be added automatically to all of your articles.


How to add Automatic Article Rating Widget?

Adding Article Rating Widget to Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

Important!Before we start adding codes in XML, I will recommend you to 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 Blogger Dashboard, click Theme.

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

Step 4: Click Edit HTML, you will be redirected to editing page.

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

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. 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: Now add the following JavaScript Code just above to </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://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>

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.

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

That's done! Now Article Rating Widget will be automatically added to all of your articles. Visitors can now rate your articles.

Demo

Want to see it working?
You can check Article Rating Widget Style before you apply it on your Blogger Website.
Let's have a look at it!

Terms of Use

If you want to use this Article Rating Widget on your website, please don't remove the attributes from the codes, it will not be visible on your website.

If you want to rewrite an article on this Article Rating Widget by using these codes, you must add a Reference with visible and clickable link redirecting to our website: https://www.fineshopdesign.com. If you rewrite without Reference, Legal Actions will be taken.

Conclusion

This is all about adding the Article Rating Widget to Blogger Website. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

© Copyright:
www.fineshopdesign.com

Getting Info...

About the Author

Hey there! My name is Deo Kumar aka Dev, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

Buy me a Coffee

2 comments

  1. Bro wo javascript mei jo I'd hai wo to khud ka dalna padega na bana kar....
  2. hello admin thanks for your article, seems like widgetpack was dead, do you have any rating alternative?
To avoid SPAM, all comments will be moderated before being displayed.
Don't share any personal or sensitive information.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.