Pulgares de votación personalizables en Blogger

Hace varios meses atrás habíamos visto cómo añadir pulgares de votación tanto en las entradas como en los comentarios de Blogger. Gracias a PeliculasTube les enseñaré una sencilla forma de usar una imagen personalizada en los botones y además podremos redefinir el tamaño de los pulgares.

El tutorial:

Como la última vez que publiqué algo relacionado a este sistema no entendía mucho no le situé una buena localización a las secciones, por lo que haré los tutoriales nuevamente y esta vez será algo un poco mas elaborado.

Para instalar el script es necesario pegar el siguiente código antes de </body>:

<script charset='ISO-8859-1' src='http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Recursos%20del%20Blog/RATINGSTHUMBS2.js' type='text/javascript'/>

Añadiendo los pulgares de votación en las entradas:

El resultado será muy similar a este:

En ''Diseño | Edición HTML'' marcaremos la casilla ''Expandir plantillas de artilugios'', buscaremos el siguiente código:

<data:post.body/>

Arriba de este, pegaremos el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<div class="js-kit-rating" style='float:left;padding-left:4px;padding-bottom:6px; padding-right:0px;width:110px;height:90px;background: #fafafa;border:1px solid #f5f5f5;border-radius:2px;box-shadow:1px 1px 1px #969696;margin-top:-2px;' expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title" imagesize="36x36" imageurl="http://1.bp.blogspot.com/-xFcwIBhJovk/TmKMLaE0wUI/AAAAAAAABlk/PKf9pu-JInI/s1600/thumbsbloggergrandes.png" view="score">
</div>
</b:if>

Cambia el valor float:left, por float:right si quieres que se sitúe a la derecha.

Guarda los cambios y listo.

Añadiendo los pulgares de votación en los comentarios:

Para que los pulgares de votación queden a la derecha del nombre del comentarista, deberás buscar el siguiente código, recuerda que ninguna plantilla es igual a otra así que deberás buscar los códigos por cuenta propia:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<div id='thumbscomentarios' style='float:right;margin-left:10px;margin-right:10px;margin-top:-18px;'>
<div class='js-kit-rating' expr:path='data:comment.cmtBodyIdPostfix' expr:permalink='data:post.url' expr:title='data:post.title' imagesize='18x18' imageurl='http://2.bp.blogspot.com/-BGqiGTIcRk0/TmFVKNGH2rI/AAAAAAAABlA/Vvy-k9l7OSA/s1600/thumbsblogger.png' view='score'>
</div></div>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Deberás agregar el código destacado entre los códigos correspondientes, una vez realizado, guardas los cambios y listo.

Cómo usar una imagen personalizada:

Como es posible apreciar, en ambos casos destaqué 2 valores importantes para esta acción, el valor imageurl, permite utilizar una imagen externa, mientras que el valor imagesize, permite definir el tamaño de cada ícono.

Para entenderlo mejor, veremos un ejemplo para imágenes de tamaño de 18px:

La estructura de la imagen deberá ser de la siguiente forma:

En este caso la imagen es de un tamaño de 36x36px, cada imagen es de 18px.

La imagen deberá tener 4 sprites, y el tamaño que asignaremos corresponde al tamaño de cada ícono (No el de la imagen total). Hay que tener cuidado de no sobrepasar los píxeles de cada ícono para evitar problemas.