Personalizar enlaces de los comentarios en Blogger

En esta ocasión, vamos a ver como modificar los enlaces de los comentarios (Responder, Eliminar, Respuestas, Añadir comentario, Cargar más) que muchas veces pasan desapercibidos, bien sea por su color o porque no hay nada que los resalte, así que quién quiera darle un estilo más de "botón" que de "enlace", sólo debe seguir estos pasos, que pueden ser modificados a tu gusto.

Entra en Plantilla » Editar HTML y antes de ]]></b:skin> pega el siguiente código:

/* Enlaces de los comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #155780; /* Color del enlace */
background-color:#f5f5f5; /* Color del fondo */
border:1px solid #dddddd; /* Color del borde */
border-radius: 2px; /* Borde redondeado */
text-decoration: none;
padding: 3px 7px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
color:#0078d7;
text-decoration:none;
position: relative;
border:1px solid #c6c6c6; /* Color del borde */
border-radius: 2px; /* Borde redondeado */
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arimo;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}

Dentro del código está señalado en color verde, las opciones más relevantes para modificar como el color del enlace, el color del fondo, el color y el estilo de los bordes de los botones. Si quieres añadir más estilos cuando pasas el cursor sobre el botón, debes añadirlos despues de:

.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {

Si has dejado el código por defecto, el resultado debería ser el siguiente:

Si quieres interactuar con los botones en vivo, he implementado este tutorial en un blog de pruebas que puedes visitar pulsando el siguiente botón:

Blog de pruebas

Esto ha sido todo, espero que te haya sido de utilidad, si tienes dudas o sugerencias, no dudes en comentar. Hasta la próxima.

¿Qué te gustaría aprender a hacer en Blogger?