Tutorial: Jump Link botão.

Olá lindos, tudo bem com vocês? Para mim tá tudo ótimo, só tirando o fato do horário de verão, eu nunca vou me acostumar com ele. Enfim, vocês sabem o que é o "Jump Link"? É esse o botão em que nós blogueiros usamos para colocar o famoso "Continue Lendo", mas você sabe como fazer um? E como usar? Para saber como colocar ele personalizado no seu blog do blogger e como usa-ló, continue lendo.

Bom, eu vou começar ensinando a personalizar ele de duas maneiras, a primeira é modificando a cor e fonte dele, e a segunda e substituindo ele por uma imagem (como eu faço). Preste atenção, é simples, mas em todo tutorial se deve prestar atenção, para não cometer nenhum erro.

1° Forma (sem imagem, só cor e letra):

Bom, como eu disse, a primeira forma é a que você somente muda a cor e a fonte do Jump Link; 

Abra o Blogger, vá em modelo, "Editar Html" e procure a seguinte tag: ]]></b:skin> (Não esqueça de apertar nos códigos e apertar CTRL F, para poder pesquisar).

Em cima da tag cole 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;
}

E então é só você ajustar, arrumar de sua forma. No lugar onde tem "´link-da-imagem-de-fundo" é a imagem do fundo de seu "Jump Link", mas se não quiser, é só retirar essa parte, ou seja, desde background á altura da imagem. Lembrando que "hover" é quando você passa o mouse. Right é direita, left é esquerda. Depois é só salvar o modelo, alguma outra dúvida relacionada a isso me chama nos comentários.

2° Forma (com imagem):

Antes de tudo, faça o seu leia mais e hospede em algum site, como o Static Tumblr (usado para hospedar fotos, códigos e coisas de htmls, e edição). Bom, vá no seu html e pesquise a tag: <data:post.jumpText/>

Apague SOMENTE essa tag e cole esse código no lugar: <p align='right'><a expr:href='data:post.url'><img src='Link da imagem aqui'/></a></p>

E onde tem "Link da imagem aqui" você coloca o link da imagem que você hospedou. Depois disso é só salvar o modelo.

Como usar o "Jump Link"?

É simples, toda ver que você usa-lo, você só irá precisar ir nesse ícone selecionado:

Esse foi o tutorial de hoje, obrigada a todos! Qualquer dúvida chama nos contatos ou nos comentários, beijos <3

Créditos ao blog Cherry Bomb, lugar onde peguei somente os códigos.