martes, 2 de agosto de 2011

Enmarcar y separar comentarios en Blogger

Los comentarios son una parte fundamental de un blog, pues en ellos se ve reflejada la opinión de los lectores respecto a una entrada o nuestro sitio, por lo tanto es importante dedicarle un poco de nuestro tiempo para hacer de esta área un espacio presentable, accesible y ordenado.

Y si de orden se trata entonces es necesario que cada comentario pueda identificarse donde empieza y dónde termina, de lo contrario se convierte en un revuelto de letras del cual el lector puede salir huyendo. Veamos pues algunas formas de darle un poco de orden para delimitar el área de cada comentario.


El primer método es el más sencillo, y se trata de poner un borde debajo de los comentarios, esto es para separar cada comentario del blog de una forma simple pero efectiva.

 Para agregar este separador sencillo sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega lo siguiente:

#comments-block .comment-footer {
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Podemos hacer lo mismo pero que el separador de comentarios sea una imagen.


En ese caso el código que has de pegar es el siguiente:

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZtrV95iLc7lidlL5yverzFhEXV4nh_97IhwOlevn6tYrJudt_EZTvKN9FFObm_olUsconNKEe4HEyj7ZbVM6QicwmJ1KD0mpwuTXLq_T2tr69GZROIpcmr9DM0ge-TXIG9kt4GU5K2s/);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

La URL que está en color azul es la imagen que puedes cambiar por la que gustes, sólo recuerda que en el height deberás establecer la altura de la imagen más unos 20px más, por ejemplo, si el alto de la imagen es de 50px entonces el valor será de 70px
Esto es únicamente para que la imagen no se encime a la fecha de los comentarios.



1 comentarios:

Anónimo dijo...

No me funciona como lo hago

Publicar un comentario

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Buy Coupons