[Defasado] Destaque o link de comentários no Blogger

Finalmente mais um tutorial específico para o Blogger. Vamos ao trabalho.

O objetivo é destacar o link de comentários para que mais visitantes cliquem e comentem. Vejamos como estava o link para comentar do meu blog de testes antes de destacá-lo:

Ele está visível, mas não está atrativo. Quem quiser muito comentar vai encontrá-lo, mas quem está em dúvida ou quem não quer comentar, dificilmente vai se sentir motivado a clicar.

Com ajuda do Firefox descobri que os links de comentários do Blogger utilizam as classe post-comment-link e comment-link. Observei também que o título dos backlinks utiliza essas mesmas classes e ainda a classe post-backlinks.

Primeiro e único passo

Sendo assim, tudo o que temos que fazer é ir até Layout » Editar HTML e editar as classes na folha de estilos. Logo acima do código ]]></b:skin>, cole o que está abaixo (não precisa expandir os widgets):

.post-comment-link .comment-link {display:block;
background:#fffff0;
border:5px dotted gold;
border-top:0px;
border-bottom:0px;
width:200px;
padding:10px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
text-align:center;
text-transform:none;
font-family:trebuchet ms;
font-size:13px;}

a.comment-link {color:tomato;
text-decoration:none;}

a.comment-link:hover {color:black;
text-decoration:none;}

a.comment-link:active {color:black;
text-decoration:line-through;}

.post-backlinks .comment-link {background:transparent;
display:inline;
text-align:left;
margin-top:0px;
margin-bottom:0px;
border-right:0px;
border-left:0px;}

]]></b:skin>

Resultado do código acima em meu blog de testes:

Ficou bem mais destacado e você pode editar as cores, a fonte e as medidas da forma que combina mais com seu blog.