Personalizar los comentarios en blogger

Siempre que hago un blog me gusta partir de base de una plantilla simple porque considero que son las mas personalizables a gusto del consumidor. En estas plantillas los comentarios son un poco "simples", por eso hoy les voy a enseñar como pueden darle un poco mas de estilo con un simple CSS. Vamos a darle color de fondo a los comentarios en si mismo, le pondremos un borde, lo redondearemos, agrandaremos el avatar, le pondremos un borde y una sombra y le daremos un efecto hover con tan solo un poco de estilo CSS. Los mismos los pueden ver funcionando en este link.


¡Manos a la obra!

Antes que nada deben guardar su plantilla por si no les gusta o borran algo que no deben, asi nos quedaremos tranquilos.

Iremos a Plantilla → Edicion HTML. Cuando estemos alli con CRTL+F buscamos la etiqueta ]]></b:skin> y justo antes de ella pegaremos el siguiente código.

/*-- Comentarios personalizados --*/

.comments .comment .comment-actions a {
background: none repeat scroll 0 0 #CBF1F2; /* Color de fondo del boton Responder dentro de los comentarios */
border: 2px solid #2B00FF; /* Color de borde del boton Responder */
border-radius: 3px 3px 3px 3px; /* Bordes redondeados del boton */
color: #000000;
font: bold 10px arial; /* Fuente */
margin-right: 14px;
padding: 1px 8px;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF; /* Sombra del texto */
}

.comments .comment-block {
background: none repeat scroll 0 0 #F3FFFF; /* Color de fondo de los comentarios */
border: 2px solid #2B00FF; /* Tamaño y color del borde */
border-radius: 15px 15px 15px 15px; /* Esquinas redondeadas */
padding: 6px 20px;
}

.continue a {
background: none repeat scroll 0 0 #CBF1F2; /* Color de fondo boton responder */
border: 2px solid #2B00FF; /* Color de borde boton responder */
border-radius: 3px 3px 3px 3px; /* Bordes redondeados boton responder */
color: #000000 !important;
display: inline-block !important;
margin-top: 7px;
padding: 1px 4px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF; /* Sombra y color del texto */
}

.comment-block:hover  {
background: none repeat scroll 0 0 #FFFFFF; /* Color de fondo de los comentarios */
border: 3px solid #2B00FF; /* Tamaño y color del borde */
}

.comment-header a {
color: #000000 !important;
}

#comments .avatar-image-container img {
border: 2px solid #D0D4FF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;
}

.comments .avatar-image-container { /* El avatar */
border: 1px solid #253BFF; /* Ancho y color del borde */
border-radius: 34px 34px 34px 34px; /* Asi queda redondo */
box-shadow: 5px 5px 5px #D0D4FF; /* Tamaño y color de la sombra */
float: left;
margin-left: -35px;
max-height: 60px !important; /* Alto del avatar*/
overflow: hidden;
width: 60px !important; /* Ancho del avatar */
}

/*-- FIN Comentarios personalizados --*/

En el mismo código, a la derecha de cada clave esta la leyenda de que cosa modifica cada una para que puedan editarla fácilmente. Y ya saben que si tienen alguna problema o duda al respecto pueden dejar sus comentarios aquí mismo. Saludos y gracias por pasar!