6 de julio de 2012

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

7 comentarios:

  1. ¡Hola!
    Por aquí robándole un ratito el computador a mi hermano ;).
    Me ha gustado el tutorial, en cuanto regrese de vacaciones lo pondré en práctica.
    Recordaba haber hecho algo así para cuando el autor del blog respondiera un comentario o comentara en la entrada, pero ya ni recuerdo donde fue... Este me ayuda bastante a recordar, aunque sigo sin saber XD.
    Sí, el código no es tan difícil como parece, al principio me asusté con ese montón de letras y símbolos, pero con el montón de tutoriales que he seguido al fin he aprendido un poco.
    En cuanto lo pruebe te diré como me fue.
    Genial la idea de los tutoriales, estaré esperando.
    ¡Besos!

    ResponderEliminar
    Respuestas
    1. ¡Hola!
      Sí, yo también he visto uno parecido al que mencionas. :)
      No, el código no es nada difícil, ando planeando varios tutoriales más para explicarles el código por encimita :D
      Vale, si tienes alguna duda, dejame un comentario o si no te funciona e igual te ayudo ;)
      ¡Besos!

      Eliminar
  2. Nea, por fin me animé a hacer una de estas cosas. La imagen con la que intenté no es PNG, y quise saber si serviría alguna otra siempre y cuando estuviera bien su URL, así que...

    ¡Mis comentarios ahora tienen un "monito"! (Bell baila la conga). Como es mi primer intento, batallé un poco para hallar una que quedara bien con el formato que tengo actualmente, ya que de momento, no cambiaré nada de la plantilla (ajá, como si fuera la gran cosa...). Si ves algunos de los comentarios que me dejan (que no son muchos, Bell se va a un rincón a llorar), ahora verás a una chibi Yuzuriha en la esquina inferior derecha, que se quedará allí un rato antes de ponerme a buscar la imagen indicada que...

    Momento, ¿dijiste que podías pasarnos eso del "efecto transparente? ¡Me apunto! Porque tengo algunas imágenes que quisiera usar precisamente en los comentarios, pero ya con el texto, no lucen bien y me cuesta un montón de trabajo colocar colores de texto que combinen con todo lo demás cuando ando armando el "tema" del blog (larga historia). Aparte, soy del pensamiento de "no pongas colores y/o diseños en el blog que no te resulten cómodos a la vista". Sí, tengo mi "método" para esas cosas, jajajaja.

    Cuídate mucho, Nea, y nos leemos en otra ocasión.

    P.D. A ver si tengo suerte y hago que salga toda tu C.C., jajajajaja...

    ResponderEliminar
  3. y si quiero que la imagen solo aparesca en los comentarios del autor como le hago?

    ResponderEliminar
    Respuestas
    1. Realmente tengo que decir que no he investigado eso, ¡aunque sé que hay una manera de personalizar únicamente los comentarios del autor.

      Eliminar
  4. I can't stand sleeping in complete silence, so I always have a fan on. Also, I'lll admit that I use my ipod for most of my work day since
    http://www.arabie3lan.com الشيخ الروحاني
    I spend a lot of it working through paperwork. I also often use it for my walks, though, from time to time, I'll go without it and just listen to the sounds around me and take in the nice weather.

    ResponderEliminar
  5. www.herzas.net - Domain Parking
    الشيخ الروحاني http://www.sheikhrohani.de/

    ResponderEliminar