Top De Comentaristas En Blogger

En esta ocasión les traigo un gadget que muestra el nombre de los que más comentan en el blog y que he encontrado en Blogger Widgets. La diferencia con el anterior es que el enlace del nombre de cada comentarista lleva directamente a su perfil de Blogger o a su blog en el caso de que haya comentado con su url.

Tienes que añadir el código en un gadget HTML-Javascript y cambiar donde dice trucosblogg por el nombre de tu blog. El gadget muestra los 10 comentaristas más activos, si quieres mostrar más o menos, cambia donde dice &num=10 por el número que necesites. Para que tu nombre no aparezca en la lista, lo colocas (tal como lo use en el blog) sustituyendo al mio (everth21) en el código.

Si además quieres filtrar el nombre de algún otro comentarista, coloca sus nombre a continuación del tuyo separados cada uno por una coma.

Hay que tener en cuenta que la carga de las Pipes no es demasiado rápida, por lo que es conveniente ser prudente con el número de comentaristas a mostrar en la lista. Es también recomendable no usar el gadget en la parte superior de la sidebar, ya que si demora en cargar podría interrumpir la carga de esta.

• Top comentaristas basado en los últimos 500 comentarios del blog.
  

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2Ftrucosblogg.blogspot.com&num=10&filter=everth21" type="text/javascript"></script>

• Top comentaristas basado en los últimos 5000 comentarios del blog.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Ftrucosblogg.blogspot.com&num=10&filter=everth21" type="text/javascript"></script>

• Sustituir la numeración de la lista por un icono.

Una vez colocado el gadget, su aspecto será como cualquier lista numerada pero podemos fácilmente sustituir los números de la lista por un icono.

[1] Editamos el gadget donde hemos incluido el código para mostrar el Top de comentaristas, colocando todo el código en un <div>, es decir, ponemos
<div id="topcoment"> al comienzo del código y </div> al final.
Sustituimos en el código las etiquetas <ol> y </ol> por <ul> y </ul> respectivamente y guardamos los cambios en el gadget.

[2] Iremos entonces a "Edición HTML" de nuestro panel y en el CSS de la plantilla (antes de ]]></b:skin>) colocamos este código:

#topcoment li{
padding-left: 30px;
background: url(URL_DEL_ICONO) no-repeat top left;
}

Firma En Los Comentarios Del Autor

En una entrada anterior vimos como destacar los comentarios del autor del blog, dándoles un diseño distinto a los demás comentarios.

Usando este mismo sistema, voy a explicar como añadir una imagen como firma en los comentarios del autor del blog.

[1] En primer lugar incluimos las modificaciones en la plantilla que se explican en esa entrada si no lo hemos hecho anteriormente.

[2] Una vez tengamos incluidos todos los cambios para distinguir nuestros comentarios del resto, añadimos la llamada a la imagen en el mismo código que habíamos colocado:

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/><img class='firma' src='url_de_la_imagen_firma'/></p>
</dd>
<b:else/>

Como podéis ver, le hemos dado una clase (class) a la imagen (en el ejemplo "firma") aunque podéis poner cualquier nombre.

[3] Colocamos ahora en el CSS de la plantilla (antes de ]]></b:skin>) el código necesario para controlar la posición de la firma dentro del cuerpo del comentario:

.firma {
display:block;
width: 45px;
height: 28px;
}

En width: pondremos el ancho que tiene nuestra imagen y en height: el alto.

El resultado será entonces algo así:

Firma comentario

Para controlar la posición de la firma, añadimos una nueva instrucción en el mismo código anterior:

.firma {
display:block;
width: 45px;
height: 28px;
padding-left: 90%;
}

Tendremos que variar el porcentaje (90% en el ejemplo) según la posición que queramos conseguir para la imagen.

Destacar Los Comentarios Del Autor Del Blog

Aplicando una líneas de código en nuestra plantilla podemos conseguir que cuando nosotros mismo hagamos un comentario en nuestro blog, este se distinga del de nuestras visitas. Creo que es un "truco" muy útil, sobre todo cuando tenemos bastantes comentarios, así de un solo vistazo nos daremos cuenta donde hemos respondido.

De la misma manera cuando un visitante ha dejado un comentario y vuelve a comprobar si le hemos respondido le será más fácil y rápido comprobarlo. :-)

Empezamos!

Paso [1] Vamos a la parte de edición - HTML de la plantilla y expandimos los artilugios. Buscamos la parte del código que corresponde al bloque de comentarios y añadimos la parte que está en negrita:

<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>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<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>

</b:if>

<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>

Paso [2] Hecho esto subimos hacia arriba de la plantilla, a la parte del CSS y buscamos la zona de comentarios, en las plantillas Mínima, por ejemplo, veremos algo así:

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Paso [3] Si la plantilla es la Rounders, por ejemplo, será algo como esto lo que hemos de encontrar:

   .comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}

En las demás plantillas será algo más o menos parecido, en realidad no tiene demasiada importancia el lugar, pero mejor que este más o menos por esa zona para evitar problemas de localización del código cuando lo necesitemos.

Paso [4] Una vez situados en la zona del CSS de comentarios, añadimos debajo del código de los ejemplos anteriores este otro:

  .blog-author-comment {
 margin:.25em 0 0;
 }
 .blog-author-comment p {
 margin:0 0 .75em;
 padding:5px 10px;
 border:1px dotted #254117;
 background:#C3FDB8;
 }

Esto hará que cuando dejemos el comentario en nuestro blog, este se distinga de los demás:

En estas líneas del código podemos hacer los cambios de color del fondo, grosor y color del borde:

border:1px dotted #254117;
background:#C3FDB8;

Como Poner Emoticones En Comentarios De Blogger

Aquí les traigo un script que permite introducir emoticonos en los comentarios de blogger. Antes de nada quiero comentarles que para que el script funcione correctamente, deberemos tener los comentarios incrustados en el post.

¿Cómo funciona?

Se trata de un script que recibe todo el texto de nuestro comentario, busca una serie de caracteres y lo sustituye por la imágen que está asignada. También añadiremos una leyenda en la parte superior justo antes de la caja donde escribiremos el comentario, para que nuestros visitantes sepan en todo momento coo poner el emoticon que deseen.

¿Cómo añadirlo en nuestro blog?

Lo primero que debemos hacer es añadir justo antes de la etiqueta </body> el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://agudovk.googlepages.com/Emoticonos.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

De está manera hemos añadimos el script que sustituira los caracteres por emoticonos. El siguiente paso será colocar la leyenda, para ello buscamos la etiqueta <iframe allowtransparency='true' y justo encima pegamos el siguiente código html:

<table width='400px'>
<tr>
<td colspan='10'>Emoticonos en blogger</td>
<td colspan='3'><a href='http://ayudaparamiweb.com'><img src='http://agudovk.googlepages.com/ayudaweb.png' style='border:0;'/></a></td>
</tr>
<tr>
<td><img src='http://agudovk.googlepages.com/com-smile.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-cry.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-tongue.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-lol.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-oops.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-blink.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-neutral.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-secreto.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa1.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa2.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-mad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-confuso.gif'/></td>
</tr>
<tr>
<td>:)</td>
<td>:'(</td>
<td>:(</td>
<td>:P</td>
<td>:D</td>
<td>:$</td>
<td>;)</td>
<td>:-I</td>
<td>:-X</td>
<td>:o</td>
<td>:O</td>
<td>O</td>
<td>:/</td>
</tr>
</table>

Pues ya está, a partir de ahora vuestros comentarios disfrutarán de graciosos emoticones que animarán un poco más vuestro blog.

Mostrar los últimos comentarios y los últimos artículos en la sidebar

Este “truco” se basa en usar la dirección sindicación de comentarios y los artículos que todos los blogs de Blogger tienen. Estas direcciones son:

Para comentarios: http://tublog.blogspot.com/feeds/comments/default
Para artículos: http://tublog.blogspot.com/posts/comments/default

Donde tublog.blogspot.com es la dirección de tu blog.

Ahora solo hay que ir a Diseño/Elementos de página y dar clic en Añadir un gadget, en la ventana que se abre se selecciona un gadget de Feed y se escribe la dirección de comentarios para mostrar los últimos comentarios, se repite el proceso para crear un nuevo gadget de feed pero esta vez usando la dirección de los artículos.