Personalizando o botão leia mais

Hoje vamos aprender a personalizar o botão leia mais para que ele dê uma aparência diferenciada em seu layout e fique do jeito que você deseja. Para isso iremos precisar adicionar o código HTML no modelo de seu blog. Essa personalização é bem fácil de fazer, e deixa seu blog ainda mais fofo. Vamos lá ao tutorial do dia.


No post anterior aprendemos como adicionar o botão leia mais. Hoje vamos continuar na personalização desse mesmo botão, porém agora poderemos adicionar imagens, alterar a fonte e também definir de qual lado de sua página ele deverá ficar. Não esqueça de hospedar sua imagem em um site para que ela possa aparecer corretamente em seu modelo. Lembre-se Right = direita, Left= esquerda. Não esqueça de fazer essa alteração no código para que ele fique no lugar desejado por você. 

Para adicionar o código ao HTML do seu blog, você deverá ir no painel do blog, MODELO, EDITAR HTML, aperte CTRL +F e procure por : ]]></b:skin> 
Cole o seguinte código acima :

/* botão leia mais www.mundodeblogueira.blogspot.com --------------------------- */ .jump-link { float: right; /* PODERA MUDAR PARA LEFT */ line-height: 18px; /*ALTURA DA LINHA*/ background: url('URL DA IMAGEM DO BOTÃO') no-repeat; width: 200px; /*LARGURA DA IMAGEM DO BOTÃO*/ height: 32px;/*Altura da imagem*/ margin-right: -20px; /*MARGEM DA DIREITA*/ margin-bottom: 30px; /*MARGEM ABAIXO*/ padding-left: 0px; /*POSICIONAMENTO DO TEXTO*/ padding-right: 0px; /*POSICIONAMENTO DO TEXTO*/} .jump-link a { font-family: Arial; font-size: 14px; font-weight: normal;} .jump-link a:hover { color: #000; text-decoration: none;}

Baixe o seu botão

O resultado é bem legal. E ai meninas, gostaram da postagem?

Obrigado a todas vocês.