Hello! Welcome to The Web Trick Blog. Many Blogger's wish to add Article Rating to their website so that visitors may rate articles and improve their content based on ratings, but they can't because Blogger doesn't offer an Article Rating Widget or Plugin at the moment.
 |
| © The Web Trick Blog | Article Rating Widget for Blogger |
We'll show you how to add an Article Rating Widget to any Blogger website in this article. This widget allows visitors to rate your content. You also won't have to add any codes to your article HTML again because this widget will be applied automatically to all of your articles.
Does this Star Rating appear on Search Results?
A review will appear in your search results if you add this star rating in blogger and enable Google Rich Snippets mode.
How to add Automatic Article Rating Widget?
Adding an Article Rating Widget to a Blogger website does not require much knowledge about HTML, CSS, or JS. We've already written the code, so anyone can use it. To place in your Blogger Theme, simply follow the instructions.
Important!Before we begin adding XML codes, I strongly advise you to make a backup of your current theme. If an issue arises, you can always 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: Next search the ]]></b:skin> code and paste the CSS code just above the ]]></b:skin> code.
If your template contains a dark mode function, and you want it to be a different colour when it's turned on, you can change the codes to suit your needs. Each template may have a different dark mode class, so please adjust accordingly. You can replace the marked class with the dark mode class from your template.
/* Article Rating by The Web Trick */
.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}
Step 6: Paste the following HTML code just below the <data:post.body/>. Look for the code usually there is more than 1 code depending on blogger template. Please Try one by one.
<b:if cond='data:view.isPost'>
<!--[ Article Rating by The Web Trick ]-->
<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: Paste the following JavaScript code just below the <body> tag. Look for the tag usually at the bottom of the template and paste the Javascript code below right before the <body>tag.
Don't worry about Lighthouse, Performance, or Loading Speed if you utilise Lazyload JavaScript. Nothing is going to be harmed.
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/ /* Article Rating Script by The Web Trick (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:33936}),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>
Replace the marked Rating ID with your widget Rating ID or create a new one from here. If you don't want to deal with any issues, you can simply copy and paste our widget rating id code.
Step 8: Finally, Save your theme by clicking icon at the top right of HTML editor.
That's it! The Article Rating Widget will now be applied to all of your articles automatically. Your articles can now be rated by visitors.
Demo
You can check out directly from here before adding the Article Rating Widget to your website. Let's have a peek!
Remove Star Rating from Specific Pages
The problem is fairly common, and the answer is to add some CSS to the sites where you want to conceal the Review Box, as seen below.
<style>
#pRatings{display:none;}
</style>
Conclusion
The purpose of this tutorial is to Guide you to Creating Article Rating Widget for Blogger to your Blogger website. I hope you find this information interesting. Please share this article with your friends and family. And if you have any questions or encounter any difficulties in any aspect, please ask them in the comment section.
Reference:
www.fineshopdesign.com