02 febrero 2012

Enumerar y dar estilo a los nuevos comentarios


Hace un tiempo, Blogger instaló los nuevos comentarios anidados en los blog pero al principio fué un quebradero de cabeza para todos los blogueros.
Ya parecen solucionado todos esos problemas con scriptaculous, explorer, gadgets de Twitter etc....

La mayor parte de los que tienen este sistema colocado en sus blog no llevan concretado un css definido por parte de blogger, así que es hora de enumerar y darle estilo a esos comentarios.

Sin el Css los comentarios tendrían esta apariencia:

Y aplicándole todo el Css con numeración y estilo, sería así estando recogidos los subcomentarios:


Y esta vista sería viendo todos los comentarios y subcomentarios:


Para aplicar el CSS, (antes que nada, copia de seguridad de la plantilla), nos dirijimos a Edicción de Html, buscamos (f3 o en su defecto ctrl+f), ]]></b:skin> y a continuación pegamos el código:
<style type='text/css'>
.comments {clear: both;width:90%; margin-top: 10px; margin:0 10px 0 25px;}
.comments .comments-content{font-size: 13px;margin-bottom: 16px;}
.comments .comment .comment-actions a {border:1px solid #DDD;border-radius:4px;text-shadow:0 1px 1px #fff;text-decoration:none;font: bold 11px Sans-Serif;padding:3px 7px;margin-right:5px;white-space:nowrap;vertical-align:middle;
background: #f7f7f7;transition:all .5s linear;-o-transition:all .5s linear;-moz-transition:all .5s linear;-webkit-transition:all .5s linear;}
.comments .comment .comment-actions a:hover {text-decoration:none;border: 1px solid #AAA;border-bottom-color: #CCC;border-top-color: #999;-webkit-box-shadow: inset 0 1px 2px #aaa;-moz-box-shadow:inset 0 1px 2px #aaa;box-shadow:inset 0 1px 2px #aaa;background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);background:-moz-linear-gradient(top, #E6E6E6, gainsboro);background:-ms-linear-gradient(top, #E6E6E6, gainsboro);background:-o-linear-gradient(top, #E6E6E6, gainsboro);}
.comments .comments-content .comment-thread ol {list-style-type:none;padding: 0;text-align: left;}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comment-block {border-bottom:1px solid #ccc;padding-bottom:10px;}
.comments .comments-content .inline-thread {padding: 0.5em 1em;}
.comments .comments-content .comment-thread {margin: 8px 0px;}
.comments .comments-content .comment-thread:empty {display: none;}
.comments .comments-content .comment-replies {background: #f4f4f4;margin-top: 1em;margin-left: 36px;}
.comments .comments-content .comment {margin-bottom:16px;padding-bottom:8px;line-height:1.5em;}
.comments .comments-content .comment:first-child {padding-top:16px;}
.comments .comments-content .comment:last-child {border-bottom:0;padding-bottom:0;}
.comments .comments-content .user {font-style:normal;font-weight:bold;}
.comments .comments-content .datetime {margin-left:6px;font-size:9px;color:#c1c1c1;}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {margin:0 0 8px;text-align:left !important;}
.comments .comments-content .comment-content {}
.comments .comments-content .owner-actions {position:absolute;right:0;top:0;}
.comments .comments-replybox {border: none;height: 250px;width: 100%;}
.comments .comment-replybox-single {margin-top: 5px;margin-left: 48px;}
.comments .comment-replybox-thread {margin-top: 5px;}
.comments .comments-content .loadmore a {display:block;border:1px solid #DDD;border-radius:4px;text-align: center;
text-shadow:0 1px 1px #fff;text-decoration:none;font: bold 20px Sans-Serif;
padding:3px 7px;margin-right:auto;margin-left:auto;margin-top:-30px;max-width:180px;white-space:nowrap;
vertical-align:middle;background: #f7f7f7;-o-transition:all .5s linear;-moz-transition:all .5s linear;-webkit-transition:all .5s linear;}
.comments .comments-content .loadmore a:hover {border: 1px solid #AAA;border-bottom-color: #CCC;border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;-moz-box-shadow:inset 0 1px 2px #aaa;box-shadow:inset 0 1px 2px #aaa;background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);background:-moz-linear-gradient(top, #E6E6E6, gainsboro);background:-ms-linear-gradient(top, #E6E6E6, gainsboro);background:-o-linear-gradient(top, #E6E6E6, gainsboro);}
.comments .comments-content .loadmore a:hover {text-decoration:none;}
.comments .thread-toggle {cursor: pointer;display: inline-block;border:1px solid #DDD;border-radius:4px;
text-shadow:0 1px 1px #fff;text-decoration:none;font: bold 11px Sans-Serif;padding:3px 7px;margin-right:5px;white-space:nowrap;vertical-align:middle;background: #f7f7f7;transition:all .5s linear;-o-transition:all .5s linear;-moz-transition:all .5s linear;-webkit-transition:all .5s linear;}
.comments .thread-toggle:hover {text-decoration:none;border: 1px solid #AAA;border-bottom-color: #CCC;border-top-color: #999;-webkit-box-shadow: inset 0 1px 2px #aaa;-moz-box-shadow:inset 0 1px 2px #aaa;box-shadow:inset 0 1px 2px #aaa;
background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);background:-moz-linear-gradient(top, #E6E6E6, gainsboro);background:-ms-linear-gradient(top, #E6E6E6, gainsboro);background:-o-linear-gradient(top, #E6E6E6, gainsboro);}
.comments .thread-toggle a:hover {text-decoration:none;}
.comments .continue {cursor: pointer;}
.comments .continue a {width:63px;border:1px solid #DDD;border-radius:4px;text-shadow:0 1px 1px #fff;text-decoration:none;
font: bold 12px Sans-Serif;padding:3px 7px;margin-right:5px;white-space:nowrap;vertical-align:middle;background: #f7f7f7;
-o-transition:all .5s linear;-moz-transition:all .5s linear;-webkit-transition:all .5s linear;}.comments .continue a:hover {
text-decoration:none;border: 1px solid #AAA;border-bottom-color: #CCC;border-top-color: #999;-webkit-box-shadow: inset 0 1px 2px #aaa;-moz-box-shadow:inset 0 1px 2px #aaa;box-shadow:inset 0 1px 2px #aaa;background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);background:-moz-linear-gradient(top, #E6E6E6, gainsboro);background:-ms-linear-gradient(top, #E6E6E6, gainsboro);background:-o-linear-gradient(top, #E6E6E6, gainsboro);}
.comments .comments-content .loadmore {cursor: pointer;max-height: 3em;margin-top: 3em;}
.comments .comments-content .loadmore.loaded {max-height: 0px;opacity: 0;overflow: hidden;}
.comments .thread-chrome.thread-collapsed {display: none;}
.comments .thread-toggle {display: inline-block;}
.comments .thread-toggle .thread-arrow {display: inline-block;height: 6px;width: 7px;overflow: visible;margin: 0.3em;
padding-right: 4px;}
.comments .thread-expanded .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;}
.comments.avatar-comment-indent {margin-left: 0;}
.comments .avatar-image-container {float: left;max-height: 50px;position: static;width: 49px;margin-right: 10px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.comments .avatar-image-container.avatar-stock img {display: none;}img.delayLoad {max-height: 45px;max-width: 45px;min-height: 45px;min-width: 45px;}
.comments .comment-block { position: relative; margin-top: 10px; margin-left: 35px; padding: 10px; background: #fff; border: 2px solid #ccc; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}
.comments .comment-block { position: relative; margin-top: 10px; margin-left: 35px; padding: 10px; background: #f0f0f0; border: 2px solid #ccc; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}
.comment-thread ol { counter-reset: contarcomentarios; }
.comment-thread li .comment-header:after { content: counter(contarcomentarios,decimal); counter-increment: contarcomentarios; float:right; font-size: 24px; color: #3A3939; margin-top: -4px;}
.comment-thread ol ol { counter-reset: contarbis; }
.comment-thread li li .comment-header:after { content: counter(contarcomentarios,decimal) "." counter(contarbis,decimal); counter-increment: contarbis; float: right; font-size: 18px; color: #000000; margin-top: -4px; }
.avatar-image-container img[src$="img1.blogblog.com/img/blank.gif"] { #000000 no-repeat 50% 50%;}
.avatar-image-container img[src$="img1.blogblog.com/img/anon36.png"] {}
.comments .comments-content .comment-replies {
margin-left: 0;}
.thread-expanded .thread-count:before { content: "\25B2"; color: #be961d; }
.thread-collapsed .thread-count:before { content: "\25BC";color: #be961d; }

/* Responsive styles. */
@media screen and (max-device-width: 480px)
</style>

Y esto es todo, espero que todo os salga bién.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

46 comentarios

Eres un crack Antonio.
Sabes que he estado enfrascado en esto de los comentarios, buscando informacion donde tu ya sabes, pero hasta que no he visto que tu sacabas algo de ello no me he atrevido a hacer nada.

Y como no podia ser de otra manera, ¡¡ de lujo !!.

Va todo perfecto. Un quebradero de cabeza menos...

Un fuerte abrazo amigo.

Lo unico Antonio, que cuando quiero abrir los comentarios, me redirecciona al final de la entrada, por debajo del formulario de comentarios y no se como hacer para como ocurre en el tuyo y me ocurria antes a mi, se vaya justo al formulario.

A ver si me puedes orientar...

Un abrazo.

Dímelo a mí que llevo tres días liado para que se visualizaran bien en Explorer, ja ja.

Esta tarde te lo miro, ahora comer y siesta.

¡ Hola ! Antonio la verdad es que tienes un blog muy util, yo no se como poner para que me dejen los comentarios debajos de los post que escribo, si me puedes ayuda te lo agradeceria. Un saludo

una pregunta para cambiar el color de texto de los botones de responde, respuesta y suprimir como se estructura el codigo y tambien el de la fecha te agradeceria mucho tu ayuda

Eso se consigue en la parte de ".comment-actions a y " .comment-actions a:hover" cambiando los colores por el que desees.

una pregunat y una line que aparece sobre el boton de responder de las respuestas como se quita y para encerran en un cuadro los comentarios con sus debidas respuestas como debera quedar el codigo y muchas gracias por la ayuda

Para enmarcar los comentarios, añade este código al anterior:

.comments .comment-block { position: relative; margin-top: 10px; margin-left: 35px; padding: 10px; background-color: transparent; border: 2px solid #ccc; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}

Luego busca esta parte del código .comments li:before { y añádele esto: margin:15px 5px 10px 0px;

Ya los tendrás enmarcados y la numeración alineada.

otra pegunta y con respecto a esa line que aparece sobre el boton de responder de las respuestas como se quita y para la numeracion de los comentarios estos no me marcan decimal en las respuestas solo se quedan en el numero o hay que darles un retoque

Copia el código de nuevo,lo he actualizado y vuelves a colocarlo.

Hola Muy bueno el blog Antonio, veras seria posible que pusieras el codigo del mismo que tienes puesto ahora, con el avatar redondo y la zona blanca de la fecha..
Gracias

Hola esta muy bien explicado, hice todo los pasos y me salio estupendo, pero tengo una consulta las emoticones que tenia en mi caja de comentarios se agrandaron como puedo solucionar esto , gracias.

Las emoticones se agrandaron al momento de pegar los codigos para enumerar la caja de comentarios.

Por cierto este es mi blogger
http://programasvirtualespc.blogspot.com/2014/03/hacker-de-tiro-perfecto-para-gunbound.html

Soluciones pc, no veo los emoticonos y así no te puedo ayudar.

Amigos muchas gracias por el aporte pero me gustaría saber si solo me puedes regalar la enumeración y no el el estilo delos comentarios te estaré eternamente agradecido...

Nitro la enumeración es el siguiente código:
.comment-thread ol { counter-reset: contarcomentarios; }
.comment-thread li .comment-header:after { content: counter(contarcomentarios,decimal); counter-increment: contarcomentarios; float:right; font-size: 24px; color: #3A3939; margin-top: -4px;}
.comment-thread ol ol { counter-reset: contarbis; }
.comment-thread li li .comment-header:after { content: counter(contarcomentarios,decimal) "." counter(contarbis,decimal); counter-increment: contarbis; float: right; font-size: 18px; color: #000000; margin-top: -4px; }
.avatar-image-container img[src$="img1.blogblog.com/img/blank.gif"] { #000000 no-repeat 50% 50%;}
.avatar-image-container img[src$="img1.blogblog.com/img/anon36.png"] {}
.comments .comments-content .comment-replies {
margin-left: 0;}
.thread-expanded .thread-count:before { content: "\25B2"; color: #be961d; }
.thread-collapsed .thread-count:before { content: "\25BC";color: #be961d; }

Muchas gracias amigo te sigo hasta la muerte

De nada Nitro, para eso estamos.

Una pregunta como puedo hacer para que el cuadro del comentario este un poco mas a la derecha ya q el avatar con el cuadro del comentario estan muy unidos....
aqui una imagen __>>
https://lh5.googleusercontent.com/-IUnuMXN2bBQ/U2d_jhBrdfI/AAAAAAAAC2s/JMYurcVx9KM/w560-h213-no/Sin+t%25C3%25ADtulo.jpg

es el avatar

.comments .avatar-image-container {float: left;max-height: 50px;position: static;width: 49px;margin-right: 10px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.comments .avatar-image-container.avatar-stock img {display: none;}img.delayLoad {max-height: 45px;max-width: 45px;min-height: 45px;min-width: 45px;}

intenta aumentando o restado números a left para aumentar ejemplo de 45 a 75 y para restar ejemplo de 45 a -10

de nada amigo es lo menos que puede hacer en este site de @amor sevillista que tanto me a ayudado...

@amor sevillista de nuevo yo el user que molesta mas que la diarrea ñ.ñ

te quería preguntar como le añado la caja que rodea a la numeración de los comentarios en los códigos que me pasaste no salen aparecen como los tuyo mira quiero agregarle esta imagen:

http://4.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png

please help me y 1000 gracias siempre por todo

Amigo mejor con esta imagen:

http://3.bp.blogspot.com/-UgpSGm_aQtY/T4x_94j1VSI/AAAAAAAAB2I/u0AVc8s-HVU/s1600/comment+bubble3.png

@Amor Sevillista please help me amigo, a quien mas molesto si solo usted me ayuda T.T

encontré un contador de visitas con estrellas y botones de redes sociales para compartir.

el problema es que quisiera saber si se puede configurar para que cuentas las visitas por entradas y no por el inicio de la pagina... aquí esta el enlace.

http://www.graddit.com/eng/ratings-widget

y aquí esta mi plantilla mas actualizada please help me man, te lo ruego te lo suplico...

https://www.firedrive.com/file/741987747A233FC0

@Amor Sevillista ya logre que me funcionara por entrada ñ.ñ solo tengo un pequeño problema no se como centrar ese contador...

mira un blog mio please ayudame...

http://zonacatrachahd.blogspot.com/2014/05/dragon-ball-z-hd-latino720pseason-2.html

ya solo me falta eso y lo de los comentarios...

Hola, Amor Sevillista :D
Soy yo de nuevo...
He pegado el código, y queda perfecto. Nomás que mero arriba del blog aparece este signo --> y al principio pensé que era producto de mis propias ediciones a los colores y eso. Pero no. Ya restablecí con mi plantilla de respaldo, y verifiqué que no se viera el signito; volví a pegar el código tuyo tal cual, y aparece ese signo mero arriba otra vez.
¿Podrías ayudarme? :)

Graciela donde dices que se ve esto -->
He entrado en el blog y no lo veo por ningún lado.

Es que quité los códigos, para que no se viera eso... Yo pensé que se podía revisar el código por un "ojo experto" como el tuyo, y verificar si todos los signos de apertura y cierre de códigos están completos.

Pondré el código de nuevo, y ya podrás ver el signito :)

Ya puse el código, y aquí está el signito, en esta captura de pantalla. http://easycaptures.com/fs/uploaded/748/8270307967.jpg

Graciela para eliminar el signo debes eliminar el principio y final del código, osea esto: <style type='text/css'>.........</style>

¡Gracias, Amor Sevillista! :D Quedó perfecto ahora sí :P ¡Dios te bendigaaaa!

Hola esta muy bien explicado, hice todo los pasos y me salio estupendo, pero tengo una consulta las emoticones que tenia en mi caja de comentarios se agrandaron como puedo solucionar esto , gracias.
Las emoticones se agrandaron al momento de pegar los códigos para enumerar la caja de comentarios. Otra cosa es que las emoticones se ponen debajo de la caja de comentarios, como puedo solucionar esto, gracias por todo.

Nota: anteriormente le consulte pero restablecí todo como estaba, así que no respondí a su pregunta, mil disculpas.

En este Post se pueden visualizar los comentarios:
http://programasvirtualespc.blogspot.com/2014/04/microsoft-office-professional-plus-2013.html

Me gusto este post!! pero estaria mejor aun si se puede agregar un color de fondo a los comentarios pares y otro color a los comentarios impares de forma que vaya siendo un color: negro - blanco - negro - blanco ... y asi sucesivamente... saludos!!

Joaquín prueba con este código que te dejo AQUÍ

Excelente!! te ganaste un lugar en mi nuevo blog :) solo dos preguntas más: ya lo edite lo más que pude... solo que aun no doy con el codigo que modifique solo el tamaño de la fuente de la fecha y hora de publicación del comentario.
y la segunda es como cambio de posición el boton de: "Respuestas" hacia el lado derecho. solo eso. Muchas Gracias.. saludos!! Recomendadisimo...

Ha y tambiem posicionarlo un poco más arriba, al mismo nivel que los botones de: "Responder" y "Eliminar" :)

Joaqín, añade en .comments .thread-toggle { float:right;margin-top:-30px; y con esto se desplaza a la derecha.
Y en cuanto a la fecha coloca esto: .comments .comments-content .datetime a{font-size:10px;}
en el font-size controlas el tamaño de la fecha.

Gracias!! aunque el boton de: "Respuestas" solo funciona a la mitad del boton para abajo, pues al pasar el mouse tengo que colocar bien el puntero para poder accder a las respuesta. No se si logras entenderme :)

Joaquín prueba quitandole a margin-top:-30px; 10px y dejándolo en margin-top:-20px;

Este comentario ha sido eliminado por el autor.

Disculpa se puede mantener las respuestas de los comentarios ocultas? para que estas no aparezcan expandidas desde un inicio y se expandan solo al momento de hacer clik sobre el boton de:"Respuestas"

Joaquín tendría que mirarlo pero ahora estoy muy liado y lo único que hago cuando tengo un poco de tiempo es contestar algunos comentarios.
Cuando disponga del tiempo suficiente te lo miro.

Buenas noches Amor Sevillista, gracias por el tutorial, tengo una pregunta, donde esta exactamente el fracmento de codigo donde enumera los comentarios? Gracias y Saludos.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"