Using CSS and JavaScript script code, we can create many interesting scripts such as Rating Count Star, for example.
Rating Stars Counting or Star Rating, which has the function of being able to rate articles on the web. This is where we can give a rating by specifying the number of stars. This widget is also equipped with a counter that can keep track of the number of users who have cast their votes.
Well, in that case, I’ll give a quick tutorial on how to install a Star Rating CSS widget on Blogger. If you are interested in installing it, then this tutorial is for you.
How to add Star Rating Widget in Blogger?
1. Log in to your Blogger account → Themes → Edit HTML.
2. 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: "Your Article Heading or Title";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. Then paste the script below after the <data: post.body /> code
<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 the theme
5. Done.
The widget works well in new Blogger themes.
