Personalizar o link leia mais

Olá! Resolvi trazer um tutorial depois de tanto tempo sem postar um. Eu já mostrei aqui como colocar uma imagem no lugar do link leia mais, mas existe outra forma de personalizar esse link tão importante em nossos blogs. Com este tutorial, você poderá mudar a cor, fonte, e até colocar uma imagem de fundo. Confira!

Antes do tutorial, queria dar alguns recados para vocês. Devem ter percebido que não tenho postado com muita frequência não é? Isso é resultado da combinação Pouco tempo + Internet lenta + livro viciante. Meu tempo já é pouco, aí a internet me faz demorar muito para postar e ás vezes perco a noção do tempo lendo um livro incrível que assim que eu terminar de ler vai ser assunto de resenha aqui.

Minha solução para não deixá-los sem post: Programar as postagens. Eu não gosto de fazer isso, mas vi que vocês estão reclamando da minha ausência, então o farei. O único problema é que responderei menos comentários ainda, mas prometo que vou ler todos e responder os que eu puder.
Agora vamos ao assunto principal:

Tutorial

Vá no modelo HTML do seu blog, e procure pelo seguinte código: ]]></b:skin>
Cole logo acima, o seguinte código:

.jump-link {
float: right; /*Escolha para ficar alinhado á direita (right) ou esquerda (left)*/
line-height: 18px; /*Altura da linha, mude de acordo com o tamanho da fonte*/
background: url('link-da-imagem-de-fundo') no-repeat;
width: 200px; /*Largura da imagem*/
height: 32px;/*Altura da imagem*/
margin-right: -20px; /*Margem direita*/
margin-bottom: 30px; /*Margem inferior*/
padding-left: 0px; /*Ajuste para posicionar o texto*/
padding-right: 0px; /*Ajuste para posicionar o texto*/}
.jump-link a {
font-family: Arial;
font-size: 14px;
font-weight: normal;}
.jump-link a:hover {
color: #000;
text-decoration: none;}

Entendendo

As partes do código que estão em negrito são importantes para alinhar a imagem que você usar no fundo. As margin right e bottom vão determinar a posição do link como um todo, puxando mais para a direita e colocando um espaço abaixo dele. Já os padding right e left vão ajudar a alinhar o texto dentro da imagem. Basta modificar os valores para ver a diferença que eles fazem, e logo você entenderá :)

Extra

Como bônus, trouxe algumas imagens para vocês usarem como fundo. Creditem tanto se usarem as imagens, como só o tutorial.




Espero que tenha sido útil para vocês, Kissus!