 |
| Little Known Facts About How To Create Star Rating Widget In Blogger - And Why They Matter ? |
H ello, everyone! Wellcome to SoiPro .Today on this occasion I will going to share a tutorial about Little Known Facts About How To Create Star Rating Widget In Blogger - And Why They Matter ?
On blog platforms like WordPress, the feature to install a star rating widget is provided by default, but unfortunately Google's Blogger service does not yet have a star rating widget feature. So we have to use Js along with Html and Css to be able to implement rating widget on blogger.
Alright, let's go straight to the installation tutorial.You now follow these steps carefully.
How To Create Star Rating Widget in Blogger?
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 find the code
</head> and paste the following CSS Codes just above to it.<style type='text/css'>
/* Post Star Rating Widget By www.soipro.com */
#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 6: Then copy the Html code given below and paste it
<data:post.body/> below.<div id="wpac-rating"></div>
Step 7: After this copy the given JavaScript code and paste it
</body> above.< script type = "text/javascript" > wpac_init = window.wpac_init || [];
wpac_init.push({
widget: 'Rating',
id: 31970
});
(function () {
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>
Step 8: Lastly, Save the changes by clicking on this icon
Conclusion
Ok so that 's Little Known Facts About How To Create Star Rating Widget In Blogger - And Why They Matter ?. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!
Source:
www.soipro.com