Mostrar estrellas de valoración en las entradas de tu blog
Algo admirado por muchos bloggers son las típicas estrellas de valoración que un gran número de sitios web poseen al final de sus artículos, vídeos o imágenes.
Es sin duda un artilugio muy atractivo que permite a los lectores de un espacio dar su opinión sobre el contenido publicado.
Hace tiempo publiqué una entrada en la que introducía un script proporcionado por el servicio Outbrain y con el que conseguíamos esto mismo. Desafortunadamente, las estrellitas tardaban algo en cargar e incluso mostraban publicidad ajena al blog.
Por ello he decidido hacer uso de JS Kit, un script cuya creación está en inglés y por tanto poco reconocido en los blogs de lengua latina o castellana. Además, pensé que mostrar el widget en inglés sería una desventaja para muchos por lo que traduje enteramente el script y obtuve un resultado como el que te muestro a continuación:
Busca la etiqueta <data:post.body/> en tu plantilla y justo debajo añade lo siguiente:
De esta forma, las estrellas aparecerán en todo momento al pie de tus artículos.
Si prefieres mostrar las estrellas justo debajo del título de tus posts, añade el código bajo esta otra línea:
Para hacer que únicamente se vean al abrir una entrada individualmente utiliza este otro código (en lugar del primero):
Ahora encuentra la etiqueta </body> y encima agrega este bloque:
Guarda la plantilla para terminar.
Es sin duda un artilugio muy atractivo que permite a los lectores de un espacio dar su opinión sobre el contenido publicado.
Hace tiempo publiqué una entrada en la que introducía un script proporcionado por el servicio Outbrain y con el que conseguíamos esto mismo. Desafortunadamente, las estrellitas tardaban algo en cargar e incluso mostraban publicidad ajena al blog.
Por ello he decidido hacer uso de JS Kit, un script cuya creación está en inglés y por tanto poco reconocido en los blogs de lengua latina o castellana. Además, pensé que mostrar el widget en inglés sería una desventaja para muchos por lo que traduje enteramente el script y obtuve un resultado como el que te muestro a continuación:
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta <data:post.body/> en tu plantilla y justo debajo añade lo siguiente:
<div style='float:left; margin-right:3px;'/>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
De esta forma, las estrellas aparecerán en todo momento al pie de tus artículos.
Si prefieres mostrar las estrellas justo debajo del título de tus posts, añade el código bajo esta otra línea:
<div class='post-header-line-1'/>
Para hacer que únicamente se vean al abrir una entrada individualmente utiliza este otro código (en lugar del primero):
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:3px;'/>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
</b:if>
Ahora encuentra la etiqueta </body> y encima agrega este bloque:
<div id='blEstrellasartic' style='padding-right: 6px;text-align: right;'><a href='http://goo.gl/VHSIZ'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCW57Dvm25BVflMw5mlj1_JD7fEaPpI9PjRSyKwyrZJWb8AOVaten9G4op69iq4EbP7WQAi-MtwrLY5r0klEcFgAW1Fo8CjkqQqiClr-pZgjduCmvbIACqq9rfya1BbpgWnXfxWp4yaysO/s320/blestrellas.png'/><script src='https://sites.google.com/site/scriptsbalcon/b/blestrellas%282%29.js'/></a></div>
Guarda la plantilla para terminar.
0 comentarios:
Publicar un comentario
¡Gracias por comentar!