تطبيق مدرستنا لتعليم للاطفال

how to add star rating in blogger

Star ratings is a new feature currently available through Blogger in Draft. This enables you to add a widget beneath your posts which readers can use to rate your articles on a scale of 1-5

If you use a default Blogger template, you should be able to activate this feature right away when logged through Blogger in Draft: simply go to Layout>Page Elements and edit the "Blog Posts" widget to activate the display

However, those using a customized or third party template will need to add the required code to their templates first. In this tutorial, I'll explain how you can add "star-rating" functionality to your customized Blogger template

Go to the THEME section of you blog then click on the Edit HTML and ensure you have checked the "expand widget templates" box

Click on the html code and now try to find this line of code by search option (ctrl + f)

<div class='post-footer-line post-footer-line-1'>

Immediately after this line (either the post-footer or post.body), add the following section of code:

<b:if cond='data:blog.pageType == "item"'> <span class='star-ratings'> <b:if cond='data:top.showStars'> <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/> </b:if> </span> </b:if>

Next, find this line in your Blogger template (this should be a little further down):

<b:include name='nextprev'/>

Just after this line, paste the following section of code:

<b:if cond='data:top.showStars'> <script src='http://www.google.com/jsapi' type='text/javascript'/> <script type='text/javascript'> google.load("annotations", "1"); function initialize() { google.annotations.createAll(); google.annotations.fetch(); } google.setOnLoadCallback(initialize); </script> </b:if>

Then save your template.