Hello Blogger's How are you I hope you are doing well. I am Sadab Ali and welcome to my blog Tech Aadi.
Do you know that Rating Article Widget is very useful for your blog. That will enable the readers of your blog to rate your article and improve you.
In this article we are goting to discuss about How to Add Automatic Rating Article Widget in Blogger. So let's start the article and adding process.
For adding you have to only follow some simple steps thats all. But follow it carefully.
Before starting please backup your blog template for any kind of errror and easy restoration process.
Adding Automatic Rating Article Widget
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 change 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 <!--</body>--></body> or </body>.
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 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
Now all steps are completed i hope after following the above steps you have successfully installed the Automatic Rating Article Widget in you blog.
Conclusion
So this is all about How to Add Automatic Rating Article Widget in Blogger. I hope you like this article if you any query kindly do comment below. Stay tuned with us for more post like this.
Reference:
blog.fineshop.eu.org