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 {Si usas los comentarios anidados entonces agrega lo siguiente:
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}
.comments .comment-block {Podemos hacer lo mismo pero que el separador de comentarios sea una imagen.
padding-bottom:10px;
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

En ese caso el código que has de pegar es el siguiente:
#comments-block .comment-footer {Y si usas los comentarios anidados deberás usar este código:
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxkzdeTUcr3xTQS2f3TPyg8PXe0j5TXZ41lWSUwAurnpoaTAbZfkY5NK8tGKfgeg7Ue02Q3emQd51Xg5AFd-d8sLJJui2oomYWOS6R25i_NOYcekVg3begc3vGowH78QpiKNmhPj8-OI/);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}
.comments .comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxkzdeTUcr3xTQS2f3TPyg8PXe0j5TXZ41lWSUwAurnpoaTAbZfkY5NK8tGKfgeg7Ue02Q3emQd51Xg5AFd-d8sLJJui2oomYWOS6R25i_NOYcekVg3begc3vGowH78QpiKNmhPj8-OI/);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:20px;
height:70px;
}
.comments .comments-content .datetime { /* 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.
Esto es únicamente para que la imagen no se encime a la fecha de los comentarios.
Pero igual podemos darle más estilos a cada comentario, por ejemplo enmarcar los comentarios añadiendo un color de fondo y un borde (No aplica para comentarios anidados).

Para conseguir este tipo de estilo marca la casilla Expandir plantillas de artilugios ahí mismo en Diseño | Edición de HTML y busca esta línea:
<b:loop values='data:post.comments' var='comment'>Debajo de ella agrega esto:
<div class='comentarios-cb'>Luego busca un poco más abajo el siguiente </b:loop> que encuentres y justo arriba de él agrega esto:
</div>
Ahora antes de ]]></b:skin> pega lo siguiente:
.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border-top:1px solid #240B3B; /* Borde superior */
border-bottom:1px solid #240B3B; /* Borde inferior */
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}
¿Y cómo se vería con bordes redondeados?
El procedimiento es el mismo que el anterior sólo que el código que habremos de pegar antes de ]]></b:skin> será este:
.comentarios-cb {(Los bordes redondeados en Internet Explorer no funcionan con CSS)
background:#E6E6E6; /* Color de fondo */
border:1px solid #240B3B; /* Borde */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}
En cualquiera de los casos se puede cambiar el color de fondo, borde, etc. en las partes que tienen anotaciones en color verde.
La /* Fecha de los comentarios */ puede cambiarse de formato en Configuración | Comentarios | Formato de hora de los comentarios.
Pero de igual modo podemos ocultarla, sólo basta con agregar debajo de .comment-timestamp { esto:
display:none;Sólo ten en cuenta que si ocultas la fecha también se ocultará el icono para eliminar los comentarios.
En estos dos últimos estilos se especifica el área donde se cambia el color de los comentarios, ahí se pueden añadir otros estilos como el tamaño de la letra, tipo de fuente, etc.
En el caso de los dos primeros métodos sólo basta con agregar a ese código este otro fragmento para darle formato al texto de los comentarios:
.comment-body {
color:#000; /* Color de los comentarios */
}
Haciendo algunas de estas modificaciones los comentarios se verán más ordenados y serán más fáciles de identificar y leer por los lectores.
que bonito, mas tarde lo incluire :)
ResponderEliminarMuy bueno, yo utlicé el primero, que es sencillito, pero muy chulo.
ResponderEliminarGracias Potro
Por cierto ¿como puedo instalar un contador de entradas, días y comentarios como tu tienes?
ResponderEliminarSaludos y perdona por las molestias
wenaa :D
ResponderEliminarexcelente buscava esto, muchas gracias potro saludos
MaG@S RaDioMuSiC, excelente elección :)
ResponderEliminarMarina Salas Blog, en esta entrada está la información.
uf al fin, estaba loco tratando de separarlos con una imagen y pormas intentos q habia hecho no lo conseguia y nuevamente aqui lo encuentro con la explicacion mas sencilla y efectiva
ResponderEliminarmil gracias!
MCarlitooH2, gracias a ti weon, por estar siempre :)
ResponderEliminarAdmin, igual me pasa a veces que le doy muchas vueltas a algo que al final termina siendo muy sencillo :)
esta bien para cambiar un poco los comentarios que trae por defecto blogger que son un poco simples
ResponderEliminarQué genial!! adoré el de la vaquita de San Antonio! jejeje me parece que pondré ese a ver cómo queda. Gracias como siempre!!
ResponderEliminarqueda genial la idea de poner una imagen separando los comentario....muchísimas gracias por compartir tanta información útil para todos los bloggers...
ResponderEliminarUn abrazo
se imagen esta buen oluego añado
ResponderEliminarPotro, toqué hace un tiempo el html de este blog http://desesperatecats.blogspot.com/ y aunque marqué que al final de la entrada salgan los iconos para compartir, sencillamente no se ponen. ¿Cómo arreglo esta chapuza? Y sino, ¿qué entradas para meter los enlaces para compartir tiene por ahí?
ResponderEliminarGracias de antemano, como siempre.
PeliculasTube, bastante simples, pero con un poco de CSS se puede mejorar :)
ResponderEliminarPabela, no las conocía por ese nombre, aquí en México les llamamos catarinas :) pero sí, están muy lindas!
Anakonda61, gracias a ti por tu visita!
ResponderEliminarDreko LockerzLatinos, what? :P
martinyfelix, mira en esta entrada que explica cómo ponerlo.
Muy buena entrada, aunque cambio los colores de fondo y borde pero no se entera. A ver que me puedes contar de eso.
ResponderEliminarHola Potro no había pensado en esto pero me parece una exelente idea como todas las que nos compartes, voy a probar con la segunda opción y te cuento como me quedó. un abrazo =)
ResponderEliminargracias potro y puedo sustituir el "dijo.." por una imagen?
ResponderEliminarHola de nuevo amigo potro muy buenos tus ayudas me encanta tu web.
ResponderEliminarpero tengo una pregunta que no ba con el tema de este post pues me gusraia que me ayudaras en
como le cambio el tamaño de los titulos de los post e buscado y no e dado como = si puedes el tipo de letra
Gracias por la ayuda...
pos_ch, podría ser la plantilla, ¿en cuál blog lo pusiste y cuál método has usado?
ResponderEliminarSilvia , ya me contarás cómo te fue ;)
nEjO, claro, en esta entrada puedes ver cómo cambiar el "dijo..." de los comentarios, ya sea por otro texto o por una imagen.
ResponderEliminarBeneco, usualmente es de esta forma:
ResponderEliminarh3.post-title {
font-size: 14px;
}
Andá que bueno, lo acabo de poner en mi blog.. y queda perfecto, le da un toque diferente... y como tu dices, más ordenado.
ResponderEliminarAsí da gusto :D
Gracias.
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola, Potro!!! Excelente, ké bueno ke por fin hiciste un post sobre esto, tú me ayudaste a hacer esta misma división de mis comentarios hace como un año o algo así, hasta ahora solo los tenía con la línea simple, pero creo ke probaré esta vez con una imagen (me gustó la catarina =P) para darle otra fachada al blog.
ResponderEliminarMil gracias como siempre por compartir!
Besote =)
Hola Potro, muy buen post. Tengo un problema, resulta que desaparecieron los seguidores.
ResponderEliminarSolo estaba poniendo el "Ir arriba, Ir abajo" y despues me di cuenta de que los seguidores ya no estaban. ya trate de quitarlos y ponerlos y no se ven. Espero que me puedas ayudar. Muy buen blog.
http://rockclasico1.blogspot.com
Muy buena entrada. La usaría si tuviera alguien que las comentara pero en fin. Me gustaría poner el botón "Me gusta" justo donde lo tienes ahora. ¿Como lo puedo hacer?
ResponderEliminarnenna, estoy seguro que a tus lectores les dará más gusto ;)
ResponderEliminarGracias Angel, saludos.
Merlina, la verdad es que no sé porqué lo retrase demasiado porque igual tuve que explicarlo a algunos a través de comentarios pero ya era necesario hacer una entrada dedicada al tema. Gracias por el beso, otro para ti!
Emilio, el efecto deslizante que usan las flechas requieren de Scriptaculous el cual hace que desaparezcan los seguidores. Mira esta entrada de Vagabundia que soluciona el problema:
ResponderEliminarhttp://vagabundia.blogspot.com/2010/03/problemas-con-seguidores-usando.html
Indeziisoow, sólo lo he puesto en el post-footer del blog.
La plantilla es de blogger, el estilo del comentario es el de los globos, lo raro es que puse el fondo blanco y el borde negro y se ven los comentarios separados por una linea de punto pero con el fondo de color de la entrada.
ResponderEliminarSaludos Potro…
ResponderEliminarSoy seguidor constante de tu sitio y me parece de los mejores en el área de administración de blog. Cuando creé mi blog, esta fue mi referencia principal. Creo que te escribí en otra ocasión felicitándote por este sitio.
Ahora te escribo por un consejo:
Desde el día de hoy a la hora de hacer un comentario en una entrada, me salen unas extrañas letras en ruso, que por mas que las elimino, me vuelven a salir, dejando como resultado un espacio muy poco estético en el comentario una vez publicado. Por lo que he leído por ahí es un spam. Y al entrar al formato htlm encuentro ese spam, pero lo borro y lo borro, y siempre me sale otro.
Este es mi blog: http://ateismoparacristianos.blogspot.com/
He buscado en la red y hay poca información.
¿Que me recomiendas? ya que no sé si los comentaristas se encontraran también con este problema.
Te agradezco de antemano tus sugerencias.
Noé
pos_ch, recuerda que para aplicar ese estilo primero debes agregar lo que se indica en el estilo anterior, es decir, expandir los artilugios, buscar la línea que se indica y pegar el código. Ya después se agregan los estilos que van antes de ]]></b:skin>
ResponderEliminarEl método debe funcionar pues al menos en la plantilla Picture Window que es la que usas actualmente lo acabo de probar y funciona sin problemas.
hola potro sabes como acer esto para el blog mira esta imagen para saver lo k te digo http://oi51.tinypic.com/k1utsk.jpg
ResponderEliminares un cosa de youtube
Noé Molina,
ResponderEliminarMuy probablemente se trata de un virus pero no en el blog, sino en tu equipo.
Acabo de dejar un comentario de prueba (en el índice de artículos) y no presentó algún caracter extraño ni al redactarlo, ni en la vista previa del comentario, ni en su publicación, lo que indica que no se trata de un problema con el blog.
Aunque sí debo mencionarte que el gadget de contadores que usas (feedjit.com) ha sido reportado numerosas veces por Google como un gadget que aloja adware y malware en los equipos de los usuarios por lo que muchos blogs han sido eliminados al usar estos gadgets.
La recomendación es que uses un antivirus que solucione el problema con los caracteres, y que consideres eliminar ese gadget que te mencioné.
Saludos y gracias por tu comentario.
vale, ahora reviso todo eso que me has dicho a ver si le pongo solución
ResponderEliminarQue nadie me pregunte como lo he hecho porque no tengo ni idea pero al final he conseguido el resultado que quería, ahora solo me queda saber porque no me sale en avatar. Al estilo con globo se le podría añadir un imagen como una tijera sobre la línea inferior como en uno de los ejemplos?
ResponderEliminarPokelevel, uno tal cual no, pero quizá te sirva este enlace:
ResponderEliminarhttp://www.google.com/support/forum/p/youtube/thread?tid=76e9dd439cd1e0e8&hl=es
pos_ch, agrega también el código para el separador de imagen y tendrás ambos estilos en los comentarios.
ultima pregunta potro como creas tus platillas potro por k el arsister ne me gusta
ResponderEliminar
ResponderEliminarGracias por el consejo Potro...
Lo llevaré a cabo inmediatamente...
Te deseo lo mejor para ti y tus proyectos.
Hola mi amigo "El Potro" .. Estaba esperando con mucho anhelo este aporte pero lamentablemente no me sirvió ..
ResponderEliminarIngrese el primer código para poner bordes o imágenes y ahora me aparece el cuadro de Facebook en la zona de comentarios.
Borre el código e ingresé el tercer código con los bordes redondeados y no ahi ningún cambio en el fondo, texto nada...
Ahora de ves en cuando aparece el cuadro de Facebook en la zona de comentarios..
http://www.zuski.com/images/62159187741260291642.jpg
Como puedes ver en la imagen mi comentario es diferente pero si alguna persona quiere ingresar un comentario aparece el cuadro de Facebook y los comentarios de las otras personas no tienen ningún cambio...
Gracias por tu ayuda...!!!
Potro, me ha encantado, muy práctico, y sobre todo sencillo de instalar para mí, ya sabes, aunque tengo muy pocos comentarios me gusta que no se revoloteen entre ellos mismos...:)
ResponderEliminarMuchísimas gracias. Un beso enorme
Hola.
ResponderEliminarEn el Like-Box de mi facebook que tengo en mi blog no aparecen todos los fans que son, solo aparece 83 y en estos momentos hay 90, no se por qué se bloquea en el 83 fans. Y en la página de facebook en el muro también aparecen 83 fans cuando tiene que aparecer 90 en estos momentos. Al lado del muro, en el menú, aparece Wall Paper que es la aplicación de rssgraffiti y cuando se le da click ahí a veces o la mayoría de las veces si aparecen todos los seguidores que son. ¿sabes por qué ocurre esto o qué puedo hacer para solucionarlo?
La aplicacíón Rssgraffiti últimamente no actualiza el contenido de lo que se publica en el blog, ¿esto tiene algo que ver?
Muchas gracias, saludos.
Pokelevel, puedes hacerlo desde el mismo Blogger, limpiando una plantilla y en base a ella la vas modificando.
ResponderEliminarBDJMarcelo,
ResponderEliminarSin duda debe tratarse de otro problema pues los dos primeros métodos son simples estilos CSS que sólo afectan el área de los comentarios, por lo que nada de la sidebar se debe ver involucrado; incluso ya tienes una separación en los comentarios lo que confirma que se trata de otro problema, quizá necesites revisar de nuevo cómo lo has colocado revisando que no elimines nada por error.
Y en el caso de los otros métodos si sólo se ve afectado el cambio en tus comentarios nuevamente es porque el código está mal colocado, o quizá la plantilla ya tiene otras modificaciones en esa área.
Intenta hacerlo de nuevo, si continua el problema dime cuál es la plantilla que usas para que haga una prueba en ella.
Hola Potro. Muchas gracias. Si me funciono conla opcion que me dijiste. Gracias y Suerte.
ResponderEliminarhttp://rockclasico1.blogspot.com
Sofía Serra Giráldez, bastante práctico y sencillo de aplicar. Un beso grande para ti :)
ResponderEliminarMENTE NATURAL DE MODA, probablemente se trate de un problema con tu cuenta de Facebook o mejor dicho, de un problema de Facebook. Ya he escuchado últimamente que hay quienes no les aparecen las estadísticas de Facebook o el enlace para recomendar la página.
Gracias por todo y a seguir trabajando para que tengamos unos blogs muy guapos.
ResponderEliminarHola, Potro! Gusto en saludarte.
ResponderEliminarAunque de vez en cuando me doy siempre mi vueltecita por la ciudad, hacía rato que no dejaba comentarios (creo que desde el año pasado).
Me gustó este post y me parece muy útil. Ya yo tenía implementado el truco que nos enseñaste hace tiempo, de los comentarios del autor en color diferente y también con el número de cada comentario.
Pero de todas maneras, cuando hay varios comentarios seguidos, no se apreciaba la división entre ellos. Ahora le agregueé la línea más sencilla y me quedó muy bonito. Gracias.
Y a propósito, quedó muy bien el nuevo "look" de tu página. Primero, que ahora la página carga más rápido, pues antes ya se estaba volviendo algo pesada y tardaba más.
Además, así más sencilla y con los nuevos colores tiene un entorno más amigable, (visualmente hablando), y no se presta a confusión, con tantas cosas por todos lados.
Te felicito.
Saludos!
Hola Vicky,
ResponderEliminarQué alegría tener noticias tuyas, ya empezaba a creer que habías olvidado la Ciudad :)
Tienes toda la razón, aun cuando se tengan diferenciados los comentarios del autor muchas veces se necesita que todos los comentarios estén debidamente divididos entre sí.
Me da gusto que la nueva imagen del blog haya sido de tu agrado, y a decir verdad justo eso buscaba, que la interfaz fuera más amigable para la navegación y por supuesto acelerar el tiempo de carga.
Gracias por tu visita!
Hola mia amigo "El Potro" ....!!
ResponderEliminarGRACIAS x tu ayuda al parecer fue un error mío ya pude ingresar correctamente los códigos para los comentarios.
Pero no entiendo de el por que aparece el cuadro del Facebook en ocasiones el la parte inferior de los comentarios...
X fa ayúdame con este problemita gracias..!!
http://www.zuski.com/images/13270840991281800868.jpg
Hola Potro . . . Espero Puedas Ayudarme
ResponderEliminarNo me Aparecen las Imagenes de los Avatares
En los Comentarios como en en Este Blog
Antes Tenia una Imagen Para Mis Comentarios
Y Otra Distinta Para los Comentarios Anonimos
No se que He Borrado . . . Pero Ahora ya bo Estan
Agradezco de Antemano tu Ayuda
Un Saludo . . . Gracias
BDJMarcelo, no lo sé, las cuatro veces que he entrado a tu blog y miro la entrada que pones de ejemplo veo todo en su lugar.
ResponderEliminarBricolaje Informatico, entra en Configuración > Comentarios, y donde dice '¿Mostrar imágenes de perfil en los comentarios?' cerciórate que esté marcado en Sí.
Hola Potro . . . Ya He Mirado Eso
ResponderEliminarLa Verdad es que ya he Repasado Todo
Y no Encuentro el Fallo . . .
Antes si Funcionaban
No se Cual es el Problema
Hola Potro . . . Lo he Solucionado
ResponderEliminarPero Solo en Parte
Este es el Codigo que Utilizo
<b:if cond='data:comment.author == data:post.author'>
<div class='author_message-box' expr:id='data:comment.anchorName'>
<div class='message-lbc'/><div class='message-ltc'/>
<div class='message-entry'>
<div class='message-by'>
<b:if cond='data:comment.authorUrl'>
<!-- autor reconocido -->
<b:if cond='data:comment.author == "Bricolaje Informatico"'>
<!-- mis propios comentarios -->
<img class='comenta-avatar' src='https://lh4.googleusercontent.com/_I0uiE6K-4Gc/TLRmTUGGzbI/AAAAAAAAAzA/qaWyRV02wvY/La%20Ultima%20Soluci%C3%B3n.jpg'/>
<b:else/>
<!-- comentarios de los visitantes -->
<img class='comenta-avatar' src='https://lh4.googleusercontent.com/_I0uiE6K-4Gc/TVBO7W6qgmI/AAAAAAAABSc/M4bl4tIP4YE/Wallpapers.jpg'/>
</b:if>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<!-- comentarios anónimos -->
<img class='comenta-avatar' src='https://lh3.googleusercontent.com/_I0uiE6K-4Gc/TLRmb9Bf24I/AAAAAAAAAzQ/iAi0F1ggaI4/Servicio%20Tecnico.jpg'/>
<data:comment.author/>
</b:if>
Pero la Foto en los Comentarios Anonimos no me Aparece
Puedes Detectar Algun Fallo
No se si Puedo Poner la Direccoion de mi Blog
http://www.sharkgalicia.com/
Te Agradeceria Me Echaras un Cable
Un Saludo . . . Gracias
Buenisimo Potro me gusto el tercero y lo agregue enseguida. Gracias
ResponderEliminarPotro, ya he conseguido ponerlo. ¡Muchísimas gracias, eres genial!
ResponderEliminarHola potro.. a mi no me salen el redondito que fue el que coloque
ResponderEliminarBricolaje Informatico, el código está bien, el problema es que habías borrado la imagen de comentaristas anónimos desde Picasa y eso ha hecho que desaparezcan las fotos de quienes habían comentado con es imagen. No hay modo de recuperarla, por eso no se debe borrar las imágenes sin estar seguros que no haya alguna entrada o truco que lo estén usando.
ResponderEliminarLeonardo, seguro que te ha quedado muy bien ;)
martinyfelix, qué bueno que ya está resuelto entonces :)
Sofi_winchester, ¿en cuál blog lo has puesto?
Hola Potro . . . Ya Restaure las Imagenes en Picassa
ResponderEliminarSin Embargo Sigue sin Aparecer La Imagen en los Comentarios Anonimos . . .
Que mas Puedo Hacer , Estoy un Poco Perdido
Un Saludo . . . Gracias
Es en este jeje
ResponderEliminarhttp://seriesupernaturalfan.blogspot.com/
y asi me sale el comentario
http://seriesupernaturalfan.blogspot.com/2011/02/jared-doblara-al-ingles-la-primera.html#comments
Bricolaje Informatico, aunque restaures las imágenes ya no se podrán ver porque la nueva imagen tiene otra URL distinta a la anterior.
ResponderEliminarLo que sucede es que casa comentario se asocia a una URL única que contiene datos tales como el autor, fecha, hora y avatar, y estos datos no se pueden re-escribir. Es por eso que los comentarios que tenían ese avatar ya no mostrarán más el avatar porque fue eliminado y la URL de imagen que tenían ya no existe. Sólo los comentarios nuevos tendrán la nueva imagen que acabas de subir.
Sofi_winchester , lo acabo de probar en esa plantilla y funciona bien, sólo recuerda que no basta sólo con pegar el código antes de ]]></b:skin> sino que también debes agregar los códigos del método anterior que se encuentran expandiendo los artilugios.
ahh ya listo..muchas gracias! :)
ResponderEliminarHe seguido las instrucciones para enmarcar los comentarios, no encontré ]]> para finalizar. No he podido hacerlo.
ResponderEliminarUsa las teclas CTRL + F para localizarlo más fácil.
ResponderEliminarEstá cerca de la etiqueta </head>
Hola Potro . . . Entiendo Todo lo que me Dices
ResponderEliminarSim Embargo Esto no Funciona . . .
"Sólo los comentarios nuevos tendrán la nueva imagen que acabas de subir"
He Borrado Todos los Comentarios del Blog
En los Nuevos Comentarios Aparece la Imagen
Solo en Mis Propios Comentarios
Pero en los Comentarios Anónimos No
Y no se Cual es el Problema
No Caigo de la Burra
Sin duda debe tratarse de un problema con la URL de la imagen, quizá hay algún caracter que está faltando pues si el código lo tienes aun como el ejemplo del comentario atrás entonces no parece ser un error en el código.
ResponderEliminarVerifica que la URL funciona bien, esto lo puedes hacer pegando la URL en la barra de direcciones de tu navegador para que veas si abre bien o no.
También agrega la URL entre comillas dobles en lugar de comillas simples.
Si tampoco funciona así entonces pide asesoría en la entrada donde viste ese truco, quizá ahí hayes con facilidad la respuesta al problema.
Saludos.
Hola Potro . . . He Repasado Todo lo que me has Indicado
ResponderEliminarLas URL Funcionan Correctamente
He Puesto Dobles Comillas
Lo de Pedir Ayuda esta Dificil . . .
Ya que el Blog Donde Saque Esto Ya no Existe
Lo que me Parece Raro es que en mis Comentarios
Si que Aparece la Imagen . . .
Utilizo Este Codigo por que Mi Blog
No Muestra los Avatares Asi Como en Este
El Avatar de Cada Usuario que Hace un Comentario
Cuando Tengas un Minuto Libre
En tu Apretada Agenda . . .
Haz un Post para los que no nos Aparece
La Imagen del Avatar en los Comentarios
Yo ya he Probado de Todo sin Resultados Positivos
Ya no me Enrrollo mas ...
Gracias por la Atencion Prestada
Y por el Tiempo que te he Robado
Seguire Insistiendo . . . Algun Dia lo Conseguire
Un Saludo . . . Gracias
¿Ya probaste con esta explicación de Chica Blogger?
ResponderEliminarhttp://chicablogger.com/blogger-permite-que-muestres-tu-avatar-en-los-comentarios/
Prueba con ello, sino te funciona dime de dónde has descargado la plantilla que usas para probar el código de los avatares.
Saludos.
Tengo Puesto Este Codigo en la Plantilla
ResponderEliminarA Mi no me Funciona . . .
Estos son los Enlaces de la Plantilla
Este es el Sitio Oficial
Pero Tiena las Imagenes Caidas
http://btemplates.com/2008/blogger-template-jeans-2c/
Puedes Utilizar Esta Otra que si Esta Funcionando
http://www.bloggertemplatesfree.com/download-jeans-2c-blogger-template/
Espero con Impaciencia tu Respuesta
Gracias por la Tu Atencion y Ayuda . . . Saludos
Qué lío con esa plantilla Bricolaje :/
ResponderEliminarSin duda es muy bonito el diseño pero la estructura de los códigos es todo un desastre, incompletos y mal distribuidos.
Espero que no pretendas hacerle muchas modificaciones pues tiene bastantes limitantes.
Bueno, después de un par de horas hallé el modo de echar a andar los avatares, pero te comento que estos estarán arriba del nombre del autor ya que como te dije la estructura de esa plantilla no da para mucho.
Activa los avatares como te mencionaba en el comentario #52.
Luego busca este código y agrega lo que está en negrita:
<div class='alt message-box' expr:id='data:comment.anchorName'>
<div class='message-lbc'/><div class='message-ltc'/>
<div class='message-entry'>
<div class='message-by'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
Con eso ya deberán aparecer los avatares.
Hola, quise poner una imagen para separar los comentarios pero por alguna razón no me aparece, ya intenté con todos los códigos que muestras y blogger no me muetra ninguna modificacion, sigue con el disenio estandar. Y no se que hacer ^_^Uu
ResponderEliminarGracias por el tiempo, saludos!
Hola Łĭłĭŧћ,
ResponderEliminarAl parecer has puesto el código después de ]]></b:skin> y debe ser ANTES de ]]></b:skin>
De igual manera la URL de la imagen que has puesto no te servirá pues esa es para mostrar la imagen dentro de Imageshak.
En su lugar usa esta URL:
http://img641.imageshack.us/img641/2540/comentmariposacopia.png
Saludos.
oh gracias!
ResponderEliminardisculpa tantas molestas :P
Disculpa el doble post, pero no... ya lo intente' de nuevo y nada. soy un fraude para esto XD creo que desistire' por el momento antes de que comience a tirar de mi cabello por la frustracion, ni pude separar los comentarios de forma bonita y tampoco consegui' cambiar el icono de blogger jejeje.
ResponderEliminarDe nuevo gracias por tomarte el tiemo
Saludos
Pues no vi que tuvieras el código puesto, sólo una parte del código y estaba nuevamente después de ]]></b:skin> y no antes de.
ResponderEliminarQuizá mañana con más calma quieras intentarlo de nuevo ;)
no, ya me rindo con eso. mejor lo dejo asi antes de que termine arruinando todo. segun yo ya borre' todo el codigo que habia puesto antes de ]]></s:kin ya intente ponerlo despues de, de hecho ya pasie' el codigo por toda la plantilla XD pero no consegui nada, ya mejor que se quede tan y como esta' igual gracias n_n
ResponderEliminar¡Adorable!, nunca dejas de aportar ni el detalle más singular ¿cómo lo logras?.
ResponderEliminarA decir verdad no soy sólo yo, sino mas bien son las inquietudes de los demás lectores que me piden estos detalles, y que al final parece que sirve a muchos la información :)
ResponderEliminarHola.
ResponderEliminarPerdona que la pregunta se salga un poco del tema pero como veo que controlas esto de los comentarios en los blogs me tomo la libertad de consultarte. ;-)
En primer lugar gracias por el truquillo de la rayita, me ha funcionado a la primera y los comentarios se leen mucho más claros. ;-)
Ahora la consulta, acabo de preparar un nuevo blog con Blogger y la plantilla inicial (de Blogger) ordenaba los comentarios de antiguo (arriba) a nuevo (abajo). Perfecto es lo normal y lo que quiero. Pero en algún momento algo se ha roto y ahora los comentarios se ordenan de nuevo (arriba) a antiguo (abajo), haciendo muy incómoda la lectura.
¿Sabes como puede cambiarse el orden en el que se ordenan los comentarios?
Muchas gracias por tu tiempo.
Un cordial saludo.
*los comentarios en cuestión están en: http://asoproinvi.blogspot.com/2011/02/entrada-de-prueba-numero-01.html#comments
Hola Luis Alf,
ResponderEliminarLos comentarios en tu blog los veo bien, es decir, el primero que se muestra (arriba) es el más antiguo y fue hecho a las 09:48, luego el más reciente queda abajo y fue hecho a las 09:55
Esa es la forma normal con la que se acomodan los comentarios, si alguien hace otro comentario quedará más abajo por ser el más reciente.
Saludos y enhorabuena por tu nuevo blog!
Muchas gracias!
ResponderEliminarSí, la cosa es que finalmente lo arreglé.
Desinstalé la plantilla, instalé otra y luego volví a instalar la inicial.
Por arte de magía se arregló.
Muchas gracias de nuevo por tu tiempo e interés. ;-)
Hola potro, por acá molestando nuevamente, quisiera saber si le puedo cambiar a mi blog el sistema de comentarios, es decir que cuando alguien quiera comentar mis post sólo deban escribir el nombre y una cuenta de correo, de ser posible le agradecería su colaboración y muchas gracias de antemano.
ResponderEliminarHola Carlos,
ResponderEliminarBlogger sólo tiene las opciones de comentar como Anónimo, con Nombre y URL, con OpenID, y con las cuentas de Google.
Cualquiera de estas opciones están disponibles en Configuración > Comentarios.
Saludos.
Yo tambien me estoy peleando con lo de la imagen de mi avatar en los comentarios. Para comentar no me sale pero para seguir blogs si.
ResponderEliminarAhora lo del post #68 no he podido hacerlo porque no aparece esa linea. Tenia ya activados los avatares en los comentarios y no se que más. El código en negrita del comentario #70 ya lo tenia puesto y he puesto dos imágenes de mi avatar que eran las que borré. A ver si podemos rescatarlas.
En tu plantilla no debe ser necesario agregar ningún código extra para los avatares pues las plantillas nuevas ya lo tienen incluido y de hecho sí aparecen en tu blog, el problema es que tu avatar es el que no se ve.
ResponderEliminarEso pudo ser causado porque eliminaste tu foto en el álbum de Picasa y como Blogger ya no encuentra la imagen no la muestra.
No hay manera de recuperar una imagen borrada, sólo puedes subir una nueva y los comentarios nuevos ya deberán tener la imagen que subiste pero sólo en los comentarios nuevos, en los antiguos seguirá sin verse.
Otro nuevo detalle que marca la diferencia.
ResponderEliminarComentarios ordenados y con el borde redondito.
Todo un lujo y como siempre facilísimo de hacer gracias a tus explicaciones.
De nuevo mil gracias :D
Gracias a ti por tu visita!
ResponderEliminarYa está todo arreglado, pues vaya lio con el avatar, lo borré porque veia que en albunesweb picasa me aparecia triplicado y el que estaba en una carpeta que no me cuadraba que era donde sube todas las imagenes lo borré. Que susto jejeje
ResponderEliminarMe gustaba el cartel que estoy buscando esto por un rato, pero nadie aquí en Brasil había hecho este post. Gracias! Ahora yo soy su seguidor.
ResponderEliminarpos_ch, esa carpeta a todos nos parece extraña, igual a mí me lo parecía cuando la descubrí e incluso también borré las fotos que pensé que estaban repetidas y ahí fue donde aprendí de mi error. Pero bueno, ahora ya sabemos que ahí se guardan todas las fotos y que no están repetidas sino que una es para el perfil de Blogger, otra para el perfil en los seguidores y otra parece ser para el perfil en los comentarios ¡Vaya lío!
ResponderEliminarGracias 1001 Faces, saludos hasta Brasil y bienvenido a Ciudad Blogger!
ResponderEliminarPotro..
ResponderEliminar1 pregunta...
Como puedo agregar esta caja de comentarios en un determinado boton del menu...
por favor visita mi blog para que me brindes una ayuda.
http://huanucoestacambiando.blogspot.com/
en el boton participa del cambio.
Como puedo poner en ese boton(participa del cambio) la caja de comentarios.
Agradezco tu respuesta.
Gracias
Edita la página, abajo verás que hay un link que dice 'Opciones de entrada', haz click ahí y donde dice 'Comentarios de los lectores' marca la casilla 'Permitir'.
ResponderEliminarHola El Potro, ya estoy aquí molestándote de nuevo jeje
ResponderEliminarEs una duda más o menos relacionada con esto, con los comentarios...
Cómo puedo hacer para que en el footer dónde pondría "Publicado por..." y la hora ponga como tú, entradas relacionadas?
No es ninguna molestia ;)
ResponderEliminarEn esta entrada se explica cómo poner las entradas relacionadas.
Saludos Potro:
ResponderEliminarAñadi a mi blog el de líneas curviadas. Y me quedo súper bien. Necesito saber si me puedes ayudar a enumerar los comentarios como tu lo tienes aquí... y además si puedo añadir una imagen para las personas que comentan "Anónimo" y eso. Gracias de antemano por la ayuda.
Felicidades por tu blog.
Mi blog: http://tvboricuausa.blogspot.com
Hola TVboricua.USA,
ResponderEliminarPara agregar una imagen a los comentaristas Anónimos agrega esta parte en tu plantilla:
#comments-block .avatar-image-container.avatar-stock {
background: #3B5998 url(URL de la imagen) no-repeat 50% 50%;
}
Para numerar los comentarios mira esta entrada de Oloblogger:
http://oloblogger.blogspot.com/2010/03/numerar-comentarios-en-blogger.html
¡Saludos!
Bueno Potro...:
ResponderEliminarYa añadí la imagen y las numeraciones. Al principio creí que bregar con códigos html era súper complicado pero ya veo que no. Eh, me gustaría que entrarás al blog para que me digas si quedó bien y eso.. Tú sabes más que yo jejeje. Para no hacer SPAM sabes como acceder desde el perfil.
Ah, y estoy navegando por tu "Mapa del Sitio" y haciendo un montón de trucos. Mil Gracias de verdad. Saludos desde Puerto Rico.
Te está quedando todo muy bien :)
ResponderEliminarQué bueno que estés encontrando útil la información que hay aquí.
¡Saludos hasta Puerto Rico!
Hola Potro
ResponderEliminarSaludos
estoy casi loco con las imagenes en los comentarios, ¿como puedo hacer para colocar una imagen cuando quien hace los comentarios es "Anonimo" y esta me salga bien alineada a la izquierda?.
Tambien quisira cambiar la imagen de blogger que me sale cuando quien comenta está logeado pero no tiene imagen de perfil?...
Te agradezco, pues he itentado varias cosas pero no funcionan ...
Muchas gracias
Hola Agua y SIG,
ResponderEliminarPara agregar una imagen a los comentaristas Anónimos y sin foto agrega esta parte en tu plantilla:
#comments-block .avatar-image-container.avatar-stock {
background: #3B5998 url(URL de la imagen de Anónimos) no-repeat 50% 50%;
}
#comments-block .avatar-image-container img {
background:#333 url(URL de la imagen de fondo) no-repeat 50% 50%;
}
¡Saludos!
Saludos Potro nuevamente...
ResponderEliminarAñadi el marco curviado a los comentarios, la númeración de comentarios de la entrada de Oloblorrer que me brindaste y lo de la imagen para los comentaristas anónimos.
Pero, ahora el gadget de seguidores no se ve... Osea sale el gadget pero vacío sin las imagenes de los seguidores. Me podrías ayudar...
http://tvboricuausa.blogspot.com
Gracias de antemano... por este Gran Cuidad.
Eso no es por los cambios que mencionas sino porque añadiste Scriptaculous para algún otro truco y Scriptaculous tiene ese problema con la lista de seguidores.
ResponderEliminarMira esta entrada para solucionarlo.
Hola, Potro!!!
ResponderEliminar¿Cómo estás?? Tengo una dudilla, ¿Tienes algún post donde enseñes la manera de poner calificaciones a los comentarios? Kisiera poder añadir a mi blog pulgares para calificar cada comentario, como en youtube y otros. Si aún no lo tienes, creo ke ya te di tema para otro post =P, ojalá puedas ayudarme.
Perdón por la molestia y te mando mega besote =)
Hola Thor,
ResponderEliminarDebajo de:
.comment-timestamp {
Agrega esto:
color: #00FF00;
text-align: right;
El gadget de seguidores sólo puede personalizarse de esa forma, en realidad es lo único que se puede personalizar pues no tiene mayores opciones.
Hola Merlina,
ResponderEliminarNo es ninguna molestia, pero en Blogger no hay esa opción para valorar los comentarios. Eso ya sería algo que directamente Blogger tendría que implementar para que sea posible para todos.
¡Gracias por el mega besote!
:D
bueno...pues siguiendo tus paso me he preparado un dibujillo pa separar los comentarios de mi blog, queda guapisimo la verdad, gracias crack, sigo por aqui a ver que "tuneo" ahora jejeje
ResponderEliminarNi modo, =( Muchas gracias por responder!! Besito =)
ResponderEliminarJosico, claro que sí, puedes tomar de aquí todo lo que necesites ;)
ResponderEliminar¡Hola!
ResponderEliminarEnhorabuena por el sitio y por el truco, funciona muy bien.
He estado mirando si a alguien le ocurre lo mismo, pero creo que no, así que mejor pregunto.
He probado el truco y me gusta mucho cómo queda con la imagen, pero aparece también una línea (igual que la línea de los separadores), y queda recargado. ¿Hay alguna manera de que no aparezca?
La dirección: http://progresseninadequadament.blogspot.com
Muchas gracias de antemano =)
Hola Míryam,
ResponderEliminarLo que sucede es que tu plantilla ya tiene separadores definidos en los comentarios. Para quitarlos busca esta parte en tu plantilla y elimina lo que está en negrita:
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
¡Saludos!
Efectivamente, era eso. Ya aparece tal como quería. ¡Muchísimas gracias!
ResponderEliminarNos leemos :)
Un saludo
Buen dia Potro
ResponderEliminarAqui Ricardo do top501.blogspot.com
Estoy confeccionando una web y tengo un gran problema quando quiero incluir textos como archivos .GIF o .JPEG, no me salen nítidos y brillantes ni bien definidos.
Puedes decirme con que programa puedo hacer estos textos, por favor?
Estoy usando Photoshop pero no me salen bien
Un abrazo
Buen día TOP 501,
ResponderEliminarNo sé mucho de diseño, pero cuando yo hago textos en Photoshop los guardo en formato PNG, ese formato conserva más nitides en los textos.
Gracias Potro
ResponderEliminarVoy a probar y te digo el resultado
Abrazos
potro la imagen que puse no funciona, lo hice tal y como tu lo describes, quien sabe que podrá estar fallando!.... la imagen es de mi blog solo que le copie la url y la inserte en al campo que decias!...
ResponderEliminarmira esta es la imagen que puse y no me funcionó, será por lo que es .png????
ResponderEliminarhttp://2.bp.blogspot.com/-m5DCiKOUsqc/Tajl7wDFYoI/AAAAAAAAAes/dyrD8T1OlH0/s1600/linea.png
Lo que pasa es que al poner el código has eliminado una llave de cierre del código que estaba arriba.
ResponderEliminarTienes el código de esta forma:
.post-title {
margin: 0;
padding: 10px;
text-align: center;
background-color: transparent;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
#comments-block .comment-footer {
background-image:url(http://2.bp.blogspot.com/-m5DCiKOUsqc/Tajl7wDFYoI/AAAAAAAAAes/dyrD8T1OlH0/s1600/linea.png);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
Y debe ser así:
.post-title {
margin: 0;
padding: 10px;
text-align: center;
background-color: transparent;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
}
#comments-block .comment-footer {
background-image:url(http://2.bp.blogspot.com/-m5DCiKOUsqc/Tajl7wDFYoI/AAAAAAAAAes/dyrD8T1OlH0/s1600/linea.png);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
Guauuuu quien lo hiba a creer !! jejeje gracias Potro, sos mi heroe!!!!... Me sirvio de Muchooo... Gracias.. por cierto soy el mismo Aquarella solo que cambie mi imagen jijii ;) abrasos!...
ResponderEliminarVale, entonces damos por solucionado el problema ;)
ResponderEliminarHola Potro, ¿como te va?. Ojalá me puedas ayudar, resulta que los comentarios en mi blog aparecen montados sobre "Quizas tambien le interese", el artilugio de Link Within, ya lo he instalado dos veces y siempre me ocurre lo mismo.
ResponderEliminarTe agradezco mucho tu ayuda, este es mi blog
http://asomadaenlaventana.blogspot.com
Hola maria candel,
ResponderEliminarEntré a tu blog y lo veo todo en orden, supongo que ya lo has resuelto :)
¡Saludos!
Hola Potro,gracias por entrar en el blog.
ResponderEliminarNo se si es desde mi equipo solamente, pero cuando le das a otra entrada, de las que se anuncian en"Quizás tambien le interese" es cuando se ven los comentarios montados sobre las imagenes. Te agradezco si me puedes sacar de la duda.
Saludos y gracias otra vez.
Gracias por la aclaración, lo que sucede es que había entrado desde Google Chrome y lo vi todo bien, así que ahora entré desde Chrome, Opera, Safari, Firefox e Internet Explorer y en todos se ve bien menos en Internet Explorer que supongo que es el navegador que usas.
ResponderEliminar¿Recuerdas si hiciste alguna modificación en el blog antes de que eso sucediera?
Si, efectivamente Potro, es Internet Explorer el que uso y la ultima modificación que hice fue la instalación de Link Within, y a raiz de eso se generó el problema.
ResponderEliminar¿Será que no lo instalé bien? ¿tienes alguna recomendación para esto?
Muchas gracias por tu ayuda.
http://asomadaenlaventana.blogspot.com
Pues no sé como lo hayas instalado, usualmente sólo se agrega el código en un gadget y luego ese gadget se arrastra debajo de las entradas. Yo lo acabo de probar igual en una plantilla como la que usas y no tuve problemas en Internet Explorer, por eso preguntaba si había algún otro cambio que hayas hecho en esa área.
ResponderEliminarMuchas gracias por tu ayuda!!! Kedó a la primera y te cuento ke sí keda el conteo normal, no empieza de cero!!
ResponderEliminarHoy tengo otra duda y me da pena pornerte a trabajar pero ya lo intenté todo y no me sale =( En esta plantilla me aparece la hora sin el icono de eliminar justo debajo del nick, algo le moví porke sí me aparecía el íconito y ya no =( además de ke no me keda el código de tu post "Comentarios del autor en color diferente", ya lo puse y no me sale como kiero =S aaaay perdón por molestarte pero realmente necesito de tu asesoría!!
Ash... sí me vas a entender si no te doy completo el dato =S. La hora aparece bajo el nick y kiero ke aparezca abajo del texto como en tus comentarios =P . La plantilla ya tiene el código del post de Comentarios.... pero aun asi no pasa nada. es por eso ke te pido ayuda =D
ResponderEliminarHola Merlina,
ResponderEliminarSobre los comentarios del autor con color diferente no sabría decirte pues no conozco esa plantilla y por lo que he visto es muy distinta en estructura a las plantillas 'estándar'.
Para recuperar el icono para borrar y mover la fecha de los comentarios expande los artilugios y busca este código:
<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/></div>
Córtalo y ponlo justo debajo de este código:
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
Pero ojo, ambos códigos aparecen dos veces, en ambos códigos debes hacer lo mismo. Es decir, busca el primer código y pégalo donde te he indicado, luego busca un poco más abajo de nuevo el primer código y de nuevo lo pegas un poco más abajo de otro que hay cerca de él.
¡Saludos!
Hola Potro, puse el último de los modelos y no se pone el fondo :/.
ResponderEliminarPosiblemente es la plantilla que usas, estos métodos están basados para plantillas oficiales de Blogger, cualquier otra personalizada puede contener diferentes códigos.
ResponderEliminarHola Potro!!
ResponderEliminarEsto erajusto loque buscaba,
yalo puse enlos comentarios de mi blog
y me gusta mcho el resultado.
Otra pregunta, para poner una línea divisoria entre los post y la sidebar, como lo haría?
Saludos
MªJosé
Hola MariajoyAndrea, ¿en cuál blog quieres hacerlo?
ResponderEliminargracias por tus aportaciones,son muy valiosas
ResponderEliminarsaludos
Hola el potro!!
ResponderEliminarYa te escribí en esta entrada pero ahora no veo el comentario.
Puse los separodoes en los comentarios y han desaparacido del blog, me imagino que habrá sido por los problemas de ayer con bloguer.
También quería poner una línea para dividir los post de la sidebar, podría hacerlo?
Mi blog http://nancyesunica.blospot.com/
Gracias
Saludos
MªJosé
Debe ser por los problemas que tuvo Blogger, así que habrá que ponerlo de nuevo.
ResponderEliminarPara poner un borde en esa área busca esta línea:
.main-inner .fauxcolumn-right-outer {
Debajo de ella agrega esto:
border-left:1px solid #000;
padding-left:10px;
Saludos.
Gracias Potro eres un crack ,me ha quedado muy bien aunque me gustaría cerrar abajo con una línea horizontal (no sé si me explico)
ResponderEliminary también me gustaría saber si puedo cambiar el color de fondo de la sidebar.
Muchísimas gracias, tu blog me está ayudando mucho.
Saludos.
MªJosé
Probablemente agregando esto debajo de lo que añadiste funcione:
ResponderEliminarborder-bottom:1px solid #000;
Sobre el color de fondo no lo sé, me parece que cuando se crea la plantilla en el Diseñador de plantillas se puede hacer eso.
Saludos!
Lo he probado y funciona perfectamente,
ResponderEliminaresa línea cierra lo que es la sidebar,
puede agregarse algún código para que cierre también el post, es decir una línea horizantal desde el post hasta la sidebar.
Mil gracias.
No sé qué tan bien quede pero prueba poniendo debajo de esta línea:
ResponderEliminar.main-inner .fauxcolumn-center-outer {
Esto:
border-top:1px solid #000;
Querido Potro,
ResponderEliminarYa ando de nuevo por aquí, antes de meterme en un lío te pregunto.
Yo quisiera que la imagen estuviera más pegada, o más centrada con respecto a quien la ha escrito,
El texto justificado porque el comentario me parece que queda un poco de pena.
La fecha a la derecha
Y cambiar un poco lo de la zona de número de comentarios para que se vea dónde empiezan....
Y es que en la plantilla tengo mil sitios donde pone comment y no sé si añadir este consejo tuyo o tengo que retocar lo que ya está, así que de momento, sólo he incluido una imagen separadora.
Gracias, como siempre y un abrazo enorme
Ay, mi Potro, que me he metido en otro lío,
ResponderEliminarAhora se me descuadra el formulario para dejar comentarios al meter esta imagen ¿?
Más besitos
Bueno,
ResponderEliminarYa arreglé el formulario....mil perdones....pero lo demás, lo dejo en pié.
Bss a montones
Hola Patricia,
ResponderEliminarLa imagen del separador puede ponerse ya sea a la izquierda, al centro (como está ahora) o a la derecha, si quieres que esté más cerca del nombre del autor puedes ponerla a la izquierda, sólo cambia esto:
background-position:center bottom;
Por esto:
background-position:left bottom;
Para que la fecha del comentario esté a la derecha entonces debajo de esta línea:
.comment-timestamp { /* Fecha de los comentarios */
Agrega esto:
float:right;
Y para que los comentarios esté justificados agrega debajo de:
.comment-body {
Esto:
text-align:justify;
¡Besos!
Muchiiiiiiisisisimas gracias, mi querido Potro,
ResponderEliminarComo ves voy mejorando, lo cual hace peligrar tu existencia porque se me ocurren aún cosas más dislocadas.
No me refería a la imagen que separa un comentario de otro, me refería a la foto que nos identifica, yo creo que queda un poco separada de más.
Otra cosa, ¿Puedo cambiar la fecha de color?. Lo pongo pero debe ser que no es el sitio correcto porque no me hace ni caso.
Y, se me ha ocurrido otra idea, ¿Habría la posibilidad de que saliera el comentario y debajo la respuesta, sin necesidad de que fuera en orden a fecha?, y todo esto, cada conjunto de comentarios, dentro de un marco?.
Ya, ya, te estoy viendo....en bendita hora, pero tu eres el maestro....Y sin ti, la nada
Un abrazo enorme
Jajaja, eso es bueno, que mejores y a la vez eso te lleve a querer hacer cosas más complejas.
ResponderEliminarSin embargo por el momento lo de el orden de los comentarios no creo que sea posible, al menos no hasta que Blogger habilité alguna configuración para mostrarlos de esta forma pues hasta ahora todos los blogs (incluyendo WordPress) acomodan los comentarios no por grupo sino por fecha de publicación.
El color de la fecha debería ponerse debajo de esta línea:
.comment-timestamp {
Ahí agrega:
color:#000;
Si eso no resultara entonces arriba de esa primera línea agrega esto:
.comment-timestamp a {color:#000;}
En cuanto a la distancia del avatar con el contenido de los comentarios sí se puede reducir. Sólo busca este código:
.comment-author {
background:url("#") no-repeat 2px .35em;
margin:.5em 0 0;
padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:20px;
font-weight:bold;
}
.comment-body {
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:0;
padding-left:20px;
text-align:justify;
}
Ambas líneas en negrita son la distancia que debes modificar, quizá con 10px quede bien pero ya tú podrás modificarlo a tu gusto ;)
¡Besos!
Nuevamente Gracias, Potro por toda la ayuda recibida, mis páginas no serían lo que hoy son sin tu ayuda, gracias, gracias, gracias. Tumbas de Famosos
ResponderEliminarhey potro y es posible eliminar la papelera que aparece? para eliminar los comentarios?
ResponderEliminarsaludos
Julia Letrán, al contrario, gracias a ti por tu visita y tu amable comentario!
ResponderEliminarMCarlitooH2, sí es posible pero también se ocultaría la fecha de los comentarios ya que comparten el mismo código. Si quieres hacerlo agrega debajo de .comment-timestamp { esto:
display:none;
aah, ok entiendo mejor lo dejare asi, prefiero conservar la fecha.
ResponderEliminarsaludos y gracias de todas formas
Otra peguntita más: Viste las fotos que podes poner a los costados del blog, en mi caso a la derecha, están muy separadas {una abajo de la otra}¿como hago para ponerlas más juntas?
ResponderEliminarUn beso & gracias.
Es la separación normal de los gadgets. Puedes subir un poco el segundo gadget si lo deseas, sólo agrega ante de ]]></b:skin> esto:
ResponderEliminar#Image2 {margin-top:-20px;}
Me encantó, muchísimas gracias :).
ResponderEliminarHola Potro! Qué genial haber llegado a tu blog! Mirá, estoy tratando de poner la imagen (barra separadora) pero me queda al final y encima del cuadro donde están hechos los comentarios de prueba. No consigo colocarlos entre cada uno. Bueno, espero puedas ayudarme cuando tengas un tiempito. Te agradezco mucho! Reién estoy comenzando a armar el blog y sé que con tu ayuda como con la de otros blogs amigos tuyos me van a ayudar a que quede atractivo. Gracias por ayudar y explicar a quienes recién comenzamos. Un abrazo!
ResponderEliminarHola TDAH Campana, ¿en dónde lo has puesto para que pueda echarle un vistazo?
ResponderEliminarExcelente!!, mil gracias Potro, ahi la llevo jejeje XD
ResponderEliminarSalu2!
Gracias por tu visita y comentario!
ResponderEliminarbuenas potro, yo de nuevo, estoy mejorando poco a poco el blog, me decante por el estlo de ondo gris sin bordes pero al hacer todosl os pasos al final me da error como diciendo que no puedo poner un 0 S: perdon por las molestias jeje
ResponderEliminarHola, ¿cómo es el código que estás poniendo?
ResponderEliminarya está! esque como puse el primero k tu tenias antes no me dejaba, siempre lo quitaba he intentaba poner en otro en vezde guardar antes hehe muchas gracias potro, ahora a rediseñar un poco
ResponderEliminarHola Potro, nuevamente soy yo por aqui con un pequeño inconveniente, hice lo de los comentarios, pero fijese que la imagen o avatar se me fue a la derecha y esto impide que el numero no se vea. Como hago para que esa imagen del comentario se vaya a la izquierda. Gracias
ResponderEliminarHablo de la imagen o avatar de quien comenta, no la del icono superior.
ResponderEliminarMI BLOG
Hola Gilberto,
ResponderEliminarPuede ser porque esa plantilla tiene especificado que el avatar aparezca en del lado derecho. Podría solucionarse eliminando esta parte:
.avatar-image-container{background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/TLlJUqSaolI/AAAAAAAAEq4/qpgAHAOe9x0/s1600/comment-avatar.jpg);width:32px;height:32px;float:right;margin:5px 10px 5px 5px;border:1px solid #ddd;}
Aparece dos veces, ambas se debe eliminar.
Saludos.
Gracias Potro, la imagen se coloco al lado izquierdo, pero el nombre de la persona quedo debajo de la imagen, como hago para que el nombre se coloque al lado de la imagen. Saludos
ResponderEliminarMI BLOG
disculpa, y como hago para colocar la fuente que tienes en tus numeros y ese grosor.
ResponderEliminarCambia esta línea:
ResponderEliminar.avatar-image-container img{width:32px;height:32px;}
Por esta:
.avatar-image-container img{width:32px;height:32px;float:left; padding-right:10px;}
El grosor del texto se agrega así en el área que deseas:
font-weight:bold;
Saludos.
Gracias Potro por su apoyo y felices vacaciones.
ResponderEliminarPor nada ;)
ResponderEliminarY gracias!
Hola!
ResponderEliminarHe probado a poner el 2º estilo. He seguido los pasos pero no me aparece, ¿que puedo hacer?
Gracias de antemano
Hola Lovix, ¿en cuál blog lo has puesto?
ResponderEliminarLo puse en este: http://winx-lovely.blogspot.com/
ResponderEliminarCuando has puesto el código has eliminado la llave de cierre del código que estaba antes, es por eso que no se aplican los cambios:
ResponderEliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Ya funciona. Gracias!
ResponderEliminarHola El Potro, quería poner el último estilo (el del recuadro) en mi blog "El Lado Oscuro" pero no he sido capaz. He copiado los pasos de arriba y luego el código de abajo (como especificas arriba), al darle en Vista Previa para ver como ha quedado me sale este mensaje:
ResponderEliminarNo se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:loop" must be terminated by the matching end-tag "".
Error 500
No entiendo mucho de esto y bueno, no sé cual es el fallo. Mi plantilla es una de las normales de blogger. Un saludo y gracias por tantos tutoriales, son una maravilla.
Hola Esthervampire,
ResponderEliminarEse mensaje indica que una parte del código (la que se agrega al expandir los artilugios) no ha sido colocado correctamente.
Revisa de nuevo que estén los códigos que se mencionan y que lo pongas justo en el lugar indicado.
Saludos!
Gracias por este tutorial, eres muy amable al compartir tu conocimiento. Muy buena explicación.
ResponderEliminarGracias Liliana, te agradezco tu comentario.
ResponderEliminarHola potro, genial el codigo , solo tengo un problemita, se me salen del margen los comentarios, a ver si me puedes ayudar, este es el blog de pruebas con los comentarios
ResponderEliminarGracias
http://dolceviaje.blogspot.com/2011/03/machu-picchu.html
Hola admin,
ResponderEliminarDe entrada hay unos códigos que pusiste mal, los pusiste antes de <div id='head'> y por eso se ven arriba del blog.
Esos ponlos antes de ]]></b:skin> con eso se deberá arreglar.
10 puntos potro!!!!!!
ResponderEliminarera eso
Gracias genio!!!!
Que tal potro me podrías ayudar, quise poner la opción 3 de los comentarios pero me aparecen las imágenes de perfil 2 veces, como hago para quitar esto? Te dejo la dirección de mi blog de pruebas
ResponderEliminarhttp://pruebasblogasotras.blogspot.com
Gracias.
Probablemente repetiste algún código. Verifica que no tengas dos veces esta línea, si la tienes elimina una de ellas:
ResponderEliminar<data:comment.authorAvatarImage/>
Gracias Potro era eso.
ResponderEliminarEsto tambien quedó, a mi humilde modo de ver, de película, así que un millón de gracias....
ResponderEliminarTe ha quedado muy lindo :)
ResponderEliminarHola Potro, sólo comentaba para agradecerte por la ayuda prestada con mi blog, asimismo gracias a este post y los comentarios he podido solucionar la visualización de los avatares en los comentarios (en chicablogger).
ResponderEliminarAunque no he podido colocar una imagen en los comentarios anónimos (mi plantilla no tiene esos códigos) :(
Saludos.
Hola nuevamente Potro, me acabo de dar cuenta de otro importante detalle: ahora los emoticones dejaron de funcionar, por medio del formulario de contacto te diré los detalles.
ResponderEliminarSaludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarLos comentarios de blogger siempre me han resultado complejos. Ahora bien, para eso te tenemos a ti ¿no? jajaja
ResponderEliminarVamos a ver. Echa un vistazo a mis comentarios:
http://www.elultimoduelo.com/
Si te fijas, el nombre del que comenta está enmarcado en un fondo marron claro. ¿Cómo lo quito? Lo quiero transparente como el oxigeno.
Gracias potro.
Listo, trasteando lo solucioné. Pero me sigue quedando una duda.
ResponderEliminarSi te fijas mis comentarios están "movidos" hacia la derecha. Me gustaría ponerlos como los tuyos ocupando todo el ancho del cuerpo de la entrada.
¿es posible?
Gracia potro.
Hola Marcelo Camacho,
ResponderEliminarRecuerda que el formulario de contacto es para temas que aún no han sido publicados en el blog, o para otro tipo de situaciones; para problemas con una entrada publicada debe hacerse por este mismo medio.
Para ponerle una imagen a los comentaristas anónimos sólo tienes que poner antes de ]]></b:skin> esto:
#comments-block .avatar-image-container.avatar-stock {
background: url(URL de la imagen) no-repeat 50% 50%;
}
Sobre los emoticones no sé qué modificaciones hayas hecho. Deja un comentario en esa entrada explicando qué fue lo último que hiciste antes de que surgiera el problema.
Saludos.
Hola Mayte,
ResponderEliminarSi usas una plantilla del Diseñador y quieres eliminar el separador de comentarios que ya trae la plantilla entonces busca este código y elimina lo que está en negrita:
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
Hola William,
ResponderEliminarAgrega en los estilos este código:
#comments-block.avatar-comment-indent {
margin-left: 0 !important;
}
Con eso deberá eliminarse ese margen de la izquierda.
Saludos.
Buenas Potro, todo solucionado... muchas veces la solución es más simple de lo que parece y está en nuestras narices, tan sólo es cuestión de analizar detalladamente.
ResponderEliminarGracias nuevamente, saludos amigo!
Eres un genio!
ResponderEliminarGracias Potro, siempre solucionando mi incultura de código jajaja
Un fuerte abrazo.
Marcelo Camacho, tienes toda la razón :) saludos!
ResponderEliminarWilliam Manney, otro abrazo para ti.
Este comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola Potro!
ResponderEliminarPerdona que no había encontrado antes tu comentario...ya lo he visto, voy a ponerlo en practica mañana y te cuento, Gracias y perdona el borradero de comentarios, pero no veía el último.
Buena noche!
No hay problema, que todo salga bien :)
ResponderEliminar