Valoración de estrellas en el blog por parte del autor

1 de abril de 2013 129 comentarios ,

La mayoría de los sistemas de valoración que conocemos son para que los usuarios califiquen una entrada, pero qué pasa si no queremos la calificación de los usuarios sino la propia. Por ejemplo, algunos blogs hacen reseñas de películas, de libros, aplicaciones, etc. y quieren calificar el "producto" del que hablan, pues es ahí cuando podemos usar un sistema de valoración de estrellas como el siguiente, para que el autor le ponga una calificación a su entrada, reseña, película, o lo que quiera calificar.

El resultado será algo como esto:

Calificación:


Este sistema de valoración lo haremos sólo con CSS apoyándonos de sprites, y tiene la característica de mostrar calificaciones fraccionadas, es decir, que podemos darle una o cinco estrellas, o una estrella y media, dos estrellas y media, etc.

Lo primero que haremos es entrar en Plantilla | Edición de HTML y pegar antes de ]]></b:skin> el CSS:
/* Estrellas de valoración
----------------------------------------------- */
.val-fieldset {
width:100px;
border:none;
font-weight:bold;
font-size:12px;
}
.valoracion {
width: 100px;
height: 21px;
display: block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZR-4aUyBA3w8ZsJI9HH9-RBq3Jixt3y6DbGxUTslmx8mj4ZN138cEvg0tJsLqL1HLsBvoS4oaupc42WrRkYs_0s4ZOPCpwHfvnoH7cnt8EtGYSbVhvXo4P51RnWmDXm51bnxPMNEz9I/s0/estrellas.png) 0 0 no-repeat;
}
.val-0 {background-position: -100px -0;}
.val-5 {background-position: -81px -21px;}
.val-10 {background-position: -81px 0;}
.val-15 {background-position: -61px -21px;}
.val-20 {background-position: -60px 0;}
.val-25 {background-position: -40px -21px;}
.val-30 {background-position: -40px 0;}
.val-35 {background-position: -21px -21px;}
.val-40 {background-position: -21px 0;}
.val-45 {background-position: 0 -21px;}
.val-50 {background-position: 0 0;}
Y luego en tu entrada donde quieras mostrar la calificación agrega lo siguiente:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-40"></span></fieldset>

Lo que está en rojo es la calificación que le darás, en este caso son 4 estrellas. Los valores son en múltiples de 5 donde 0 es ninguna estrella, 5 media estrella, 10 una estrella, 15 una estrella y media, 20 dos estrellas, etc. hasta el 50, que son cinco estrellas.


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-0"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-5"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-10"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-15"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-20"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-25"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-30"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-35"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-40"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-45"></span></fieldset>


Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-50"></span></fieldset>



Es un método bastante sencillo que le permitirá al autor calificar cualquier cosa. Hemos usado la etiqueta FIELDSET para acomodar el texto "Calificación" y las estrellas, por lo que puedes personalizar esas etiquetas si lo deseas.

Si lo que buscas es un sistema de valoración de estrellas donde sea el público quien califique, entonces tal vez quieras usar las propias estrellas de valoración que provee Blogger.


129 comentarios en:

" Valoración de estrellas en el blog por parte del autor "

  1. Esta bien...nada mas que no me convence jejeje
    Pero tenia Una duda pido Mil disculpas por salir del Tema pero quisiera saber....Que pag. me recomiendas para Comprar mi dominio?
    Name.com o Godaddy?
    Saludos Potro

    ResponderEliminar
  2. Mi blog es de reseñas, pero por el titulo yo lo califico en Besos. En fin, gracias por el tuto como siempre Potro ;)

    ResponderEliminar
  3. Parecido a esta entrada me gustaria algo como un contador que mostrara el numero de -clics-, que se hace de una determinada entrada cuando se accede a ella, para que se visualizara en cada entrada las veces que se ha leido. A ver si me puedes decir algo, o donde encontrara algo asi.Gracias

    ResponderEliminar
    Respuestas
    1. Busca en Pizcos, por ahí hay un contador de entradas.

      Eliminar
  4. Muchas gracias, lo tendre en cuenta!

    Salu2

    ResponderEliminar
  5. Hola Potro.
    Muy bueno e interesante, a ver si le encuentro hueco y lo coloco.
    ¿Se puede hacer de uso genérico?, quiero decir que automáticamente salga al final en todas las entradas, junto a los botones sociales, credenciales o con los comentarios.
    Gracias de antemano, un saludo.

    ResponderEliminar
    Respuestas
    1. Claro Tapestry Workerman, puedes ponerlo como plantilla de entrada para que aparezca siempre que crees un nuevo post.
      Configuración > Entradas y comentarios > Plantilla de las entradas.

      Eliminar
  6. Hola:
    En mi blog (http://nlohp.blogspot.com.es/), ¿sabes cómo puedo quitar ese espacio antes de "No hay comentarios"?

    ResponderEliminar
    Respuestas
    1. Hola Miguel, no veo nu espacio considerable, pero puedes reducirlo sólo un poquito si pones en 0 (cero) el margin que está dentro de .post-footer {

      Eliminar
    2. Pues no me funciona... De hecho, hace tiempo no puedo ni cambiar los colores en el Diseñador de Plantillas (se quedan como estaban).
      En su defecto, ¿puedo hacer que no salga lo de "No hay comentarios:", pero sin eliminar la opción de comentar?

      Y claro, si se pudiera hacer que funcionara el diseñador (igual algún código me lo impide o algo), genial.

      Eliminar
    3. De que funciona funciona, pero he aclarado antes que sólo se reduce un poquito. El resto de los espacios son los propios contenedores de las entradas.
      Si quieres ocultar ese enlace agrega esto:
      .post-comment-link {
      display:none;
      }

      Eliminar
    4. Gracias, me sirvió. Es que me gusta que las entradas estén lo más despejadas posible.

      Eliminar
  7. ¿Vale para implementar en vistas dinámicas?

    ResponderEliminar
  8. Excelente Potro, creo que en cualquier momento le doy uso. Andaba buscando algo así.

    ResponderEliminar
  9. hola potro disculpame por salir del tema pero hace mucho te queria hacer esta pregunta pasa que quiero poner entradas relacionadas en mi blog pero con las etiquetas ocultas y cada vez que oculto las etiquetas no me aparesen las entradas relacionadas y queria saver como le hago para poner entradas relacionadas con las etiquetas ocultas??? espero y me puedas ayudar este es mi blog makinario809 .info

    ResponderEliminar
    Respuestas
    1. Hola Julio, pon las entradas relacionadas, luego oculta las etiquetas con estos estilos:
      .post-labels {
      visibility:hidden;
      }

      Eliminar
  10. Hola Potro disculpa si el comentario te parece fuera de lugar, pero me quise pasar por aquí para darte las gracias de enseñarme muchas de las cosas que se hoy, espero y tu blog siga teniendo mucho éxito. Saldos

    ResponderEliminar
    Respuestas
    1. Muchas gracias Jesús, por el comentario y tu visita.
      Éxitos para ti también!

      Eliminar
  11. Hola, ¿cómo hago para que cuando cualquiera comparta mis entradas en el twitter al final del tuit diga "Vía @Skonek *(mi nombre de usuario)*, saludos, excelente blog.

    ResponderEliminar
    Respuestas
    1. Hola, al código de tu botón agrégale:
      data-via="usuario"

      Eliminar
    2. Hola otra vez, disculpa pero no se dónde poner ese código que me distes, ¿me podrías decir como hacerlo o dónde ponerlo?, saludos. (no soy muy bueno con éstos códigos.

      Eliminar
    3. Dentro de tu código de tu botón, o bien, consigue el botón con todos esos datos directo de la página de Twitter:
      https://twitter.com/about/resources/buttons#tweet

      Eliminar
  12. potro disculpa las molestias pero puse el estilo y no se ocultaron las etiquetas estas son las etiquetas que quiero ocultal http://img689.imageshack.us/img689/5331/potrox.jpg ciento mucho molestarte pasa que si dejo las etiquetas visible las otras paginas de mi competencia usaran las etiquetas como estratejia para ganar visitas al igual k yo espero y me ayudes me dices si te paso la plantilla para mas facil.

    ResponderEliminar
    Respuestas
    1. Hola Julio, las etiquetas no son indexables, así que con ellas o sin ellas no ganarás o perderás visitas.
      Ahora, lo que tú muestras en esa imagen no son las etiquetas sino el breadcrumb, si no quieres que sea visible elíminalo de tu plantilla según el tutorial que hayas seguido para ponerlo.

      Eliminar
  13. Buenísimo, tengo programada una renovación del layout de mi blog y esto me viene de perlas para mis reseñas.

    ResponderEliminar
  14. Hoal Potro como puedo ahcer para que no quede un espacio entre cada entrada es decir que todas las entradas sean como una sola y separarlas con un separador de entradas

    ResponderEliminar
    Respuestas
    1. Depende de cuál sea el blog donde lo quieres hacer.

      Eliminar
    2. es una plantilla picture window todavia no cree un blog queria hacer una pruba podrias hacer un post con eso?

      Eliminar
    3. es una plantilla de Picture Window y quiero crear unh blog solo hice blogs de pruebas para probar los diseños

      Eliminar
    4. Cambia esto:
      .post-outer {
      background-color: $(post.background.color);
      border: solid 1px $(post.border.color);

      -moz-border-radius: $(post.border.radius);
      -webkit-border-radius: $(post.border.radius);
      border-radius: $(post.border.radius);
      -goog-ms-border-radius: $(post.border.radius);

      padding: 15px 20px;
      margin: 0 $(post.margin.sides) 20px;
      }


      Por esto:

      .post-outer {
      background-color: #ffffff;
      border-radius: 5px;
      padding: 15px 20px;
      margin: 0 -20px -2px;
      border: 0px;
      }

      Eliminar
  15. Interesante aporte Gracias potro :)

    ResponderEliminar
  16. Hace tiempo que venia buscando algo así, me viene perfecto para una plantilla de curriculum en la que estoy trabajando, tengo una duda como hago para ponerlo todo en una sola linea así:

    aqui leyenda aqui estrellitas

    ResponderEliminar
    Respuestas
    1. Hola Carlos, si quieres que quede en una sola línea usa el código de esta forma:

      Calificación: <span class="valoracion val-40"></span>

      Eliminar
    2. Hola,
      Antes de nada, gracias por esta entrada, y ahora... la duda: no consigo que quede en una sola línea ¿a qué se puede deber? (creo que no hace falta que diga que puse el cdigo que señalaste anteriormente)
      Muchas gracias!!
      (PD. por si acaso, mi blog es: de-libro-a-libro.blogspot.com)

      Eliminar
    3. Pues no lo veo puesto en tu blog...

      Eliminar
    4. Qué raro... bueno, es que sólo lo tengo en esta entrada (http://de-libro-a-libro.blogspot.com.es/2013/11/juegos-de-la-edad-tardia-de-luis-landero.html) llevo muy poquito con el blog y tofavía estoy en pruebas...
      Muchas gracias!!!

      Eliminar
    5. Debajo de .valoracion { agrega:
      float:left;

      Luego usa el código de esta manera:
      <span style='float:left'>Calificación:</span> <span class="valoracion val-40"></span>

      Eliminar
    6. Muchísimas gracias!!! lo probaré esta noche a ver si me funciona ;)

      Eliminar
    7. Buenas noches Potro, perdona que te moleste de nuevo, pero no me funciona, aora me sale superpuesto una cosa encima de la otra (te mando el enlace de donde he hecho la prueba: http://de-libro-a-libro.blogspot.com.es/2013/11/juegos-de-la-edad-tardia-de-luis-landero.html)
      Muchísimas gracias

      Eliminar
    8. Es que en los estilos dejaste la palabra "agrega:"

      Eliminar
    9. Qué lapsus, jajajaja. Muchas gracias!!

      Eliminar
  17. Y otra cosa, ¿puedo poner la barra de búsqueda al lado del título del blog, para que no ocupe espacio en la barra lateral derecha?

    ResponderEliminar
    Respuestas
    1. Tendrías que dividir la cabecera y ahí poner el buscador o el gadget que quieras:
      http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html

      Eliminar
  18. Me parece excelente y muy funcional, hace tiempo buscaba algo así pero siempre venían con una insignia de otra web y eso es molesto, gracias

    ResponderEliminar
  19. Quiúbole potro, me encontré esta página, tal vez te sirva: http://www.dreamtemplate.com/dreamcodes/documentation/index.html Un abrazo.

    ResponderEliminar
    Respuestas
    1. Uh, muchas gracias, estoy seguro de que me servirá :)

      Eliminar
    2. No, gracias a ti porque mi blog está "lleno" de tus trucos. Buen día.

      Eliminar
  20. Hola, Potro excelente entrada, pero queria saber como poner la puntuación en el centro no en la izquierda :)

    ResponderEliminar
    Respuestas
    1. Hola Joan Lirio, debajo de .val-fieldset { agrega esto:
      margin:0 auto;

      Eliminar
  21. Potro, ¿cómo puedo hacer más pequeño y fino el cuadro de comentarios?

    O mejor aún, ¿cómo pongo el cuadro de comentarios como en este blog?
    http://lenguaslenguas.wordpress.com/2013/04/04/a-veces-esta-bien-no-hablar-otras-lenguas/

    ResponderEliminar
    Respuestas
    1. Hola Miguel, ese blog es de WordPress y su sistema de comentarios es distinto. Aquí hay unos tips para modificarla un poco, aunque no mucho se puede:
      http://www.oloblogger.com/2009/08/blogger-modificar-el-formulario-de.html

      Eliminar
  22. Hola amigo potro
    perdon que me haya salido del tema
    pero trate de poner lo de post interesante pero no aparece lo puse lo vi una vez o dos y ahora no aparece
    y tambies puse lo de las flechas y tampoco nada
    espero me ayudes!!!
    saludos

    ResponderEliminar
  23. Hola amigo potro
    perdon que me haya salido del tema
    pero trate de poner lo de post interesante pero no aparece lo puse lo vi una vez o dos y ahora no aparece
    y tambies puse lo de las flechas y tampoco nada
    espero me ayudes!!!
    saludos

    ResponderEliminar
    Respuestas
    1. Hola, deja un comentario en cada una de las entradas donde tienes el problema dejando los mayores datos posibles de tu problema, incluyendo el nombre de tu blog.
      Saludos.

      Eliminar
  24. Ya logré ponerlo! Muchas gracias, sólo un detalle... las entradas que no son del mismo día se separan, a pesar de haber puesto el float:left;
    Siento las muchas preguntas >.<

    ResponderEliminar
    Respuestas
    1. Hola no he comprendido a qué te refieres ya que esta entrada es sobre las estrellas de valoración, tampoco veo otro comentario tuyo en este post que haga referencia a un tema distinto.

      Eliminar
  25. Te he dejado un premio mencion en mi blog, saludos cariñosos
    http://www-en-rhed-ando.blogspot.com/2013/04/reconocimiento-enrhedando.html

    ResponderEliminar
  26. Hermano no se sale... hago los pasos con todo y cuando le doy publicar me sale un cuadro pero sin las estrellas... ¿Qué pasará? ¿me puedes ayudar?
    me sale un cuadro más o menos así
    _________________________________________________________________
    Calificación:
    _________________________________________________________________
    sin estrellas ni nada
    gracias por la ayuda.

    ResponderEliminar
    Respuestas
    1. Hola, ¿me muestras dónde lo has puesto? es que sin ver no puedo saber qué y porqué sucede.

      Eliminar
    2. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
    3. Es porque más arriba tienes este código:

      #search-box {
      margin-top: 3px;
      border:0px;
      background: transparent;
      text-align:center;
      .status-msg-wrap {visibility:hidden;display:none;}
      .status-msg-wrap {visibility:hidden;display:none;}


      Si te fijas verás que el #search-box no tiene llave de cierre, eso hace que todo lo que pongas debajo no funcione:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Pd. Elimino el comentario por el aviso que está al final.

      Eliminar
    4. ¿que debo hacer? gracias por la ayuda.

      Eliminar
    5. Lee la entrada que te di, por eso te he puesto el enlace ;)

      Eliminar
  27. Loco... GENIO SOS... GRANDE. JAJAJAJ en Twitter estoy como @UnTipicoTipito sería un honor que se diera una vueltica por mi TL

    ResponderEliminar
  28. Esto sirve para que aparezcan las estrellas en los resultados de Google?

    ResponderEliminar
  29. Potro fuera de tema, no puedes hacer un tutorial que diga como publicar entradas pero en determinad pagina!! No se si me explique, es decir poner entradas pero que no aparezcan en la pagina "principal"...

    ResponderEliminar
    Respuestas
    1. No se puede Jorge, esa es la función de las páginas, no de las entradas.

      Eliminar
  30. hay alguna manera de poner un widget a la derecha del blog con las entradas de 5 estrellas 4 , 3, 2 etc etc y que cuando clickees en ...por ejemplo. el enlace de "Todas las entradas con 5 estrellas" aparezcan todas las entradas que ha hecho el autor con valoración de 5 estrellas

    PD: me a servido para mi blog de peliculas es de gran utilidad este post te lo agradezco potro.

    ResponderEliminar
    Respuestas
    1. De forma automática no, no sé cómo se pueda hacer :(

      Eliminar
  31. Aloha! Que pasa si quiero usar este sistema de valoración pero no quiero estrellas, sino cualquier otra imágen. Cómo lo hago? Simplemente debo cambiar el link http://lh5.googleusercontent.com/-Sp-iHFztZdc/UVD89O9oM1I/AAAAAAAAEU0/Xh-FBDaWyJY/s000/estrellas.png por otro?

    ResponderEliminar
    Respuestas
    1. Sí, pero asegúrate que cada imagen sea del mismo tamaño de cada estrella, que todo esté justo en el mismo lugar y tamaño para que no tengas que batallar con las distancias.

      Eliminar
  32. hola potro aqui estoy de nuevo con una duda,por favor respondeme ,mira tengo varios usuarios que segun mis estadisticas dicen ser de francia y entran desde este link,no entiendo que es eso me lo pudieras explicar,el link es este:

    http://localhost:4445/selenium-server/core/Blank.html

    ResponderEliminar
  33. Hola potro,algunos usuarios que entran a mi web son de francia y segun mis estadsticas"todos son de Colombes, Ile-de-France, France " en su gran mayoria lo hacen desde este link,ese link no se de que es,me pudieras decir que significa

    http://localhost:4445/selenium-server/core/Blank.html

    ResponderEliminar
  34. Muy buena, Potro, hacía tiempo que buscaba algo así :D
    Pero cuando lo pongo en la plantilla como está ahí, las estrellas no me salen, solo el cuadro con "Calificación" =(
    Y, además ¿se podrían cambiar las estrellas por otra imagen? Porque en ambos casos me sale el cuadro en blanco xDDD
    Gracias de antemano =)

    ResponderEliminar
  35. Hola Potro! Muchas gracias por la entrada!

    Quería hacer una consulta relacionada con este tema de valoración de entradas.

    Estoy intentando de configurar el sistema clásico, donde se puede poner valoración sobre palabras como "¿Qué te pareció la entrada?: Interesante, guay, etc", pero cuando guardo los cambios, no aparece nada y no tengo idea de cuál podría ser el problema :(

    Agradecería mucho un poco de ayuda
    saludos!

    ResponderEliminar
    Respuestas
    1. Hola, mira el comentario #164.1 del enlace que está al final de la entrada.

      Eliminar
  36. No me gusto, yo queria que otros usuarios califiquen.

    ResponderEliminar
  37. QUIERO QUE ME AYUDES CON UN BLOOGER XXX MEN TIENES SKYPE ES UN PROYECTO PARA GANAR $$$$$$$$$$$$$$$$$$ QUE DICES POTRO SOCIO.. ENVÍAME UN MP

    ResponderEliminar
    Respuestas
    1. Hola cristiano, no tengo SKYPE, pero dime en qué puedo ayudarte.

      Eliminar
  38. tu dices: "Lo primero que haremos es entrar en Plantilla | Edición de HTML y pegar antes de ]]> el CSS"

    No puedo encontrar eso de ]]> NO LO ENCUENTRO!! ayudame mi blog es un desastre!! http://memobosque.blogspot.mx/ como pongo las malditas estrellas!!

    ResponderEliminar
    Respuestas
    1. Hola Guillermo, en el nuevo editor HTML esa parte la encuentras dando click en la flechita que está junto a <b:skin>...</b:skin>

      Saludos!

      Eliminar
  39. Muchas gracias Potro, ha quedado genial en mi blog de Críticas de libros. :D

    ResponderEliminar
  40. oie Querido Potro, no habra algun gadget o algo para que solo pongas esto de la valoracion para que se algo asi como automatico, o sea... solo pongas el numero de estrellas que quieres poner en la entrada, es que lo quiero poner para las reseñas que hacemos en el blog...

    ResponderEliminar
    Respuestas
    1. Sí, mira el comentario #5.1, ahí verás cómo ponerlo una sola vez y que a partir de ahí siempre te aparezca en una nueva entrada.

      Eliminar
  41. No me aclaro para buscar en la nueva plantilla. Probé ctrl+f puse ]]> pero e sale 0 ¿qué hago?

    GRACIAS de antemano

    ResponderEliminar
    Respuestas
    1. Primero da click en cualquier parte dentro de los códigos, luego presiona esas teclas para acitvar el buscador del editor, ya que el buscador del navegador no será capaz de encontrar nada.

      Eliminar
  42. Hola. Me gustaría saber como hacer ahora para poder filtrar las entradas según la clasificación que les otorgo. Es decir, mirar por ejemplo todas las que tienen 4 estrellas.
    Gracias

    ResponderEliminar
    Respuestas
    1. Añádele una etiqueta a cada entrada, por ejemplo, que la etiqueta sea "5 estrellas", luego en un menú enlaza tu pestaña con la página de la etiqueta:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  43. Hola, he hecho lo que has explicado pero no me sale.
    Solo me sale un recuadro con la palabra calificación y no me salen las estrellitas que he hecho mal? responde me plis!!y ármate de paciencia conmigo que soy nueva en estos lares.
    gracias

    ResponderEliminar
    Respuestas
    1. No te preocupes que paciencia hay mucha ;)
      Puede ser que no hayas puesto el primer código, o que al ponerlo se haya cometido un error, necesitaría ver la entrada donde lo has colocado.

      Eliminar
  44. Saludos Potro Es un Placer; Queria hacerte una pregunta..! quisiera, poner que mis entradas se vean en cuadros porque mira mi blogs, www.kemilgraph.blogspot.com

    entonces quisiera que mis diseños, sean en publicacioenes pero en Que sea en cuadro ejemplo mira esta imagen: http://es.tinypic.com/view.php?pic=6sru4w&s=8

    Que las entradas esten en esa organizacion si se puede por favor respondeme gracias

    ResponderEliminar
    Respuestas
    1. Hola KemilGraphz, hay plantillas tipo magazine que ya tienen esa distribución de las entradas, o bien, puedes hacerla tú mismo:
      http://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-3.html

      Saludos.

      Eliminar
  45. Hola Potro, me animo a escribirte porque veo que a todos respondes, no se si me salgo del tema pero me gustaria escribieras algo sobre poner un contador de veces leido un post. No se si me explico, que en cada Post haya algo que diga como 45 Veces Leído, me he matado buscando algo asi y no he encontrado, ojala me puedas ayudar. Saludos amigo

    ResponderEliminar
    Respuestas
    1. Hola Luisa, hay un post sobre ello (en la categoría "Contadores") pero ya no funciona más, aunque seguro que en la red encontrarás alguna opción que aun sea vigente.
      ¡Saludos!

      Eliminar
  46. MUY BUENA Y COMO SE PUEDEN PONER PARA QUE LO CALIFIQUEN LOS VISITANTES

    ResponderEliminar
    Respuestas
    1. Hay una opción que incluye Blogger, aunque falla de vez en cuando:
      http://ciudadblogger.com/2009/03/permite-que-califiquen-tus-entradas.html

      Eliminar
  47. Hola! te agradecería muchísimo si me explicaras como hacer esto de la valoracion por parte del autor pero no con estrellas si no con cualquier cosa por ejemplo con besos, libros, gatos... lo que sea

    ResponderEliminar
    Respuestas
    1. Hola Ana, sólo tienes que cambiar esta URL:
      http://lh5.googleusercontent.com/-Sp-iHFztZdc/UVD89O9oM1I/AAAAAAAAEU0/Xh-FBDaWyJY/s000/estrellas.png

      Por otra que contenga las imágenes que quieras, pero cada beso, libro, o lo que quieras deberá ser del mismo tamaño que cada estrella.

      Eliminar
  48. Hola a mi no me funciono, coloque el css antes de ]]> y coloque el otro código en una entrada de mi blogger y aparece es un recuadro que dice calificación: pero no aparecen las estrellitas, te agradecería mucho si me ayudas a que aparezcan las estrellitas en mi blog.

    ResponderEliminar
    Respuestas
    1. Hola, no mencionas la entrada donde lo has probado, pero puede ser que al poner los estilos hayas eliminado una llave de cierre } por equivocación:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  49. El codigo que dice fieldset donde lo ubico, no me dicen en que parte exacta de la entrada lo ubico. Tambien hay que colocar el resto de codigo.

    ResponderEliminar
    Respuestas
    1. El código lo colocas en cualquier parte de la entrada, donde a ti mejor te parezca, o donde lo quieras mostrar, ya sea al inicio o al final.
      Sólo colocas uno de los últimos códigos, los demás los he puesto para que vean cómo luce cada calificación.

      Eliminar
  50. potro como hago esto mismo pero no yo sino que la gente lo vote, porque los widgets y gadgets que hay de valoracion no me funcionan, pero esta que hiciste si me funciono

    ResponderEliminar
    Respuestas
    1. Usa el que menciono al final de la entrada, o el de algún servicio externo.

      Eliminar
    2. voy a intentar con el de blogger, gracias potro tu web esta de lujo!!!

      Eliminar
  51. Me encantan muchos de tus consejos, pero yo soy muy torpe para esto de los códigos de las plantillas y pocas veces o nunca encuentro los pasos que indicas, así que siempre me quedo con las ganas...
    Aunque también creo que te explicas solo para los que entienden estos términos y a los torpes nos dejas en blanco....
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola, si tuvieras problemas para implementar algo de este blog deja la consulta en la entrada que corresponde así como el nombre del blog donde lo has puesto, de ser posible deja los mayores datos posibles para así saber cómo poder ayudarte. Saludos.

      Eliminar
  52. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  53. Hola, yo la estoy usando y me encanta, pero cuando lo pongo en versión móvil las estrellas no aparecen, que puedo hacer para que en versión móvil también se vean? gracias

    ResponderEliminar
    Respuestas
    1. Hola Ainara, el problema con las plantillas predeterminadas para móviles es que ignoran todos los estilos que agreguemos. Tendrías que usar la versión "personalizada" o no usar una plantilla para móviles para que entonces estos estilos puedan leerse y ejecutarse.

      Eliminar
  54. este sistema serviria tambien por ejemplo para puntuar fotos en una pagina estatica?

    ResponderEliminar
  55. este sistema serviria tambien por ejemplo para puntuar fotos en una pagina estatica?

    ResponderEliminar
  56. esas estrellas pueden ser mas grandes???

    ResponderEliminar
  57. hola no me funciono por alguna razón y lo del paso de pegarlo en la entrada para que aparezca lo hago y no pasa nada

    ResponderEliminar
  58. Hola Potro, esto: ]]> dónde aparece? tengo que pegar todo como está?

    /* Estrellas de valoración
    ----------------------------------------------- */
    .val-fieldset {
    width:100px;
    border:none;
    font-weight:bold;
    font-size:12px;
    }
    .valoracion {
    width: 100px;
    height: 21px;
    display: block;
    background:url(http://lh5.googleusercontent.com/-Sp-iHFztZdc/UVD89O9oM1I/AAAAAAAAEU0/Xh-FBDaWyJY/s000/estrellas.png) 0 0 no-repeat;
    }
    .val-0 {background-position: -100px -0;}
    .val-5 {background-position: -81px -21px;}
    .val-10 {background-position: -81px 0;}
    .val-15 {background-position: -61px -21px;}
    .val-20 {background-position: -60px 0;}
    .val-25 {background-position: -40px -21px;}
    .val-30 {background-position: -40px 0;}
    .val-35 {background-position: -21px -21px;}
    .val-40 {background-position: -21px 0;}
    .val-45 {background-position: 0 -21px;}
    .val-50 {background-position: 0 0;}

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. pegalo en el archivo html de tu plantilla para poner el buscador da un clic sobre cualquier espacio dentro del archivo html y luego pulsas ctrl+f y hay pegas ]]> de hay en fuera sigue todos los pasos y la calificacion que quieras poner cuando estes en la entrada seleciona de igual manera el archivo html de tu entrada y pega el codigo y listo

      Eliminar
  59. ya pude ya vi donde estaba mi error mil gracias como quiera si sirvió solo es cuestión de seguir los pasos al pie de la letra :)

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger