Cómo personalizar la caja de comentarios

¿Qué tal? ¿Vienes con ganas de aprender un truco para personalizar aún más tu blog y fardar de diseño? ¿No te gustaría darle estilo a la caja de comentarios de tu sitio? Seguro que sí.

De todos modos, antes de que te lances de lleno en la búsqueda de boli y papel, te advierto sobre un par de cosas importantes: en este tutorial vamos a tocar el HTML de la plantilla, así que antes que nada te pediré que hagas copia de seguridad, y otro punto a destacar de este truco es que sólo vale para blogs con comentarios anidados, es decir con los comentarios visibles en la misma ventana del post, y en los que se distinguen perfectamente comentarios de un autor y otro, y en que la respuesta queda ligeramente desplazada a la derecha. Además, como siempre, este truco lo explico en exclusiva para Blogger, porque mi experiencia con WordPress es nula.

Dicho esto, y ya que veo que sigues por aquí, nos ponemos en marcha, pero para que no resulte complicado vamos por partes, ¿vale?

¿QUÉ ES LA CAJA DE COMENTARIOS?

• Es el recuadro que se visualiza cuando aparecen los comentarios ya publicados en un blog. No se trata, por tanto, del cuadro o ventana donde insertas el texto cuando redactas el comentario. Por tanto, en esa caja, aparecen no sólo los avatares, nick, fecha del comentario, sino también los botones de "responder" y "eliminar", entre otros. Todos ellos, elementos modificables en gran medida.

¿QUÉ PUEDO CAMBIAR DE ESA CAJA?

Algunas de las posibilidades que te ofrece esta personalización serían:

• Cambiar el fondo de la caja o recuadro.
• La forma  y colores de los botones: "responder", "eliminar".
• Disposición del avatar del comentarista.

____________________________________________________________________________

Interesante, ¿verdad? Estoy convencida de que esto ha despertado tus ansias de saber más, y de trastear un poco, pero como vas a tener que toquetear el HTML de tu plantilla y "más vale prevenir que tener que lamentar", antes de ponerte de lleno con los códigos, te ruego encarecidamente que hagas una copia de seguridad de tu plantilla, por favor. Además es muy importante que copies bien el código, porque es bastante extenso y si te saltas una línea o una letra puede ser que no funcione. Se me ocurre que podría ser interesante que probases en un blog de pruebas que no tengas abierto al público. Cuando logres el aspecto deseado sólo trasladas ese código al blog que quieres personalizar y ya está.

Yo te voy a dar el estilo básico, por así decirlo, y con las explicaciones de lo que hace cada parte del código, seguro que logras justo los efectos que estás buscando. Éste es el código. Y te destaco algunos de los parámetros con los que puedes jugar, para modificar tu caja al 100%, bien con alguna explicación, bien con subrayado. No hace falta que apliques todos, de hecho, no te he señalado más que una parte de los que puedes modificar, porque estoy plenamente convencida de que en cuanto trabajes un poquillo con esto, empezarás a coger la mecánica y a comprender dónde buscar cada elemento que quieras modificar.

Antes te explico un poquito lo que vas a ver en este código, así te familiarizas con él, antes de empezar ver símbolos y letras extraños. 

En CSS cada elemento se define e identifica de esta manera. ¡Qué me perdonen todos los informáticos del mundo, por favor! Trato de explicar esto con lenguaje lo más comprensible posible, así que los tecnicismos brillan por su ausencia, en parte porque escapan a mis conocimientos, claro. En fin, dicho esto, os dejo un pequeño esquema de lo que vais a encontraros en el cuadro grande.

.nombre del elemento {
característica1: parámetros o medidas;
característica2: parámetros o medidas;
} 

Obviamente cada elemento puede contar con más de dos características. El truco está en que vayan separadas por punto y coma (;) y en líneas separadas, además cada característica se define tras los dos puntos (:), así que no os olvidéis jamás de ellos. De igual modo, cuando saltemos a definir un nuevo elemento cerraremos el anterior con una llave (}).

Y ahora sí que sí empezamos con el código. Así que sed valientes... 

Un consejillo, además de la copia de seguridad de vuestra plantilla que, espero ya hayais hecho cuando os lo he pedido más arriba, hay un truquillo para ver cómo resulta alguno de los cambios sin necesidad de guardar y luego volver a nuestro blog, siempre y cuando se trate de un elemento visible en la página principal, claro (pulsad para ello, la opción de "vista previa" desde la página del HTML de la plantilla. Por Ejemplo: podríamos hacerlo así en los widgets, los títulos, etc. Para nuestro caso no nos vale, pero es bueno que recordéis esto en ocasiones venideras. 

Llegados a este momento, hay dos maneras de incorporar el nuevo código, si no sois muy expertos os recomiendo el método 2 (más sencillo y "seguro"). Así que id abajo hasta que lo encontreis y no os compliqueis la vida con este primero. A su vez, os recomiendo que leais primero todo el post, antes de hacer nada, porque de ese modo tendréis una idea más clara del proceso. Así que imaginad que estais leyendo un libro de los de "Mi propia aventura": esos en que a medida que ibas leyendo tenías que tomar decisiones para tu personaje y eso te llevaba a una página u otra. De todos modos, no os preocupeis, que aquí el único final posible es un final feliz ;).

Y dicho, esto tomad aire y empezad a leer con atención. Aquí empieza la dura parte teórica.

• MÉTODO 1:

1.  Bien, recuerda que estamos en Plantilla---> Editar HTML y ya hemos hecho copia de seguridad (Soy odiosamente pesada. Lo sé) antes de marcar esa opción en el ordenador. Si no es así, vuelve hacia atrás y haz la copia. 
2. Coloca el ratón dentro del cuadro que muestra tu plantilla y teclea CTRL + F 
3. En el cuadro de búsqueda escribe: <b:skin>
4. El buscador te llevará a una línea que pone: <b:skin>...</b:skin>. Pincha sobre los tres puntos para que se despliegue al completo el código CSS.
5. Desplázate hacia abajo con el ratón, y busca la zona de los comentarios. Te aparecerá algo así: /*Comments_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ */
6. Conviene que copies en un bloc de notas o similar ese código original (esto es sólo por seguridad extra).
7. En otro nuevo bloc de notas, inserta el código con que vamos a trabajar y haz los cambios que consideres oportunos. Guarda el documento, pero no lo cierres, porque es lo que tendrás que trasladar a la plantilla (este paso es opcional. Lo puedes saltar e ir directamente al 8. Particularmente, creo que éste es más seguro, aunque más lento, claro).
8. A continuación regresa a tu plantilla, y copia y pega bajo esa línea que señalo en el paso 5, el código completo que te facilito abajo en el cuadro grande. Si no has hecho los cambios para personalizar el código, ahora es el momento.
   
9. Elimina de la plantilla el código preexistente original que trasladaste al principio al bloc de notas. 
10. Da a "Vista previa" para verificar que la página carga bien y no te genera ningún error.
11. Si todo ha ido bien da a Guardar Plantilla. 

 

¡Siéntete orgulloso, ya has personalizado tu caja de comentarios! ¡Enhorabuena!
 

ÉSTE ES EL CÓDIGO

.post-comments { /*Código para modificar la caja de comentarios*/
margin-bottom:70px;
margin-top:70px;
}
.comments {
margin-bottom:40px;/*distancia respecto al siguiente comentario. No recomiendo variarla.*/
}

.comment {
border-bottom:1px dotted #eee;/*borde inferior de cada comentario. Prueba diferentes efectos: sustituyendo dotted por dashed (línea discontinua), por ejemplo, o por double: línea doble. Cambia el código de color por otro que te guste más. Por si no lo sabes los colores en código HTML se definen así: #seis letras o números, normalmente se combinan ambos. Si todos esos carácteres son iguales, el código abreviado queda como en este ejemplo: #eee, es decir, el código completo sería: #eeeeee*/
margin-top:20px;
margin-bottom:34px;
padding-bottom:40px;
}

 .comments .comments-content {

  font-size: 13px;

  background:#fff url(la imagen que queréis usar como fondo);

  margin-bottom: 16px;

  margin-top: -8px;

  margin-left: -10px;

  padding-left: 1em;

  zoom: 1.05;

  background-size: 100px;

}

.comment .avatar-image-container {
float:left; /*elige si quieres la imagen de quien comenta a la izquierda: left o a la derecha: right.*/
}
.comment .avatar-image-container img {
border-radius:50%;/*superinteresante: si lo pones al 100% la imagen del comentarista será redonda. Creo que también funciona si pones 18 px, aunque creo que la mejor opción es con el %*/
width:50px;
height:50px;
max-width:50px;
max-height:50px;
}
.comments .comment-block {
margin-left: 80px;
position: relative;
}/*Toda esta parte subrayada permite poner un fondo en la caja. Basta con que pongas una imagen. Recomiendo que sea como mucho de 50 x 50 px y que sea "Seamless". Tienes algunas muy chulas en http://www.elperrodepapel.com/2014/08/fondos-sin-costuras-para-blogger.html Si quieres hacerlo incorpora una línea de background con la dirección url a la que debe llevar la imagen. Por supuesto, previamente habrás de alojar ésta en un hosting.*/

.comment-replies {
margin-left: 40px;
margin-top: 20px;
}
.comments .avatar-image-container {
float: left;/*¡Ojo si lo cambiaste líneas arriba aquí has de poner lo mismo*/
max-height: 50px;
overflow: hidden;
width: 50px;
}
.comment-replies .comment {
border:none;/*puedes modificarlo quitando el none, añadiendo grosor del borde en pixeles, el color y su apariencia con estos formatos: double, dashed y dotted. Elige cómo te gusta más. P.Ej:2px dotted #000000; */
margin-bottom:0px;
padding-bottom:0px;
}
.thecomment .comment-text {
overflow:hidden;/*puedes dejarlo a la vista poniendo visible, en lugar de hidden.*/
}
.thecomment .comment-text span.author, cite.user > a {
display:block;
font-size:14px;
text-transform:uppercase;/*siempre que veas esta palabra, indica que el texto va en mayúsculas*/
letter-spacing:2px;
margin-bottom:6px;
color:#333;/*cámbialo por el código de color hexadecimal que sueles aplicar a tu página.*/
font-family:"Open Sans";/*Elige la fuente de letra que más encaje con el estilo que buscas para tu sitio. Ten en cuenta que no todas se reconocen en todos los navegadores*/
}
.thecomment .comment-text span.author a:hover {/*Apariencia del texto del autor cuando colocas el cursor encima*/
}
span.datetime {
font-size:14px;
color:#999;
font-style:italic;
display:block;
margin-bottom:10px;
}
.thecomment .comment-text em {
font-size:13px;
margin-bottom:-14px;
display:block;
color:orange;
letter-spacing:1px;
}
.thecomment .comment-text em i {
font-size:14px;
color:#f3bd00;
}
.comment-actions a {
float:right;
font-size:11px;
background-color:#FF9898;/*prueba colores que encajen con la estética de tu sitio. Con esto cambias el color del fondo de los botones de respuesta y eliminar*/
color:#FFF;
padding:3px 6px 5px 6px;
border-radius:2px;
margin-left:7px;
font-family:"Lato";/*Tipo de letra para esa zona de la caja*/
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.continue a {/*Botón para "añadir comentario". Ha de concordar con lo que coloques en el siguiente elemento:".loadmore a {"*/
float:left;
margin-bottom:20px;
font-size:11px;
background-color:#aaa;
color:#fff;
padding:3px 6px 5px 6px;
border-radius:2px;
margin-left:7px;
font-family:"Lato";
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.loadmore a {
font-size:11px;
background-color:#aaa;
color:#fff;
padding:3px 6px 5px 6px;
border-radius:2px;
margin-left:7px;
font-family:"Lato";
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.post-comments span.reply a.comment-edit-link {
background:#c5c5c5;/*Modifica el color del fondo del botón de"respuesta"*/
}
.post-comments span.reply a:hover {
opacity:.8;
}
ul.children { margin: 0 0 0 55px; }
ul.children li.thecomment { margin:0 0 8px 0; }
/** Reply **/
#respond {
margin-bottom:20px;
overflow:hidden;
}
#respond  h3 {
font-size:14px;
color:#999;
font-weight:400;
margin-bottom:30px;
font-family:"Lato";
letter-spacing:2px;
text-transform:uppercase;
}
#respond h3 a {
color:#000;
display:inline-block;
}
#respond h3 small a {
text-transform:uppercase;
font-size:11px;
background:#333;
color:#FFF;
padding:4px 6px 5px;
border-radius:3px;
margin-left:7px;
letter-spacing:1px;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
#respond h3 small a:hover {/*Apariencia del botón de "respuesta" al poner el cursor encima*/
opacity:.8;
}
#respond label {
color:#888;
width:80px;
font-size:14px;
display:inline-block;
font-weight:300;
}
#respond input {
padding:8px 10px;
border:1px solid #DDD;
margin-right:10px;
border-radius: 3px;
color:#999;
margin-bottom:15px;
font-size:11px;
width:250px;
font-family:"Georgia";
}
#respond input:focus {outline:none;}
#respond .comment-form-url {
margin-bottom:10px;
}
#respond textarea {
padding:14px;
border:1px solid #DDD;
border-radius: 3px;
width:95%;
height:120px;
font-size:13px;
color:#777;
margin-bottom:14px;
line-height:20px;
font-family:"Georgia";
}
#respond textarea:focus {outline:none;}
#respond #submit {
font-family:"Lato";
text-transform:uppercase;
letter-spacing:2px;
background:#eee;
border-radius:0;
font-size:11px;
color:#666;
padding:12px 19px 14px;
margin-top:6px;
display:inline-block;
border:none;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
cursor:pointer;
border-radius:30px;
width:auto;
}
#respond #submit:hover {/*Aspecto del botón "eliminar comentario" cuando colocas el cursor encima*/
background:#333;
color:#FFF;
}
.PageList h2 {
display: none;
}

•  MÉTODO 2:

1. ¡Ojo este paso ya es distinto al del método 1 y el siguiente también! Así que no te confíes. Eso sí, es mucho más fácil. Vamos a Plantilla---> Personalizar.
2. Entre las opciones del menú de la izquierda elegimos: Avanzado--->Añadir CSS.
3. En el cuadro que visualizaremos a la derecha de ese menú, insertamos el código que os facilito.
4. Probamos a cambiar lo que nos interese. Guardamos pinchando en Aplicar al blog.
5. Volvemos a Blogger o damos directamente a Ver blog y observamos los cambios. Si algo no os convence haced de nuevo los pasos 1, 2, 3 y 4 de este método.

NOTA: Blogger incorpora directamente el CSS que hemos añadido a través de la opción Personalizar a nuestra plantilla general, y parece que hubiera desaparecido, pero no es así. Lo podéis encontrar de nuevo recurriendo al método 1: pasos 4 y 5.

 

BONUS EXTRA:

• Te doy dos secuencias de código extra para que pruebes y decidas si te gusta cómo quedan o no esos efectos. ¡Ojo en el primer caso se requieren las dos partes del código! Es decir todo lo que ves en color verde. 
• Puedes limitarte a añadir sólo estos en tu plantilla prescindiendo del código extenso del cuadro grande. Puedes elegir sólo uno, combinar los dos o incluso un tercero, por ejemplo añadiendo la parte del código largo que corresponde a la imagen de fondo de la caja. Juega con el código y prueba los efectos. 

.avatar-image-container{/* Contorno de los avatares así consigues una forma de bocadillo de cómic */
background:#FFBBBB; /*Elige el color que te interese*/
padding:5px;
border-radius:50% 50% 0% 50%;
}

 avatar-image-container img{/* Avatares de comentarios */
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}

• La otra posibilidad que te ofrezco, muy visual y divertida, es la de que los avatares giren. ¿Quieres saber cómo?:

.avatar-image-container img:hover{/* avatares de comentarios "HOVER" con rotacion*/
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}

¿Te atreves a probar y contarme luego cómo te ha quedado? ¿Te atreverías a probar a poner los avatares ocultos? Es un efecto superchulo... ¿cómo crees que tendrías que hacerlo?

Hoy sí que te has ganado todo mi cariño y respeto al máximo, pues la entrada ha sido probablemente la más extensa hasta el momento. Espero que te haya sido fácil seguir los pasos y que te haya gustado cómo queda cada modificación al aplicarla. Un besazo. Nos vemos en unos días a las 10:30.