Cómo moderar los comentarios en blogger

Moderar comentarios es una opción ya implantada en blogger desde hace ya un tiempo. Últimamente he recibido varios comentarios de spam, así como muchos otros que no se dignan a leer las normas requeridas a la hora de dejar un comentario. Es por ese motivo que he decidido, como algunos ya habréis observado, moderar los comentarios en este blog.

Pues bien, te preguntarás ¿cómo se moderan los comentarios en un blog de blogspot? La respuesta es sencilla y en pocos pasos lo habremos logrado.

1) Ves a Configuración -> Comentarios. Baja un poco y te encontrarás con:

Selecciona la opción Siempre. Si lo deseas puedes añadir tu dirección de correo electrónico para que recibas una notificación cuando haya comentarios que moderar. Cuando esté listo, baja a pie de página y clica en Guardar configuración.

Vale, está muy explicado pero si no quiero recibir correos que me molesten cada dos por tres, ¿cómo me entero que hay comentarios para moderar? Fácil, cuando estés en el escritorio de cuenta de blogger podrás observar lo siguiente:

Te aparecerá un mensaje que dice: debe moderse X comentarios.

Todo listo. Feliz moderación.

Cómo poner emoticonos en tu blog de blogger

Si quieres añadir emoticonos para los comentarios de tu blog de blogspot debes hacer lo siguiente:

---

Nota: Actualmente hay en plantillas que no funciona por algún script o modificación en las plantillas. Estoy tratando de buscar una mejor opción. Lamento las molestias ocasionadas. De todas formas pruébalo porque en tu blog puede funcionar sin problemas.

---

1) Vamos a Diseño2) Edición de HTML -> Marcamos la casilla "expandir artilugios".
3) Buscamos el código </head> (tecleamos Ctrl + F para buscar más rápido)
4) Antes de </head> pegamos el siguiente código:

---

<!-- (Script Emoticones) -->
<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}

function addSmiley(){
  var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
  var d = document.getElementsByClassName(postBodyClass);
  for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/:-)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-S/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-P/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon2.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-[/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon3.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-D/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon4.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/}:-]/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon5.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/x*/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon6.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/;-D/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon7.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-|/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon8.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-}/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon9.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:*)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon10.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/:-(/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon11.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/;-)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon12.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/XD/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon13.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
    }

var d = document.getElementsByClassName('comment-body');
  for(var i=0;i<d.length;i++){
 d[i].innerHTML = d[i].innerHTML.replace(/:-)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-S/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon1.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-P/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon2.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-[/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon3.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-D/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon4.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/}:-]/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon5.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/x*/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon6.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/;-D/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon7.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-|/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon8.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:-}/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon9.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/:*)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon10.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/:-(/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon11.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/;-)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon12.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
      d[i].innerHTML = d[i].innerHTML.replace(/XD/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon13.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
    }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(addSmiley);
//]]>
</script>
<!-- (Fin Script Emoticones) -->

---

5) Ahora buscamos <p><data:blogCommentMessage/></p> y justo antes pegamos el siguiente código:



---

<!-- ini tabla emoticones -->
<table border='0' cellpadding='0' cellspacing='1'>
  <tr>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon1.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon2.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon3.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon4.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon5.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon6.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon7.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon8.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon9.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon10.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon11.gif' width='20'/></td>
    <td align='center' width='26'><img height='21' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon12.gif' width='20'/></td>
    <td align='center' width='26'><img height='20' src='http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon13.gif' width='20'/></td>
  </tr>
  <tr>
    <td align='center' width='26'>:-)</td>
    <td align='center' width='26'>:-S</td>
    <td align='center' width='26'>:-P</td>
    <td align='center' width='26'>:-[</td>
    <td align='center' width='26'>:-D</td>
    <td align='center' width='26'>}:-]</td>
    <td align='center' width='26'>X*</td>
    <td align='center' width='26'>;-D</td>
    <td align='center' width='26'>:-|</td>
    <td align='center' width='26'>:-}</td>
    <td align='center' width='26'>:*)</td>
    <td align='center' width='26'>:-(</td>
    <td align='center' width='26'>;-)</td>
    <td align='center' width='26'>XD</td>
  </tr>
</table>
<!-- fin tabla emoticones -->

---




Clicamos en vista previa y si todo está bien, guardamos la plantilla.


Gracias a trucosgeek.


Cómo poner el avatar de los comentaristas de tu blog de blogger

Si no sabes cómo poner el avatar (foto del perfil) de los comentaristas de tu blogspot debes seguir los pasos de la siguiente guía:

***Recuerda guardar una copia de tu plantilla antes de modificar nada***

1) Primero de todo, si tu plantilla es una plantilla original de blogger puedes activar los avatores de tus comentaristas en: Configuración -> Comentarios

2) Si tu plantilla está modificada deberás hacerlo de la siguiente manera: Vamos a Diseño -> Edición de HTML y buscamos el siguiente código (para agilizar la búsqueda tecleamos Ctrl + F):

---

<dl id='comments-block'>

---

Lo reemplazamos por este otro código:

---

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

---

3) Ahora buscamos <a expr:name='data:comment.anchorName'/> y lo reemplazamos por:

---

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

---

4) Ahora buscamos ]]></b:skin> y antes pegamos el siguiente código:

---

.avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
.avatar-image-container  img { border:none;}

---

Clicamos en vista previa y si todo está bien guardamos la plantilla. El resultado lo puedes ver en este mismo blog.


Gracias a bloggerplugins.

Cómo poner gadget de los comentaristas que más escriben en el blog

Si buscamos un gadget que nos permita mostrar quiénes son los que más comentan en nuestro blog deberemos hacer los siguientes pasos:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript
5) Pegamos el siguiente código:

---

<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 + "'";
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=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FNOMBRE_DE_TU_BLOG.blogspot.com&num=10&filter=Anonymous,Anonimo,Nombre_autor" type="text/javascript"></script>

---

Tan sólo debemos cambiar NOMBRE_DE_TU_BLOG por la dirección de tu blog. 10 hace referencia a la cantidad de los usuarios que más comentan. Nombre_autor debemos sustituirlo por tu nick de blogger/google (con esto lograremos excluirnos de la lista como autor del blog).

Y ya está todo listo.

Cómo poner artículos más populares (comentados) en blogger (I)

Para poder poner un gadget con las entradas con más comentarios de nuestros lectores bloggers deberemos hacer lo siguiente:


1) Vamos bloggerbuster
2) Bajamos y nos encontraremos con:

3) Rellenamos los datos requeridos y clicamos en el orden de la foto.
4)  Apareceremos en blogger en esta pantalla:

 5) Pulsamos en Añadir artilugio y aparecemos en Elementos de página. Colocamos el gadget donde queramos y ya hemos terminado.

---

CLIC AQUÍ PARA ALTERNATIVA A ESTE GADGET.

---

Numerar comentarios en tu blog de blogger

Si quieres que en tu blog salgan los comentarios numerados por orden como a continuación deberemos hacer lo siguiente:


1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "expandir artilugios"
4) Buscamos <dl id='comments-block'> (tecleamos Ctrl + F para buscar más rápido)
5) Sustituimos <dl id='comments-block'> por el siguiente código:

---

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>

---

6) Un poco más bajo nos encontraremos con:

---

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

---

Lo sustituimos por:

---

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='clear: both;'>

---

7) Por último, buscamos este código que estará un poco más abajo <data:commentPostedByMsg/>

8) Este último código lo sustituimos por:

---

<data:commentPostedByMsg/>
<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a rel='nofollow' expr:href='data:comment.url' title='Comment Link' style='text-decoration:none'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter);
</script>
</a>
</span>

---

9) Ya está todo listo. Clica en vista previa y si no hay ningún error. guarda la plantilla.

Cómo diferenciar el comentario del autor del blog

Si quieres que en tu blog se distingan los comentarios que tú haces (como en el mío) deberemos seguir una serie de pasos:


1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "expandir artilugios"
4) Buscamos <dl id='comments-block'> (tecleamos Ctrl + F para buscar más rápido).
5) Nos encontraremos algo así:


6) Debajo de </dt> pegaremos los códigos siguientes que he subrayado y en ese mismo orden:


El código es:

---

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

---

También deberemos añadir debajo de </dd> un </b:if> tal y como está colocado en la fotografía anterior.


8) Ahora buscamos ]]></b:skin>
9) Añadimos justo antes el siguiente código:

---

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background: #C4C4C4;
}

---

10) Si deseas modificar el color de fondo tan sólo debes cambiar background por el color que prefieras. En esta página tienes varios a elegir.


Gracias a gemablog.

Añadir gadget con los últimos comentarios y últimas entradas de tu blog de blogger blogspot

El gadget para ver los últimos comentarios que se han hecho en tu blog que nos ofrece el propio blogger es muy útil si tenemos muchos comentarios y entradas. De esta forma podemos llevar un mejor orden y claridad.

Para añadir estos gadgets debemos hacer lo siguiente:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) A la izquierda veremos que pone "Más gadgets"
5) Nos encontraremos ante esta pantalla:



Recent posts es el gadget que nos permitirá ver las últimas entradas de nuestro blog.
Recent comments es el gadget que nos permitirá ver los últimos comentarios de nuestro blog.
Podemos modificar las dimensiones del gadget con el valor "px".

---

También podemos optar por agregar nuestro propio FEED al blog para que muestre las últimas entradas de la siguiente forma:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget y buscamos el siguiente:



Nota: Ten en cuenta que debes haberte creado una cuenta en feeburner para aprovechar este servicio.


Este último gadget nos permitirá también poner las últimas entradas de nuestros blogs favoritos. Lo único que tendremos que hacer es añadir su FEED en lugar del nuestro. Podemos configurar cuántas entradas se mostrarán y ya estará todo listo para nuestro blog.