Tutorial: fondo para los comentarios en blogger

Este es uno de los pocos tutoriales que nunca encontré. Fondo para los comentarios de blogger. Encontré paraface ponerle bordes, separaciones, para distinguir los del autor de los demás, pero nada, nada, sobre fondos de imagen en los comentarios. De todo, total, menos para ponerle fondo a los comentarios

En este caso les daré un ejemplo para que le pongan un fondo de imagen al comentario. Como recomendacion busquen que la imagen sea, una de dos, o un mosaico, para que se pueda repetir y no se note la separación o lo que últimamente conocen como render (mal ocupado, por cierto) o sea, una imagen PNG sin fondo. Les enseño como poder una imagen sin fondo (ya que para poner una en mosaico se sigue casi el mismo procedimiento)

Para empezar, seleccionamos una imagen.

Para explicarles está se me acomoda a varios ejemplos (como dato, es la que uso para la lista de blogs). Por otro lado esta imagen esta editada, para hacerla un poco más "transparente". Si quieren, puedo hacer un tutorial para que puedan realizar ese efecto ;) Sólo diganme en comentarios.

Segunda indicación: pierdanle miedo al código, no es tan marciano como parece. El CSS en realidad es MUY, muy sencillo. Es cosa de lógica. Claro, que en blogger hay que conoces las clases que usa. Por ejemplo, para los comentarios se utilizan diversas clases (obtenidas en Oloblogger gracias a una gran busqueda en Google; si saben un poco de CSS les puede ser de mucha ayuda ese post).

Para este tutorial solo vamos a usar una clase de esa gran lista: .comments .comments-content .comment-content {}

Supongo que todos conocen el diseñador de plantillas. Muy bien, podemos agregar los fondos desde allí, sin necesidad de entrar a la versión HTML de su blog (que en realidad es un XML... larga historia) y a muchos que no saben nada de esto les resultará más fácil, espero. Ya una vez en el diseñador de plantillas se van a Avanzado y de allí hasta abajo, a donde dice "Agregar CSS"

¿Ya están allí?, perfecto, ahora va la parte más "difícil": el código.

.comments .comments-content .comment-content {

background-image: url('http://i.imgur.com/E62Mh.png'); /* Allí colocan el link de su imagen, previamente alojada en un host de internet (personalmente, recomiendo imgur). */

background-color: white; /* En este caso que usamos una imagen PNG (sin fondo) de fondo, debemos definir un color de fondo también */

background-position: right top; /* Define la posición de la imagen */

background-repeat: no-repeat; /* Pueden cambiarlo por repeat-y si quieren que su imagen se repita horizontalmente */

padding: 10px; /* esto eso para que el texto no quede justo sobre los bordes y se vea más ponito */

}

Entonces, nuestro comentario quedaría así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum placerat sollicitudin. Proin tempor, leo id pulvinar auctor, ante sapien scelerisque mauris, ut dapibus urna urna nec metus. Suspendisse aliquet tempor arcu, eget ullamcorper mauris ultrices consequat. Nam fringilla lobortis leo id congue. Praesent sit amet vulputate velit. Vivamus feugiat condimentum sapien et bibendum. Suspendisse potenti.

Otro ejemplo es como quedaría si le dan que se repita en la coordenada y (vertical) que es como los tengo yo (pero la C.C. es muy larga así que rara vez se repite). El código es el mismo, sólo cambian levemente la última línea.

.comments .comments-content .comment-content {

background-image: url('http://i.imgur.com/E62Mh.png'); /* Allí colocan el link de su imagen, previamente alojada en un host de internet (personalmente, recomiendo imgur). */

background-color: white; /* En este caso que usamos una imagen PNG (sin fondo) de fondo, debemos definir un color de fondo también */

background-position: right top; /* Define la posición de la imagen, puede ser bottom (abajo), o top (arriba) */

background-align: right; /* El valor puede ser right, left o center */

background-repeat: repeat-y; /* Pueden cambiarlo por repeat-y si quieren que su imagen se repita horizontalmente */

padding: 10px; /* esto eso para que el texto no quede justo sobre los bordes y se vea más ponito */

}

Entonces, el comentario queda así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum placerat sollicitudin. Proin tempor, leo id pulvinar auctor, ante sapien scelerisque mauris, ut dapibus urna urna nec metus. Suspendisse aliquet tempor arcu, eget ullamcorper mauris ultrices consequat. Nam fringilla lobortis leo id congue. Praesent sit amet vulputate velit. Vivamus feugiat condimentum sapien et bibendum. Suspendisse potenti.

Sólo les expliqué como hacerlo con una imagen sin fondo, pero si van a usar una con fondo lo único que tienen que hacer es quitar dos línea de ese codigo: background-color:white; y background-repeat: no-repeat; o en su defecto, dejar el repeat-x. Recomiendo imagenes en mosaico, o que ustedes crean que no se van a ver mar. Por otro lado, si la imagen es oscura siempre pueden poner el texto blanco con un simple color:white; en el código que les di.

Realmente, es muy fácil modificar ese CSS, les puse todas las opciones y ya sólo sería cuestión de que se atrevan a experimentar con él, como siempre, cualquier duda la respondo en comentarios y si quieren algún tutorial de algo en específico pueden pedirlo también. ¡No muerdo!, y estoy dispuesta a hacer de todo para ayudar. Si les gusto el tutorial (y le entendieron) recomiendenlo...

Nea