Tutoriales Blogger #13: Calificaciones o Puntuaciones para Post

Calificación o Puntaciones Blogger

¡Que tal mundo!!
Como Un blog Literario muchos utilizamos sistemas de calificaciones ya sea con imágenes o Puntuaciones con iconos, en este caso les quiero mostrar este sistema muy sencillo y útil para nuestros blogs Literarios. 

Ejemplo:

Calificación:

Título: Un trono Oscuro
Autor: Kendare Blake
Editorial: Océano Gran Travesía
Páginas: 322
Género: Fantasía Juvenil

Sinopsis
Tras los inolvidables sucesos del Avivamiento y en pleno Año de Ascensión, la suerte está echada. Katharine, considerada la más débil de las hermanas, parece más fuerte que nunca. Arsione, después de descubrir la verdad sobre sus poderes secretos, necesita aprender cómo aprovecharlos sin que nadie se dé cuenta. Y Mirabella, la hermana elemental que ya todos creían la próxima Reina Coronada, recibe ataques que ponen en riesgo a quienes la rodean, sin que pueda hacer nada por evitarlos.

1.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(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;}

2. Y luego en tu entrada donde quieras mostrar la calificación agrega lo siguiente:

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>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Esto seria todo.Muchas Gracias por leer me, No olviden: comentar, seguir el blog y compartir!!Besitos¡¡Kc...
¿Te gusta lo que hago? Me ayudas

í