Añadir la opción de puntuar el post con estrellitas

Con esta sencillo truco recuperamos la opción que Blogger tenía antaño, por allá el 2009, de añadir estrellitas para que los usuarios podamos votar y calificar los posts de el blog.

Fue gracias a el foro de ayuda de blogger que, preguntando, se pudo recuperar el script perdido de esta opción, ya que todos los tutoriales encontrados en la red eran muy antiguos y no funcionaban.

Volverlo a integrar es muy fácil, ¡vamos allá!

1. Entrar en Plantilla > Modificar HTML
2. Clicar dentro del recuadro dónde aparecen los códigos de blogger y, sin escribir ni modificar nada, teclear a la vez Ctrl+F para que nos aparezca un pequeño buscador en la esquina superior derecha del recuadro.
3. Buscamos esta línia <div class='post-footer'>. Aparecerá dos veces, pero hay que pegar el código del script justo después de la segunda vez:

<!-- Valoración Estrellitas -->
<b:if cond='data:blog.pageType == "item"'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(34);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
<span class='star-ratings'>
<div g:background-color='ffffff' g:text-color='000000' g:font-family='century gothic' g:font-size='11px' expr:g:url='data:blog.canonicalUrl' g:height='42' g:type='RatingPanel' g:width='180'></div>
</span>
</b:if>
<!-- Fin Valoración Estrellitas -->


De esta manera las estrellitas aparecerán en el footer o pie de la entrada. Si por el contrario quisiéramos que quedara justo al final del post hay que pegar el código justo antes de <div class='post-footer'>, pero realmente ¡puedes añadirlo dónde desees que salga de la estructura del post! Eso ya depende de cada un@.

Para cambiar el estilo del script únicamente debes cambiar lo que está en color naranja por lo que quieras. Estos son sus significados:

• g:background-color > color del fondo
• g:text-color > color del texto
• g:font-family > tipografía del texto
• g:font-size > tamaño del texto
• g:height > alto del script
• g:width > ancho del script

¡Puedes ver el ejemplo aquí a bajo y al final de todas las entradas de este blog!