Aggiungere voto a stelle a blogger

Nelle impostazioni del blog blogspot possiamo trovare facilmente le impostazioni che ci permettono di inserire un sistema di valutazione per i nostri utenti. Il sistema predefinito è quello a parole, l' utente può segliere se il nostro post è divertente, interessante, ecc.. e possiamo persimo inserire le parole di scelta che vogliamo, basta andare in Layout < post < modfica e ci basta mettere una spunta su questo gadget e comparirà sui nostri post. Ma, se volessimo inserire un sistema di valutazione a stella?

Come inserire le stelle per votare nel blog?

Se utilizziate un modello predefinito basterà eseguire il passo che sfiegherò per attivare il rating a stelle ma, la maggior parte utilizza quelli personalizzati quindi dovremo mettere mano anche al codice del template.

1) Il primo passo consiste nell' attivare il gadget. Per fare questo dovremo collegarci a blogger in versione Draft in cui potrete trovare i gadget in beta, quindi entriamo in blogger tramite il link http://draft.blogger.com/ e come per il sistema di valutazione con parole chiave, spiegato all' inizio, andiamo in Layout < post < modfica ma in questo caso vedremo anche le stelline, spuntiamo sul gadget.




2)  Se usate un modello predefinito dovreste già vedere il risultato ma, se usate un template personalizzato è probabile che non sia incluso il codice necessario per visualizzare lo Star Rating.
Andate in Modello < Modello HTML < procedi < espandi widget , dovremo cercare

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

o in alternativa

<p> <data:post.body /> </ p>

 per rendere più facile la ricerca potete cliccare sulla tastiera Ctrl e F , apparirà sul browser (sotto), una casella di ricerca inserite il codice e lo troverete immediatamente. Appena sotto uno di questi codici dovremo inserire questo codice il quale ne determinerà la posizione

<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>

 3) Ora dovremo inserire il codice per farlo funzionare, cerchiamo:

 <b:include name='feedLinks'/>

e subito dopo inseriamo:

 <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>

in alcuni template potrebbe essere già presente. Controlliamo in uno dei nostri post se il sistema di valutazione a stelle ora compare. Se ancora non dovesse comparire e probabile che dovrete inserire il codice citato nel secondo passo in un altra posizione, in questo caso dovrete fare dei test inserendolo in posizioni diverse finchè non compare. Il risultato dovrebbe essere questo:

Proviamo a personalizzare le nostre stelle

Il layout vi apparirà come nell' immagine ma se vogliamo possiamo ulteriormente personalizzare sfondo e testo. Per fare questo dovremo cambiare i valori backgroundColor e textColor , possiamo anche fare sì che appaia solo nei post e mai in home page. Sostituite il primo codice detto con:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>

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

</b:if>

il codice in arancione serve per farlo comparire solo nei post, il codice in rosso sono i colori di sfondo e testo che ovviamente dovrete combiare con il codice del colore che più preferite. Spero che questo tutorial vi sia stato utile.