Mostrando entradas con la etiqueta Comentarios. Mostrar todas las entradas
Mostrando entradas con la etiqueta Comentarios. Mostrar todas las entradas

Avatares redondeados en los comentarios

2
Algunos usuarios me han preguntado cómo añado los avatares de los comentarios del blog en forma de círculo y cómo también se muestra un avatar para el usuario anónimo que comenta.

En esta oportunidad les compartiré el mismo estilo que utilizo yo en los avatares.
El resultado es muy similar a este:

Destacar comentarios del autor

0
con tantos cambios automáticos por parte de Blogger en las plantillas, aquel primer post ha quedado desfasado y lo explicado allí no sirve actualmente.

El cambio es muy sencillo y nos permite dar un estilo distinto a los comentarios del autor de un post. Si hay varios editores, en cada entrada sólo se destacarán aquellos que correspondan al autor de esa entrada concreta.

Añadir pulgares en los comentarios

0
En este tutorial enseñaré a colocar pulgares a los comentarios...


¡Manos a la obra!

Primero, vamos a ''Diseño | Edición HTML'', en donde marcaremos ''Expandir plantillas de artilugios''.

Cómo diferenciar el comentario del autor

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



Enumerar los comentarios

0
En este post te mostrare como hacer para enumerar los comentarios de Blogger, es decir, ponerle el numero del comentario en la parte superior derecha de cada comentario asi como aparece en la imagen

Agregar opción responder a los comentarios

0
Este truco es muy util, lo que hace es agregar un link que dice [Responder] a cada comentario de tu blog, al hacer click en "Responder" automaticamente se escribira un codigo en el formulario de comentarios con el link del usuario al que le quieres responder.


Pasos:
1. Debes buscar el ID de tu blog

Debes irte a tu panel de blogger, entra a Diseño > Edicion HTML ahora ahi mira la barra de direccion de tu navegador y los numeros que aparecen ahi son el ID de tu blog


2. Ahora ahi en tu panel de blogger en Diseño > Edicion HTML hazle click en Expandir plantillas de artilugio y debes buscar este codigo <data:commentPostedByMsg/> abajo de el pega lo siguiente:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=AQUI-LA-ID-DE-TU-BLOG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Responder]</a></span>

3. Ahora solo cambia la ID de tu blog y guarda los cambios.

Como poner emoticones en los comentarios

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

Cómo poner el avatar de los comentaristas

0
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvf5kGMvKFkelEBoowSBBNqjwl03T3lNayOpc-qv0CzbTDyWhhu7xwAAk_6HK3O3YJdn1zRtmUGdmE3lyTBVBROEoRzonhoBwqxyQJjiWqTcgS9-ajLMXfFbjOcVNFvwl12vrrAMRGQw/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.

Como moderar los comentarios

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