Dicas para blogueiros: Leia Mais personalizado

3:01 PM

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 setinha (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: setinha2, 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!

You Might Also Like

11 comentários

  1. Steh, sua linda, sempre postando essas coisas que a gente adora saber!

    ResponderExcluir
    Respostas
    1. Ai Miii, eu fico muito feliz que alguém esteja gostando dessas dicas! hehe
      Beeijos

      Excluir
  2. Legal o post...Eu não curto colocar isso no meu blog e nem curto isso nos blogs alheios, pq as vezes o povo coloca leia mais tão pequeno e escondido que as vezes nem comento pensando que o post esta incompleto. Mas continue postando essas dicas.
    brubs

    ResponderExcluir
    Respostas
    1. Oi Brubs!
      Pois é, por isso que é muito importante a personalização do Botão, para que os leitores o encontre! hehe
      Beeijos

      Excluir
  3. Steh,tem um problema eu não sei fazer com o novo HTML!

    ResponderExcluir
    Respostas
    1. Mas o tutorial está bem explicadinho de acordo com o novo HTML =)
      Beijos!

      Excluir
  4. adorei *-*
    http://blog-littlewonderland.blogspot.com.br/

    ResponderExcluir
  5. Sempre que abre a caixinha não pesquisa amr pode me ajudar?

    ResponderExcluir
    Respostas
    1. Claro que ajudo!
      Explica melhor o que acontece pra mim entender o que está acontecendo?

      Excluir
  6. O segundo código deu certo, mas o primeiro, que era o que eu queria, não porque não tem esse código no meu lay. :/

    Bjs, Denise.

    ResponderExcluir
    Respostas
    1. O código do Leia Mais com imagem que não tá aparecendo flor? =/

      Excluir