Mil Trucos Blogger

Espectacular estilo para los comentarios de tu blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

11 Comentarios

  1. septiembre 10, 2013    

    123

  2. septiembre 10, 2013    

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

  3. septiembre 12, 2013    

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

  4. bon bon
    octubre 3, 2013    

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

  5. julio 21, 2014    

    Genial!!

  6. agosto 28, 2014    

    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

    • agosto 28, 2014    

      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 un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo