Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Fondo alterno en los comentarios de tu blog con jQuery

Una vez más, la librería jQuery nos permite modificar, en menos de un minuto, el aspecto de los comentarios que se publican en el blog, haciendo que se muestren con un color de fondo alterno. Sin importar el comentarista, ya sea anónimo o autor, el diseño será siempre el escogido al incluir el código.

A continuación puedes ver una imagen que muestra el resultado.



Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> y justo antes o encima añade esta línea, perteneciente a jQuery:

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>

Debo destacar que si has incluido la librería Scriptaculous con otro truco, éste podría no funcionar correctamente o interferir en el anterior.

El siguiente paso constará de encontrar la etiqueta </body> y agregar este bloque encima:

<script type='text/javascript'>
$(document).ready(function() {
$("#comments-block dt").each(function(i){
var blComentArticJTE='zpk' + i.toString();
$(this).before("<div id='" + blComentArticJTE + "'/>");
$(this).next().next().prependTo("#" + blComentArticJTE);
$(this).next().prependTo("#" + blComentArticJTE);
$(this).prependTo("#" + blComentArticJTE);
$("#" + blComentArticJTE).css("padding","10px");
if(i%2==0){
$("#" + blComentArticJTE).css("background-color","CODIGO 1");
}else{
$("#" + blComentArticJTE).css("background-color","CODIGO 2");
}
});
});
</script>

Reemplaza en el código los términos CODIGO 1 y CODIGO 2 con el código de los dos colores escogidos. No olvides que accediendo a la tabla de colores te resultará muy fácil.

Guarda la plantilla para terminar.

Si se diese el caso de que no obtienes el resultado que buscabas o simplemente no percibes cambio alguno en los comentarios, avísame.

LKara dice...

Amigo, otro de tus mejores tutoriales. Me funcionó sin problemas y pude cambiar el fondo sin problemas. Gracias de nuevo.

Tomás dice...

Jaime, gracias por tu blog en general pero de verdad gracias por esta entrada. Hacia tiempo que buscaba algo parecido y creia que era imposible ya que con css no puede hacerse esto de fondo alterno. Mi más sincero agradecimiento, Tomás.

ibso dice...

Lo he puesto y la verdad que queda muy bien. ¡Muchas gracias Jaime!.

Un saludo, Ibso.

Jaime Trujillo Escobedo dice...

Gracias LKara, me alegra que la instalación fuese satisfactoria.

Jaime Trujillo Escobedo dice...

¡Bienvenido Tomás! Así es, por el momento jQuery es lo único con lo que podríamos generar propiedades alternas en cada comentario del blog.

Jaime Trujillo Escobedo dice...

Ibso, ese tono azul oscuro contrasta de maravilla con el diseño de tu blog, ¡Está precioso! Por cierto, muy bonita la música que has puesto.

Cocidodesopa dice...

Hola Jaime. Muchas gracias por tu sugerencia. Ya la he aplicado a mi blog y funciona!!! Bieeeenn!!

Una preguntita: ¿no sabrás cómo numerar los comentarios?

Saludos.

Jaime Trujillo Escobedo dice...

Unos tonos preciosos, Yolanda, tus comentarios se ven muy atractivos. ¿Numerar los comentarios? Por supuesto, accede a esta entrada para aprender como hacerlo.

AlejoBlogger dice...

Y para los que Usan Prototype y Scriptacolous?

Jaime Trujillo Escobedo dice...

En ese caso tendrás que escoger una de las dos librerías ya que ambas no mostrarán el resultado idóneo.

●ѕιℓνια fιℓóℓogα● dice...

Jaime, por favor ayúdame. Estoy ya loca con lo que quiero hacer y no encuentro en ningún sitio ningún truco de ayuda. En mi blog quiero que el fondo de los comentarios sea blanco para asi yo destacar con otro color los mios, pero la plantilla por defecto (no recuerdo cuál) tiene el fondo gris. No sé cómo cambiarlo. Espero que tú sepas decirme cómo.
Gracias.

Jaime Trujillo Escobedo dice...

Silvia, suponiendo que dispones de algún tutorial para editar el fondo de tus comentarios, procederé a explicarte únicamente como cambiar el fondo de los que publican los lectores de tu blog:

Diseño>Edición de HTML>expandimos artilugios

Encuentra un bloque similar a este:

#comments {
background: #CCCCCC;
padding: 15px;
}

Reemplaza la línea que indico en negrita con background: transparent;.

Eso es todo. Tanto el fondo del comentario como el fondo del nombre del comentarista aparecerá en blanco. Ahora tan solo debes insertar las propiedades CSS que cambiarán el aspecto de tus comentarios. Gracias a ti.

Orquídea Limeña dice...

Hola Jaime, he aplicado tu formato de miniblog a un nuevo proyecto y me encanta, ya apliqué este tutorial, me gustaría saber cómo puedo cambiar el color de fondo el blog, gracias!

Jaime Trujillo Escobedo dice...

¡Bienvenida Orquídea Limeña! Gracias por instalarlo. Para modificar el color de fondo bastará con añadir este código en un gadget o elemento de página html-javascript que encontrarás en el apartado de Diseño:

<style type="text/css">html, body {background: none repeat scroll 0 0 #FFFFFF;}</style>

Reemplaza #FFFFFF (blanco) por el código de tu tonalidad favorita. No olvides hacer uso de la tabla de colores.

Orquídea Limeña dice...

Gracias Jaime, enseguida haré el cambio de fondo, muchas gracias y buen fin de semana!

Jaime Trujillo Escobedo dice...

Buen fin de semana para ti también, Orquídea Limeña. Ya me contarás si te resultó.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo