- show ratings below the posts (as usually);
- duplicate rating information and show it above the posts (without ability to vote).
Steps:
0. Make a backup copy of the template;
1. Open template editor (don't forget to select "Expand Widget Templates" checkbox);
2. Find ratings widget call and add parameter "callback=previewRating", something like this:
...class_star_vote=ffbs_star_aimg_vote&callback=previewRating&views=yes&average=yes...
3. At the desired place of the template write a div that will hold ratings duplicated information:
<div expr:id='"graddit_preview_rating_" + data:post.id'>Rating: </div>
for example, you can place it just before post body (before <data:post.body/>)
4. Somewhere (preferably on top) in your template write callback function, like this one:
<script language='javascript'>
function previewRating(key, id, stats, average, amount, votes, data, views) {
var div = document.getElementById("graddit_preview_rating_" + id);
if (div != null) {
var avg = Math.round(average);
var tmp = div.innerHTML;
for (var i = 0; i < avg; i++) {
tmp += "<span class='ffbs_star_set'>&#9733;</span>";
}
for (var i = avg; i < amount; i++) {
tmp += "<span class='ffbs_star'>&#9734;</span>";
}
div.innerHTML = tmp;
}
}
</script>
5. Save the template. You're done, ratings should be now showing right after title (before post body) of each post.
As you see, callback function is a powerful tool that gives you unlimited control over your ratings.
Reminder: the code above should be used with blogger templates only, it will not work with a different template system; you should adapt it to the templater or for pure HTML just remove redundant special characters. Let me know if you faced any problems with that.
Rate this posting:
You might like:
Hi amazing widget this is,
ReplyDeleteIs it possible to use this feature to show raitings under each post title on the homepage like a screen shot of raiting without the ability to vote so only shows ratings and page loads fast
Thanks
That is exactly what the function does - displays stars under titles. See how it works here: http://blog-perevodov.blogspot.com/. But it doesn't decrease the load time, as it works with the data that has already been loaded.
Deletehi
ReplyDeletei have a custom blogger template, im having trouble doing this tutorial im stuck on step 3.
basically i want this to show on the labels link have a look at this page
http://www.bengalipiffs.blogspot.co.uk/search/label/Females?&max-results=16
so i want this to show above or bellow i don't mind where but next to the post title on the label page for each box, so on step 3. where exactly do i put the:
div expr:id='"graddit_preview_rating_" + data:post.id'>Rating: div
Well, you never know for sure where to put that, you'll have to experiment. Add something simple (I usually do !-1-!, !-2-!, etc.) at the places you think might be right, then save template and check where your text appears. If proper place found - this is it. If not, continue to try. You also might want to refer to official blogger help on all the tags available in the templates: http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270.
Deletehi
Deletei have experimented and found the propa place which is div class header but
i have problem when i put that code there only the word raitings shows but theres no starts next to it but if i put the code after it works perfect have look at my site know i put it on top
http://www.bengalipiffs.blogspot.co.uk/
works perfectly but when i put on label page
http://www.bengalipiffs.blogspot.co.uk/search/label/Females?&max-results=16
only the label words shows but no stars, please help thanks alot.
It means that the place you found is not good for label page. Are you sure sample text (!-1-! or whatever) also was showing on label pages?
Deleteon label page it was showing only the word raiting but no picture stars next to it
DeleteI can't see anything now (removed?). Possibly a JS error, I need to see it to be able to advice.
Deletehave a look know
Deletehttp://www.bengalipiffs.blogspot.co.uk/search/label/Females?&max-results=16
Ok, I see. To be able to duplicate ratings you need to load those ratings first. I mean you should load the widget with callback function name passed to it, and then that function will draw stars after "Rating: " label. Currently ratings are not called from label pages, there are no requests to graddit (at least I don't see) on label pages. I guess you don't need both preview stars and real stars on labels page, in this case you can hide widget with some CSS, but you'll have to figure that out, how to make widget appear on normal pages, but not appear on label bages.
Deletei want to show duplicate rating on my label page you see and keep the stars widget on blogger pages so at the moment i tryed to follow this method on label page but it only shows rating and no stars like i said, is it possible to put dulpicate on label page and dont know how to use call back functions can u show me with pastebin.com please
Deletethanks alot
Well, it's not that easy. To show how it should be I'll have to take your entire template, put it on test blog, populate it with fake articles and then try to implement ratings on label pages. And it's almost midnight here where I live, so not today. In the meantime you can upload your latest template (after all your experiments) to pastebin and give link to it here, I'll try to check it as soon as possible.
Deletehi
Deletei have uploaded the template to pastebin its:
http://pastebin.com/4Ra8QhY0
or you can download it here as blogger template
http://hostingtemplate.googlecode.com/files/B%20Tube%20Advantage-gallerytemplates.rar
take your time and
thanks alot your a genius mate
any solutions on how to get the graddit duplicate raitings on post page or the label or home pages it only works on page post header for some reason
ReplyDeleteIt's all about proper conditions in your template and accurate handling in JS, it's not that easy to advice without actually digging into your code. I'm planning to launch a site or blog where I'd keep some templates with graddit ratings and other widgets pre-installed, I'll include ratings duplication there too, but it's not going to happen very soon.
DeleteI don't see that you're using callback for ratings and that you have previewRating in your code. You can check http://mlnpics.blogspot.com - there I'm using this method to disable voting on the homepage.
ReplyDeletehi
ReplyDeletei just checked the mimipics template
the reason this didnt work is because you forgot to mention some code at step 3
this is the code for step 3 for this tutorial, i just tried it and it works
<div expr:id='"graddit_preview_rating_" + data:post.id'/>
<div class='ffbs_rate' expr:id='data:post.id' style='display: none;'>{[["☆","★"]]}</div>
<script expr:src='"http://www.graddit.com/rate/eng/10/" + data:post.id + "?id=" + data:post.id + "&url=" + data:post.url + "&callback=previewRating&stats="' type='text/javascript'/>