Esta es una página que te ayudará a colocar accesorios al blog. Aprenderás como mejorar tu blog. Pasa y encontrarás de todo un poco.
Cargando

Cambiar el color de fondo de los comentarios -67-

Consiste en agregar un color de fondo a los comentarios, el cual puedes asignar un color de fondo para el autor del blog (un color de texto también) y otro para el autor de los otros blogs.

1. Ir a diseño de la Plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Buscar el id ='comments-block'.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>


<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>

* Agregar lo que está de color rojo.

3. Seguimos en la plantilla. Entre <b:skin><![CDATA[ y ]]></b:skin> buscar lo siguiente (estilo del comentario):

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
Sigue más código de estilo
…..
…..
….
.deleted-comment {
font-style:italic;
color:gray;
}

4. El siguiente código lo deje para el último porque se refiere al estilo del comentario (modificado), el cual se podrá realizar cambios utilizando tu criterio. Una vez ubicado el estilo del comentario lo reemplazamos por lo siguiente:

#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#e6e6e6 url("http://4.bp.blogspot.com/_wIBBe1JWnPQ/RjoyOtvN3eI/AAAAAAAAAGA/PsaYcfwBLQg/s200/page_edit.png") no-repeat 2px .35em;
margin:.5em 0 0;
padding:3px 0 0 18px;
font-weight:bold;
}
.comment-body {
background:#eeeee6;
margin:0;
padding:7px 7px 7px 7px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
background:#e5e5e5;
margin:0;
padding:7px 7px 7px 10px;
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2;
text-decoration:bold;
}
.comment-footer {
background:#e6e6e6;
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Explicación:
- En .comment-author, aparece el nombre del autor y puedes cambiar el color de fondo y la url que viene a ser el icono
- .comment-body, ahí se visualiza el color de fondo para los que dejan comentarios.
- .comment-body-author, ahí se visualiza el color de fondo para el autor del blog.
- .comment-body-author p, puedes cambiar el color de texto del autor del blog.
- .comment-footer, aparece la fecha y puedes cambiar el color de fondo.


29 Comentarios:

la bloga dijo...

excelente post, lo habia leido en otros lados pero no con este analisis tan claro.

saludos

graciela dijo...

Hola Andrés, genial la explicación, encontré lo que veía en otros blogs y no sabía como cambiar. Ya está en marcha!!!.
Gracias y hasta cualquier momento.

Humberto Contreras Soria dijo...

Hola Andres, nuevamente utilizando tu blog para aclarar que el diseño de la plantilla "MidBasyc" se ve muy bien en mi pc que tiene el IE7 pero, casi me cai "patas p'tras" cuando lo vi con el IE6. Estaba todo desconfigurado y por ello no te entendia cuando me decias porque lo tengo la sidebar debajo de la cabecera. He contrastado la plantilla en su demo y tanbien en IE6 se ve fatal. Ahora solo me queda empezar de nuevo, asi que por ahi nos vemos cuando te necesite. Saludos.

Antoniodya dijo...

Muy bien. Gracias por el truco.

Saludos
Antoniodya
antoniodya.blogspot.com

Andrés dijo...

La bloga, Graciela: Gracias por la visita.

Humberto: Ese es el problema que mucho que sus blog se ve mal en los diferentes navegadores que existe.
Gracias por la visita.

Antoniodya: Gracias por la visita.

Andrés Fevrier dijo...

Buen truco. Lo acabo de aplicar con algunas modificaciones y quedó muy bien.

Muchas gracias por el dato y la explicación.

Saludos

n€n∂ h€rMø§∂ dijo...

Hola, oye, primero que nada que buena pagina tienes, con las maravillosas explicaciones le agregue varias cositas a mi blog que queria desde cuando pero que en otros blog no entendia como hacerlo, en fin ahora quiero cambiarle el color de fondo de mis comments, pero no encuentro en mi plantilla los elementos que mencionas, podrias checarlo plis? mi direccion es http://enalgunlugardemimente.blogspot.com

Tambien quisiera cambiarle la leyenda que dice publicado por.... a las .... por alguna leyenda mia, lo he visto en otros blogs pero como le hago en el mio.

Gracias por la ayuda, yo estare por aca checando, besos!

galko dijo...

Lo acabo de aplicar a mi blog y funciona correctamente! Gracias! Ahora voy a ver si encuentro cómo cambiar el color de la sidebar de la plantilla Denim... si alguien lo sabe y me quiere contactar, puede hacerlo a través de mi blog (http//mercadeopop.blogspot.com)

Muchas gracias!
Menudo vicio esto de personalizar tu blog, jeje.

M3O/MaNe/CJS dijo...

hola Andres!
al parecer ya tiene un buen esta entrada q hiciste y de verdad q grax X hacer tan detalladas las explicaciones...

Domingo dijo...

Hola, felicidades por el Blog, una buena herramienta.
Mi pregunta es la siguiente, como puedo poner un buscador que tengo en el Blog arriba en la cabecera al lado del título?
Gracias, un saludo

**[T]eby]*[Skater]** dijo...

wena te pasate
te aconjo ke pa los comentarios pongai esto:
http://blogandweb.com/2008/06/27/formulario-de-comentarios-en-la-misma-pagina-en-blogger/

ZonaVella Blog dijo...

He seguido al pie de la letra tus indicaciones, creo, pero cuando dejo un comentario como autor no veo lo que escribo me sale el fondo y el texto en el mismo color, me podria mirar a que se debe, gracias

www.el-sanmarquino.blogspot.com dijo...

Excelente blog de ayuda. Muchas gracias Andrés

Antonio dijo...

bueno, no podia aguantar:

MUCHISIMAS GRACIAS

de verdad, realmente me ha solventado un gran problema de mi blog que era la falta de estética en los cometnarios. Ha quedado fabulosamente bien con este truquillo

muchísimas gracias! :D

http://sonriendoalmundo.blogspot.com/

Leandro dijo...

A mi me funcionó todo excepto lo de la imagen. Probé con una en varios tamaños y no funcionó, luego probé con la que tenés vos y tampoco me anduvo, pero el resto de las cosa si camina muy bien.

sdos

Mario Enrique dijo...

Muy buena pagina, felicidades, la verdad me ha servido bastante, logre sacar esto de los comentarios pero si me costo un poco, gracias, espero sacarle mas provecho a todos los consejos. Quisiera que vieras mi blog y me des algunos consejos. www.jaenvic.blogspot.com

Anónimo dijo...

les recomiendo un excelente tutorial para que puedas cambiar el cambiar el fondo del blog, además hay algunos fondos para que puedas elegir y otros cientos de accesorios para el blog. Yo ya cambié el mio y quedo de 10. Muy bueno el post y un saludo para todoooossss!!

Ezequiel dijo...

muchas gracias, este aporte me sirvio mucho :)

€rickson dijo...

muchas gracias mano, era lo ke andaba buscando, por cierto no sabras tambien como poner un glosario de palabras, o una nube de palabras, para el blog, que esten relacionadas con las entradas?

En Clase dijo...

Me cargao un blog :D XD
Provare otra ves.. haber

David dijo...

Hola, esta todo ok mi blog pero cuando alguien deja un comentario , el texto se corre a la esquina izquierda y uqiero que se alinie normalmente como alineo el texto para que se quede normal

salu2

bryan846 dijo...

Me prodrias ayudar mi blog es

http://espacio846.blogspot.com/

y lo que pasa es que el codigo #comments { no sale en mi plantilla

que puedo hacer??

Andrés dijo...

Bryan846: Sabes tendrias que hacerlo a partir de este código #comments-block.

Andrés dijo...

Bryan846: Sabes tendrias que hacerlo a partir de este código #comments-block .comment-footer {

Anónimo dijo...

Muy buena ayuda

Alison Shanick dijo...

Hola si aun vives, me encantaría poder cambiar el fondo blanco en donde uno escribe, osea antes de dar ok al comentario .___.
seguire buscando y excelente tuto.
Saluttes.
Me pasare por si hay repsuesta.
bechotes.

Lourdes dijo...

Por favor me puedes indicar como cambiar el fondo de los post transparente por uno opaco ??en la plantilla watemark, tengo puesto un fondo de rayas y los post no se ven bien porque quedan transparentes y se lee con dificultad. Muchas gracias, un abrazo.
puntdecreu-loula.blogspot.com

Scott St. James dijo...

Hola!
a ver si pe puedes ayudar, por favor, lo he puesto de la manera que sigue, pero no me funciona...


Gracias por adelantado!

/* Comments
----------------------------------------------- */
#comments h4 {
margin:0 0 10px;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#250707
margin:.5em 0 0;
padding:3px 0 0 18px;
font-weight:bold;
}
.comment-body {
background:#252E06;
margin:0;
padding:7px 7px 7px 7px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
background:#ACD220;
margin:0;
padding:7px 7px 7px 10px;
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2;
text-decoration:bold;
}
.comment-footer {
background:#ACD220;
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Diana Zarza dijo...

Buenas,

Estoy buscando desde hace tiempo tutoriales para cambiar los comentarios y creí que con este lo había encontrado, pero no :C Por algún motivo, me aparece un recuadro gris debajo de los comentarios de mis lectores, y no puedo quitarlo. He buscado ya por todas partes y no sé qué hacer. Tuve otro blog y no tenía ese problema :C
Espero que puedas ayudarme. Un beso,

Z.

Related Posts with Thumbnails
Últimos Post