Los comentarios anidados fueron una de las grandes novedades de Blogger en el año 2012, si bien es cierto que significo un gran avance en el obsoleto sistema de comentarios de Blogger también es cierto que ahora editar el aspecto de estos comentarios mediante CSS es mucho mas complicado debido a que ahora es un iframe lo que se muestra en nuestro blog.

Por eso hoy les compartiré un truco con el cual podrán dejar el estilo de los comentarios de su blog de la siguiente manera:

Para añadir estos estilos a tu blog ve a Plantilla, Editar HTML, y busca lo siguiente:

<b:skin>...</b:skin>

Allí das clic en la flecha que aparece al lado de este código y busca la etiqueta  ]]></b:skin> y arriba de esta añade lo siguiente:

@font-face { font-family: 'Philosopher'; font-style: normal; font-weight: 400; src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } .comment .avatar-image-container { border: 1px solid #B6B6B6; max-height: 70px !important; margin-top: -5px; width: 70px !important; position: relative; z-index: 50; } .comment .comment-block { margin-left: 75px !important; } .comment .comment-header { background: none repeat scroll 0 0 #A9F5D0; color: #333; font-size: 15px; font-weight: bold; margin-left: 60px; } .comment .comment-header a { color: white !important; text-decoration: none; } .comment .comment-content { background: none repeat scroll 0 0 #FEFFF9; border-bottom: 2px solid #E6E6E6; font-size: 14px; margin: 0 0 30px; padding: 5px 5px 10px 10px; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment-header cite { background: none repeat scroll 0 0 #DF7401; border: 1px solid white; color: white; padding: 2px 20px; position: relative; z-index: 99; margin-left: -20px; } cite.blog-author { background: none repeat scroll 0 0 #8181F7 !important; } .icon.blog-author { display: none !important; background: url("") no-repeat scroll 0 0; margin-left: 90px; width: 60px !important; height: 60px !important; position: absolute; right: 5px; bottom: 5px; top: 10px; } .comment .comment-header { color: #333; font-size: 15px; font-weight: bold; } .comment .avatar-image-container img { border: medium none !important; height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD !important; color: #333 !important; display: inline-block !important; line-height: 1 !important; margin: 0 3px !important; padding: 3px 6px !important; text-decoration: none !important; font-size:16px; } .comment .comment-actions a:hover { background: #CCC !important; text-decoration: none !important; } .comments { font-family: 'Philosopher', arial, serif !important; font-size: 1em; color: black; } .comments .continue a { display: block !important; font-weight: bold !important; padding: .5em !important; color:#E34600; font-size:16px; } .comments .continue a:hover {color:#4D3123;text-decoration:none;} .item-control { display: none !important; } .comments .continue { border-top: 2px solid transparent !important; } .comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;background-image:url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width

Ahora guarda los cambios y listo.

Puedes ver un DEMO del truco en el siguiente blog.

Como puedes ver los comentarios quedan con un estilo espectacular y muy agradable visualmente.

Vía/Spiceupyourblog


11 comentarios

Mauricio · septiembre 10, 2013 a las 9:03 pm

123

Carlos Valle · septiembre 10, 2013 a las 9:42 pm

hola, he realizado los cambios e insertado los códigos y no me aparecen anidados, no que problema puede haber?

Carlos Garcia · septiembre 12, 2013 a las 5:09 am

Graias por el aporte me ha gustado como queda en mi blog (http://softworepc.blogspot.com.es/)

bon · octubre 3, 2013 a las 11:31 pm

hola como le hago para cambiar los colores ya que me gustaria que llevara otros colores acordes al blog que estoy haciendo.gracias

Spider78 · julio 21, 2014 a las 10:36 pm

Genial!!

Nakamas Anime · agosto 28, 2014 a las 3:23 pm

Buenas, tengo una duda, he copiado el codigo que has puesto para los comentarios juntos donde indicas, pero he realizado un prueba pero el botón de responder no hace nada, eso es normal? Es decir puedo publicar comentarios pero no puedo responder ninguno de ellos!! Necesito ayuda por favor. Un saludo

    Hayder Juvinao · agosto 28, 2014 a las 4:23 pm

    El botón responder si sirve con este estilo de comentarios, el error es de Blogger que a veces falla, ante esto solo basta con volver a cargar la página y listo.

    Saludos

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *