How to Create a Rating Widget on Blogger Posts

How to Create a Rating Widget on Blogger Posts
How to Create a Rating Widget on Blogger Posts



How to Make a Rating Widget on Blog Posts - Installing a star rating widget in each blog post will look more professional, besides that this can also serve as an assessment from the views of visitors regarding your website content and increase domain authority while increasing SEO on the Google search engine.

Now you might be thinking how to install a rating widget on every blog post page? On blog platforms like WordPress, the feature for installing a rating widget is provided by default, but unfortunately Google's Blogger service doesn't yet have a built-in rating widget feature. In other words, we have to take advantage of third-party widgets to be able to apply the Rating Widget on blogger.

In this post I will share a tutorial on how to install a widget rating on blogger, for a demo you can check at the end of this article. If you are interested in installing it on the Blog that you manage, you can follow the steps below:

How to Install a Star Rating Widget on Blogger

Step #1 : Login to your blogger dashboard account
Step #2 : Go to Theme menu > Edit HTML
Step #3 : Copy and Paste the CSS Style code below right before the code ]]></b:skin>or</style>
<style type='text/css'>
/* Rating Count Star */#wpac-rating:before {content: "Rate this article";top: -15px;text-align: center;position: relative;width: 100%;}
#wpac-rating .wp-stars .wp-star:hover:before{z-index: 999;padding: 3px 11px;background: #1a1d23f0;color: #fff;font-size: 12px;border-radius: 2px; white-space: nowrap;position: absolute;line-height: 1.4;text-align: center;-ms-transform: translateX(-30%);-moz-transform: translateX(-30%);-webkit-transform : translateX(-30%);transform: translateX(-30%);top: 100%;margin-top: 9px;}
</style>
Step #4 : Continue to find the following code </body>. Copy and paste the JavaScript code below right before the code
<script type="text/javascript">
wpac_init = window. wpac_init || [];
wpac_init. push({widget: 'Rating', id: 31970});
(functions() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document. createElement('script');
    mc. type = 'text/javascript';
    mc. async = true;
    mc.src = 'https://embed.widgetpack.com/widget.js';
    var s = document. getElementsByTagName('script')[0]; s. parentNode. insertBefore(mc, s. nextSibling);
})();
</script>
Step #5 : Then enter the following caller code markup, you can place it as you wish

For example, I will apply it at the end of the post for all articles on this blog, then implementing it will save the calling code right after the code <data:post.body/>in our HTML template.
// Markup callout code 
<div id="wpac-rating"></div>
Step # 6 : If you have, Save the Template

You can also place the caller code only in certain articles, namely by copying the code into certain posts in HTML Mode

Update Create a Star Review (Rating).

At point number 4 above, use the following javascript code that has been updated
<!--[ Twigs ]-->    
<script type='text/javascript'>
wpac_init = window. wpac_init || [];
wpac_init.push({widget: 'Rating', id: 31970, html: '{{=it.stars}} {{?it.count>0}}Rating: {{=it .rating}} based on {{=it. count}} {{=it. votes}}{{?}}'});
(functions() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document. createElement('script');
    mc. type = 'text/javascript';
    mc. async = true;
    mc. src = 'https://cdn.widgetpack.com/widget.js';
    var s = document. getElementsByTagName('script')[0]; s. parentNode. insertBefore(mc, s. nextSibling);
})();
</script>
When finished, save the template to see the changes.

Closing

So, that was How to Make Widget ratings on Blogger Posts , now you can check below this article to see the results. If you follow the tutorial carefully, you won't have any problems. Hopefully this is useful, if there are problems you can ask via the comments column.

Post a Comment

Welcome to Jehangir Khan's Tech Blog! We're thrilled to have you join the conversation. Your comments and feedback are valuable to us and help us create a community of tech enthusiasts who share ideas and insights. We encourage you to share your thoughts related to the post and engage in a respectful and meaningful conversation with others. Please refrain from spamming or promoting your own content in the comments section. We also ask that you avoid using inappropriate language or attacking others. Please note that all comments will be reviewed before they are posted, and we reserve the right to remove any comments that violate our policies. Let's explore the world of technology together and inspire each other to achieve our goals!

Previous Post Next Post