JMiur [E]

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

28 comentarios:

Matius Lenin  

La tuve que incluir dentro de los artículos en vez de los comentarios por su tendencia a desplazar todo el contenido de las tag, la verdad que es muy cutre.

Tal vez sería mejor un sistema de una sola hilera de estrellas tipo Youtube.

Sobre el color de fondo, no he podido cambiarlo, solo me permite el color blanco del fondo de mi web. Tampoco veo la utilidad del texto.

Por lo menos lo están intentando.

Responder
Unknown  

A mi me ha ocurrido algo bastante extraño, no he tocado nada de la clase ni la función, pero el recuadro de las estrellas se me repite dos y hasta tres veces... ¿a que puede ser debido?

Un ejemplo:
http://ramenparados.blogspot.com/2008/06/nuevas-imgenes-de-dragon-ball-ds.html

Responder
JMiur  

Matius:
Me pasa lo mismo, los colores no parecen poder cambiarse aunque debería haber alguna forma, por ahora sólo recibo errores.

Estoy de acuerdo, sería mejor si sólo fuera una línea.

DAvid:
Lo veo pero realmente no sé que puede pasar porque como es un IFRAME no logro distinguir donde está el problema.

Yo, probaría repasando el código y, llegado el caso, lo eliminaría y volvería a colocarlo.

Responder
Anónimo  

Imagino que luego se podrá usar esto para saber que posts son los más populares o los que mejor rating tienen... ¿que pensáis?

Responder
JMiur  

Es para eso, justamente.

Responder
Anónimo  

Es posible "arreglar" lo de las dos líneas. Te cuento lo que he hecho:

La altura se la cambié a 15 y el ancho (como lo tengo alineado a la derecha) a 150. Termina viéndose aceptable y en una sola línea (aunque igual la 2da sigue allí xD); sería cuestion de moverse hacia abajo para verla.

Funciona como he querido en Firefox, pero en IE sale, como era de esperarse, un Scroll horroroso, así que opté por dejar la calificación por estrellitas sólo para los users de FF (después de todo se lo han ganado...?).

Responder
JMiur  

Jajajaja, la verdad, no lo he probado más allá de este post pero, como también es un IFRAME, los resultados que podamos obtener serán siempre limitados.

Realmente, podrían hacerlo de otra manera, como el buscador, por ejemplo.

Responder
Emilio Black  

No se porque no puedo implementarlo, quisas es porque no se añadir cosas a donde dice "Entradas del blog"

Responder
JMiur  

Simplemente haces click en el enlace que dice Editar y verás las opciones.

Responder
Dr. Page  

Hola Amigo a mi me sale doble también ya sabes como resolverlo, Saludos Dr Page

Responder
JMiur  

Tendría s que verificar que el código no esté repetido. En realidad, como es algo que sólo puede verse en la plantilla, no puedo responderte cuál es el problema.

Responder
Sergio Medina  

Hola la verdad es que este maldito gadget es muy dificil de entender, pero ya vere que puedo hacer, en otros temas tengo una duda sobre como hacer un formulario de comentarios tan genial como el tuyo en el que dejas las 3 opciones a disposicion del publico

Responder
JMiur  

Eso puedes verlo en esta entrada.

Responder
Unknown  

Hola, yo de vuelta :p , quería hacerte otra consulta más, si se puede.

Había metido este código (el de las estrellas) en mi blog, y me funcionaba perfecto, pero después de hacer algunas modificaciones me desaparecieron por completo, y no entiendo por qué :(, el código está perfecto... electronicthings-blog.blogspot.com es el blog del que te hablo. ¿Si sabes por qué pudieron haber dejado de aparecer me decís?, es que ya lo revisé todo como treinta veces y no hay caso, no sé que pasa :(

¡Gracias! :)

Responder
JMiur  

Si el código está, fíjate si está habilitada la opción, editando el elemento Blog en la primera ventana de Diseño.

Responder
Unknown  

También está habilitada la opción, por eso no entiendo que pasó :( ...

¿Tenes alguna idea? Es que al principio me funcionaba, después me dejó de funcionar... ¡Rarisimo! :(

Responder
JMiur  

En el código fuente del blog no se ve, eso es raro.

Responder
Unknown  

¿Pero por qué no se ve? :( Es que lo tengo ahí, no sé que pasa, pero es cierto, revisando no se ve...

No entiendo... ¿Lo pueden estar perjudicando los comentarios que uso para no olvidarme de las cosas? (eso que esta entre , pero igual los tengo bien cerrados :( )

¡Saludos y gracias por responder!

Responder
JMiur  

Es que es algo que no puede verse salvo en la plantilla misma.

Responder
Unknown  

¿Y si te mando en un blok de notas esa parte de la plantilla? Perdón por ser tan molesto, es decir, solo esa parte, porque la traté de poner acá pero no se puede porque el comentario me toma el código html.

Saludos, y muchísimas gracias :)

Responder
JMiur  

Si quieres, hazlo pero, no creo que sirva de mucho porque el código es universal, es el mismo que en todos los blogs ya que se trata de un elemento interni e Blogger mismo. Puedes comprobarlo si lo comparas con el de una plantilla mínima.

Responder
Unknown  

No sé que pasó xD, debe haber sido un error de Blogger, porque ahora las tengo lo más bien :s...

Cualquier cosa vuelvo, muchísimas gracias por todas tus respuestas y tuu paciencia. ¡Saludoos! ^^

Responder
NeSS...  

Una pregunta. ¿Sabes si hay alguna forma de hacer lo mismo pero con comentarios? O sea, veo en otros blogs, no sé si de Blogger o no, pero en cada comentario hay un +1 o -1, si el comentario esta bueno el que quiere le pone +1, y si no está bueno -1. ¿Si entiende?

Muchísimas gracias =)

¡Chau!

Responder
JMiur  

No, en Blogger no hay nada semejante.

Responder
Anónimo  

Saludos, JMiur... Hoy he añadido esta característica a mis entradas de Blogger. Resulta que, como a otros comentaristas, me salía dolbe: indagando como solventar ese error (lo que al final conseguí) hubo un momento en que los textos que por defecto salen en inglés ("loved it", "rating", etc.) me salieron en español... Pero no sé cómo lo hice, y cuando después quise volverlo a configurar así no fui capaz... ¿Tús sabrías explicarme cómo hacerlo? Mil gracias.

(Mi blog es http://huelepies.blogspot.com/, por si necesitas saberlo)

Responder
JMiur  

Desconozco si eso es posible; no veo que haya parámetros que puedan cambiarse.

Responder
Anónimo  

No me funciona este hack ya vi para empezar mi plantilla no trae la opcion calificar por estrellas solo por gestos por mas que agrego el codico en las partes que dices no me funciona ademas cabe hacer mencion que en el codigo de mi plantilla no existe la etiqueta

p class='post-footer-line post-footer-line-1'
Sino:
p div class='post-footer-line post-footer-line-1'

que es donde pongo el codigo antes mencionado pero no sale nada ni se abilita la opcion de estrellas alguna sugerencia.

JMiur  

No es un hack, era una opción de Blogger que creo que ya no existe.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR