Como aplicar estilos ao link 'Leia Mais' dos posts

Bem, algo que virou moda nos blogs, são os links leia mais personalizados, então nada mais justo do que o Info Blogger publicar um tutorial ensinando a fazer isso, pois ninguém pode ficar de fora. Entre nessa onda e estilize também o seu link 'Leia Mais', com bordas arredondadas, e feito hover com fade-in e fade-out. E é bem simples fazer o que eu vou ensinar abaixo, você precisará somente de saber alguns ou nenhum conceito de CSS. Bem, vamos logo ao tutorial.

Bem, primeiramente você vai entrar no código HTML do seu template, caso não saiba fazer isso no novo painel veja o tutorial abaixo:

• Blogger atualiza a maneira como se edita o HTML no novo painel

Então depois de abrir o editor de HTML, procure pela linha ']]>' que é a tag que determina o fim do código CSS.

Imediatamente antes disso, cole o código indicado abaixo:

/* Jump-link
================*/
.jump-link {
float:right; //aqui é determinado que o link ficará a direita
margin-top:0px;
margin-right:0px;
font-size:12px; //tamanho da fonte
letter-spacing:.1em;
font-family: Arial; //tipo de fonte
font-weight:800;
}
.jump-link a{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background:#ccc; //cor do fundo
color:#fff;
padding:4px 8px;
border:1px solid #111; //cor e espessura da borda
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
.jump-link a:hover{
background:#6a8fdc; //cor quando em hover
color:#fff;
border:1px solid #0c1445;
text-decoration: none;
}

Esse será o código CSS que determina o estilo do seu link 'Leia Mais'. Então clique em 'Visualizar', se estiver tudo ok clique em 'Salvar Modelo', e está pronto, o seu link 'Leia Mais' já está personalizado.

O código acima, também está todo comentado em português, caso queira alterar alguma coisa fica fácil.