How to Add Rating Star Widget with Counter by Using Simple CSS and Script On Blogger

If you're taken an example for any famous blogger that's doing more interesting script and css designs. You can also do that same with learning from our side. Now i am explain responsive rating star widget using simple css and script.









This rating star widget is used by visitors may vote about the article. Also its counting and show to all.



Well, on this occasion the author will give a short tutorial on How to Install the Star Rating Widget with CSS on Blogger. If you are interested in installing it, you can see in the following tutorial.

How to Install the Count Star Rating Widget on Blogger

1. Log in to your Blogger account → Themes → Edit html

2.Copy the below code and Paste before the code]]> </ b: skin> or </style>

<style type='text/css'>
/* MeeranBlog24x7 Rating Count Star */
#wpac-rating:before {content: "Was this article useful?";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>

3. Last step Copy the below code and paste whatever place. Most of Blog post top or last will placed that's perfect.



For example here the author posts it at the end of the article post which is paste right after the <data:post.body/>.

/* MeeranBlog24x7 Rating Widget */
<div id="wpac-rating"></div>
<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 21697});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true; //true ubah ke False
    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>

4. Save Theme. Done



I hope that tutorial will help to understand how to install rating star widget on blogger.