Tutorial: Mejora el aspecto de tus comentarios (Parte 1)

Por Makita desde Chile



Los comentarios son un aspecto fundamental en nuestro Blog, ya que se consigue una retroalimentación con las personas que se interesan por los temas abordados en él. Es por eso que debemos hacer que este “espacio” se vea ordenado y bien presentable.

Podemos realizar varios cambios para que el aspecto de los comentarios mejore, así que el tutorial se va a dividir en dos partes. Esta semana veremos como delimitar el espacio de cada uno de los comentarios de dos maneras para que escojas la que más te guste o la que mejor se adapte a tu Blog.

Para agregar cada uno de los estilos, debes acceder a Plantilla, Edición HTML y expandir artilugios.

Estilo Clásico y Elegante:
Consiste en agregar una línea bajo cada comentario. Debes agregar el siguiente código antes de ]]></b:skin>
.comments .comment-block {
padding-bottom:10px;
border-bottom:1px solid #240B3B;/* Estilo línea */
}
.comments .comments-content .datetime{
font-style:italic;
font-size:9px;
}

En border-bottom puedes cambiar el grosor de la línea (1px) y cambiar el color (#240B3B)

Estilo Propio:
Puedes agregar una imagen en lugar de una línea, y debes agregar el siguiente código:
.comments .comment-block {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXgA4Nw7ET2AOkfVQ2ElKg6wyhIVu_kPvvASZRc8mmvWq-SW2zzoJWCgG_NB291xSjd8kzcmz4us25efnYXLIOh1k-i0VmSlETqDUp1UlSK9EsfTzYQj_SN9dqKQmp3Xkh_h11_KW63IU/);

background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:20px;
height:70px;
}
.comments .comments-content .datetime{
font-style:italic;
font-size:9px;
}


En image:url debes indicar la dirección de la imagen que desees, si deseas crear tus propios separadores, necesitar crear/enlazar imágenes de 54x512 px.

La próxima semana se continuará con una segunda parte de mejoras aplicadas a los comentarios.

Dejen todas sus dudas para darles ayuda ;)

Algunas imágenes como separadores que pueden añadir copiando el link.








Fuente:http://ciudadblogger.com







CONVERSATION

11 ya son Blogger@s:

  1. Patricia O.(Patokata)14 de mayo de 2012, 15:28

    Super interesante!!
    Gracias por compartir!!

    Besos

    ResponderEliminar
  2. ME TINCA MUCHO PERO ME CUESTA IMAGINARMELO SIN IMAGEN!! TENES ALGUNA?

    ResponderEliminar
  3. Podrías añadir alguna imagen? o redireccionarnos a alguna página que lo use?

    ResponderEliminar
  4. Actualicé la entrada y agregué algunas imágenes que ya se encuentran editadas (con el tamaño correspondiente) para que las puedan usa :)

    ResponderEliminar
  5. yo tengo una duda, esto anularía el nuevo sistema de cápsula que tienen los comments en blogspot? porque con el cambio de color entre comentario y respuesta más los divisores... se vería un poco raro, no??
    no me gustan nada como se ven ahora pero los separadores tampoco me convencen, esperaré a la siguiente entrega a ver con qué nos sorprendes.

    ResponderEliminar
  6. Ayyyy que liiiiiindaaaaas!!! Ahora si pos siiii, me encantan.
    Gracias

    ResponderEliminar
  7. Es un estilo u otro el que se aplica, pero en el próximo tutorial viene otro estilo a ver si te agrada mas :)

    ResponderEliminar
  8. De nada, me cuentas si todo te resulta ;)

    ResponderEliminar
  9. cool... qué intriga!!! ;)

    ResponderEliminar
  10. hola chica, muchas gracias por todo esto. Lamentablemente no me funciona y e hecho todo tal cual lo as planteado, que crees que pueda estar fallando?

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Back
to top