15 de agosto de 2016

Tutorial {Valoración de Estrellas}

Hola Bloggeros, el tutorial de hoy trata de esa valoración de 0-5 estrellas que le damos a los libros reseñados, muchos crean sus imágenes y otros bueno prefieren ahorrarse todo ese lio. Bueno pues hoy les traigo dos formas de poner estas estrellitas :D.

Valoración de estrellas en las entradas del blog

Así se veria en su blog este diseño :D Bien ahora les explico como hacerlo.

Vamos a ir a PLANTILLA ↣ PERSONALIZAR ↣ AVANZADO ↣ AÑADIR CSS ↣ PEGAS EL CODIGO QUE TE DARÉ MÁS ABAJO ↣ DAS ENTER ↣ APLICAR AL BLOG/GUARDAR.

El código que vas a pegar es el siguiente:

/* 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/AVvXsEhy9UKytnRwOvD2bt715HbYE43SRqDS9B-crZ0HN778hwrh4-7cMcq9sFMjyC-wQwSADbQ9FndRANyzGIztP0efEa2RPcCq12Eq1z1fbc5wYflVQR9zGvz3AemwUD1ELIZm13NNN-sOaSo/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>
Ahora te explico lo que esta en rojito.
40 --> son 4 estrellas ahora bien si pones 45 seran 4.5 estrellas ¿Lo pillas?, bueno si no lo pillas...
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.



Y eso sería todo, ¿verdad que es sencillo?
Ya os enseño la otra manera y que es la que yo tengo ^^
NOTA: No en todas las plantillas lo coge por eso os traigo esta segunda opción.

Calificación con estrellas sólo con CSS

Así que empezaremos por un poquito de HTML básico: un contenedor con 5 links (uno por estrella), con el carácter unicode de la estrella (&#9733;). Además, añadiremos un noscript para que los usuarios que no tengan Javascipt:
Como ya os dije antes van a Plantilla - Personalizar - avanzado - Añadir CSS ... ¿lo recuerdan? bueno si no vallan un poco más arriba y lo veran

El codigo será el siguiente

.ec-stars-wrapper {
/* Espacio entre los inline-block (los hijos, los `a`) 
  http://ksesocss.blogspot.com/2012/03/display-inline-block-y-sus-empeno-en.html */
font-size: 0;
/* Podríamos quitarlo, 
pero de esta manera (siempre que no le demos padding), 
sólo aplicará la regla .ec-stars-wrapper:hover a cuando
también se esté haciendo hover a alguna estrella */
display: inline-block;
}
.ec-stars-wrapper a {
text-decoration: none;
display: inline-block;
/* Volver a dar tamaño al texto */
font-size: 32px;
font-size: 2rem;

color: #888;
}

.ec-stars-wrapper:hover a {
color: rgb(39, 130, 228);
}
/*
 * El selector de hijo, es necesario para aumentar la especifidad
 */
.ec-stars-wrapper > a:hover ~ a {
color: #888;
}

Del código de arriba solo se podrá cambiar el color, más sin embargo no se los recomiendo, debido a que las estrellas serán tipo texto pueden agrandarlas, achicarlas, cambiar el color con los formatos de texto, como si fuera una frase que os darás un color y tamaño diferente a todo el texto.

Bien ahora cuando acabes de redactar o donde quieras poner tus estrellas, antes de seguir escribiendo pegas lo siguiente en HTML
¿QUÉ COMO? ¿DONDE ES ESO DE HTML?
Bien arriba cuando escribes/redactas tus post-entrada dice REDACTAR/HTML como en dos botoncitos.
Te vas hasta el final, donde ya no hay más cogido abajo.


y pegas lo siguiente:

<div class="ec-stars-wrapper">
<a href="#" data-value="1" title="Votar con 1 estrellas">&#9733;</a>
<a href="#" data-value="2" title="Votar con 2 estrellas">&#9733;</a>
<a href="#" data-value="3" title="Votar con 3 estrellas">&#9733;</a>
<a href="#" data-value="4" title="Votar con 4 estrellas">&#9733;</a>
<a href="#" data-value="5" title="Votar con 5 estrellas">&#9733;</a>
</div>
<noscript>Necesitas tener habilitado javascript para poder votar</noscript>

Ahora bien, lo que esta en rosa son las estrellas si quereis 3 borras las ultimas 2 y asi sucesivamente.
La diferencia entre este y el otro diseño es que en este no podras poner medios ...(3.5, 4.5, 1.5) pero de igual manera es muy chulo.
Yo lo tengo debido a que no me agarro el código de las estrellas que explique primero.

ASÍ QUEDARÍAN NUESTRAS ESTRELLAS: os recuerdo que pueden centrarlas ponerlas a izquierda o derecha y hacerlas mas grandes con solo seleccionarlas y también cambiar el color.


Eso es todo amigos, espero y os haya servido de mucho

17 comentarios:

  1. Que genial, ya lo he probado y me funciono. Siempre quise saber como podia hacerlo. GRACIAAAAS! <3

    ResponderBorrar
    Respuestas
    1. ME ALEGRO DE QUE OS HALLA SERVIDO ^^
      GRACIAS POR EL COMENTARIO :*

      Borrar
  2. Es un tutorial muy bonito, lo estaré intentando,estuve buscando como hacerlo, pero no lo encontraba. ¡Muchas gracias!

    ResponderBorrar
  3. ¡Hola! La verdad que apenas vi el título del tutorial, no lo pensé mucho y entré para ver que tal :)
    Es muy útil para la mayoría de los blogs, sin necesidad de que sean literarios. Aparte de eso, ¡nos das dos opciones! Uff, ¡que genial!
    Yo por ahora no lo utilizaré porque tengo mis imágenes predeterminadas, pero quizá con el tiempo decida cambiar por esta hermosa idea que nos das
    ¡Un beso!

    ResponderBorrar
    Respuestas
    1. Antes también usaba imágenes personalizada, pero decide a buscar algo a esto pues se veía más sensual...
      ademas de que me da pereza estar creando imágenes por que me aburría del dibujito que ponía xD
      Espero y lo uses y te funcione :*

      Borrar
  4. ¡Hola! Me quedo por tu blog :)
    Me parece muy interesante eso que nos cuentas. En este caso yo ya tengo los míos desde hace tiempo pero me habría venido muy bien si lo tuviera cuando creé el blog. Un saludo :)

    ResponderBorrar
  5. Hoola!! Muchas gracias por hacer esta entrada, nunca sabia como se hacia y ayer te empece a seguir en el blog y vi esta entrada y lo acabo de probar en mi blog y me funciona.

    Muchas Gracias de verdad!! :)

    ResponderBorrar
  6. ¡Hola! La verdad es que se ve super sencillo, yo uso las llavecitas que no me costó nada ponerlas así que lo dejaré así pero este tuto me ha gustado mucho :D Un besito <3

    ResponderBorrar
    Respuestas
    1. Gracias!!
      Yo usaba imagenes antes también pero me daban bastante pereza

      Borrar
  7. Muchas gracias me ha servido *-*
    Espero la proxima ♥

    ResponderBorrar
  8. Muchas gracias por este tutorial ^^
    Me encantan estos tutoriales porque aun me falta mucho por aprender sobre personalizar mi blog y todo ese rollo jajaja

    Un beso y nos leemos.

    ResponderBorrar
    Respuestas
    1. Gracias!! espero y los tutoriales te estén sirviendo de algo <3

      Borrar

Hola!
El blog es tanto tuyo como mio, yo solo expreso mi opinión y hago ver los libros desde otra perspectiva <3.
Cualquier comentario que no sea ofensivo o SPAM masivo será bienvenido.
Un beso. Felices Lecturas.

Gaby. Con tecnología de Blogger.