Blogger Fenix: el rating de estrellitas

Implementar la nueva opción para califica posts es simple si ya disponemos del código en nuestra plantilla. Sólo hay que editar el elemento Blog y allí marcar la casilla correspondiente.

De esa manera, aparecerá debajo de cada post con el color de fondo que tengamos establecido.

¿Y cómo sabemos si tenemos el código? Hay que buscar esto:

<span class='star-ratings'>

que es el inicio. Si está, seguramente está el resto. Si no está, lo podemos agregar manualmente.

Tiene dos partes. Para la primera debemos buscar esto:

<b:includable id='main' var='top'>
.......
<b:include name='feedLinks'/>
[ ... aquí insertaremos el código ...]
</b:includable>

El código que debemos pegar es este:

<!-- RANKING -->
<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.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Ahora, falta la segunda parte que colocaremos donde nos gustaría que apareciera. Por defecto, se ubica en alguno de estos bloques del footer de los posts. No es sencillo mostrar exactamente donde pero, supongamos que es donde está el autor o las etiquetas. Buscamos ese bloque y lo ponemos al final:

<p class='post-footer-line post-footer-line-1'>
......
[ ... aquí insertaremos el código ...]
</p>

El código a insertar es el siguiente:

<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'>
</div>   
</b:if>
</span>

Este elemento nuevo tiene algunos problemas que cada uno evaluará. Para empezar es lento, demorará en cargarse. El segundo problema es que es difícil de personalizar aunque hay algunas cosas que podemos hacer:

g:width='180' es el ancho
g:height='42' es la altura
g:background-color='data:backgroundColor' es el color de fondo
g:text-color='data:textColor' es el color del texto.

También podemos la clase star-ratings que no tiene propiedades o bien colocarlas directamente.

<span class='star-ratings'>

por:

<span class='star-ratings'
style='display: block;
background-color: #343F4A;
margin: 30px 20px; padding: 10px;
text-align: center;'>