Botão Css3 "Leia Mais Postagens"

Aprenda a coloca "Botão Leia Mais Postagem..." no Blog. Esse botão é ideal, pois deixa um visual bem atraente no Blog, e além de utilizamos a linguagem Css, ele não necessita de utilizar imagens pesadas e fica fácil de carregar.

[TUTORIAL ATUALIZADO PARA A NOVA INTERFACE DO BLOG]

Bom, pra você utilizar esse botão é preciso que você esteja utilizando o recurso (Inserir expansão de postagem) que ele é um recurso disponibilizado pelo blog. Pra saber mais>> clique aqui e leia o Tutorial Anterior

Como colocar "Botão Leia mais Postagem..." no Blog

1º Passo:  Acesse o HTML do seu blog, clique na opção MODELO>> depois em Editar HTML.

2º Passo: Agora, clique em qualquer parte do código e em seguida pressione as teclas de atalho (Ctrl+F) do teclado e encontre esta Tag:

]]></b:skin>

3º Passo: Quando encontrar a Tag, logo acima da mesma adicione este código CSS:

.button, .button:visited {

background: #222;

display: inline-block;

padding: 5px 10px 6px;

color: #fff;

text-decoration: none;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-bottom: 1px solid rgba(0,0,0,0.25);

position: relative;

cursor: pointer;

font-family: calibri;

}

.button:hover {

background-color: #111;

color: #FFFF00;

}

.button:active {

top: 1px;

}

.small.button, .small.button:visited {

font-size: 11px

}

.button, .button:visited,

.medium.button, .medium.button:visited {

font-size: 13px;

font-weight: bold;

line-height: 1;

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

}

.medium.button, .medium.button:visited {

font-size: 14px;

padding: 8px 14px 9px;

}

.large.button, .large.button:visited {

font-size: 14px;

padding: 8px 14px 9px;

}

.rosa.button, .magenta.button:visited {

background-color: #3C3737;

}

4º Passo: Utilize novamente as teclas de atalho (Ctrl+F) e procure por esta parte no código:

<data:post.jumpText/>

5º Passo: Quando encontrar o código, substitua-o por este código:

<span class='large button rosa'>Leia Mais Postagem...</span>

Pronto! Agora clique em Visualizar Modelo, veja se tudo ocorreu bem e depois Salve Modelo...

Alterar Cor do Botão

No Código CSS eu destaquei dois códigos o que está destacado em vermelho é a cor da fonte da letra

Em Azul é a cor do botão, então pra alterar as cores é só você substituir o código da cor por uma outra cor. Clique Aqui para escolher uma cor

Prontinho pessoal é só isso!!! espero terem gostado deste tutorial e boa sorte a todos.....