Nível: Fácil

O Jump Break, ou mais conhecido por todos como leia mais é muito utilizado em diversos blogs. É aquele *adereço* que colocamos no post caso esse seja muito comprido, para não poluir demais a página inicial, assim a pessoa que estiver interessada em ler o restante da postagem deve clicar nele para ser redirecionado ao restante do post. Hoje irei ensinar a vocês como personalizar esse link muito útil para diversos blogueiros! Vamos lá?

 

Leia mais com imagem

Primeiramente irei ensinar como se coloca o link em imagem. Faça sua imagem bonitinha e depois abra o editor de modelo do seu blog da seguinte maneira:

No painel do blogger, clique na setinha ao lado de Visualizar blog (nesta setinha que emoldurei em rosa). Logo, clique em Modelo. Clique em Editar HTML. Depois que carregar o seu código, aperte Ctrl+F e abrirá uma caixinha na parte superior direita nomeada Search, copie e cole o seguinte código <data:post.jumpText/> dentro dessa caixinha e aperte enter. Agora que você encontrou o código, selecione-o e coloque o seguinte código no lugar dele: <p align='right'><a expr:href='data:post.url'><img src='Link da imagem aqui'/></a></p> . Em link da imagem aqui, substitua pela url da imagem que você criou para o Leia mais.

 

Leia mais personalizado sem imagem

Se você não quiser o link do hack leia mais em imagem porém quiser personaliza-lo à seu gosto, siga as seguintes instruções:

Assim como no tutorial de Leia mais com imagem, vá ao editor de modelo do seu blog: setinha ao lado de Visualizar blog >> Modelo >> Editar HTML. Procure pela seguinte linha no seu código: <b:skin>… </b:skin>não será difícil encontrá-la pois ela estará bem no início do HTML. Haverá uma setinha preta ao lado direito da linha em que esse código se encontra, assim: , clique nessa setinha e depois, aperte Ctrl+F para abrir a caixinha de Search e cole na caixinha o seguinte código: </b:skin>. Acima dessa tag, cole o seguinte código:

/*-------------HACK-LEIA-MAIS-------------*/
.jump-link {
text-align: right; /*Alinhamento do link dentro do post*/
font-size: 20px; /*Tamanho da fonte do link*/
margin: 10px;
}
.jump-link a:link, .jump-link a:visited { /*Estilo do link*/
background: #000; /*Cor de fundo do link*/
color: #fff; /*Cor do link*/
text-decoration: none;
}
.jump-link a:hover { /*Estilo do link ao passar o mouse*/
background: #000; /*Cor de fundo do link ao passar o mouse*/
color: #8080cf; /*Cor do link ao passar o mouse*/
text-decoration: none;
}

Depois, é só alterar as tags de acordo com o jeito que você quer que fique seu link.

 

Como colocar o leia mais na postagem

Personalizou seu link e tudo mais mas não sabe como colocá-lo na postagem? É simples. Quando estiver escrevendo seu post, escolha o local que você quer que sua postagem seja cortada e clique nesse botão . Depois é só salvar o post e visualizar no blog se ficou tudo certinho!

É isso gente, o tutorial é bem fácil e tentei deixar bem explicadinho para que fique mais fácil ainda. O que acharam? Gostaram do tutorial? Gostariam de ver mais tutoriais por aqui ou tem dicas de tutoriais que gostaria que eu postasse? Comentem aí. Beijos!