{ Tutorial: Leia mais no blogger (com modelos para usar) | butlariz

Anuncio layout

Anuncio layout
Encomende já o seu layout!
- 16.11.17

Tutorial: Leia mais no blogger (com modelos para usar)

como colocar leia mais no blog

Hoje vou ensinar a colocar o "Leia Mais" (ou continue lendo) manualmente nos posts do seu blogger. Também vou te ensinar a deixar ele bem bonitinho e personalizado, e ainda mais: disponibilizei alguns modelos já prontos pra você usar! 

A forma que vou ensinar é manual, vocês podem decidir quais posts querem colocar ele, e também em que parte do post ele vai aparecer. É muito útil pra quem faz posts quilométricos como os meus, assim o leitor pode escolher qual post quer ler, o que facilita a navegação tanto no computador, como no celular.

Como usar nos posts? 


Sabe quando você coloca o título do seu post? Então, logo abaixo tem uma barra de ferramentas, e nessa barra tem esse ícone de papel rasgado (olhe a imagem a baixo). Você clica na parte do seu post que quer dar a quebra, e depois clica nesse ícone.

colocar leia mais no post do blog

Vai surgir um traço no meio do seu post. A parte antes do traço, é a que aparecerá na página inicial do seu blog :) Fácil né?

Como personalizar o leia mais? 


O modelo que vou ensinar, vai deixar ele centralizado, a principio sem imagem, só com o texto mesmo.

1 - Vá em Tema, clique em Editar HTML. Vai abrir aquele quadrado com os códigos.

Procure por: ]]></b:skin> e acima disso, cole o seguinte código:

.jump-link a {
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    font-family: calibri;
    font-size: 11pt;
    display: block;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
}

Depois salve. O código deve ficar assim:

código do leia mais personalizado

2. Para mudar o texto que aparece, você precisa ir em Layout. E na caixa Postagens do blog, clica em Editar. Depois mude no campo "Texto do link da página de postagem:"

mudar o texto do leia mais no blogger


Depois é só salvar.

3 -  Agora, se você quiser colocar uma imagem no seu leia mais,  vá no Editar HTML novamente, clique na caixa de código e aperte CTRL+F. Depois procure por <data:post.jumpText/>

Substitua <data:post.jumpText/> por:

<img src="URL-DA-IMAGEM" /> 

Vai ficar assim:

como colocar leia mais personalizado no blogger



4 - No lugar de "URL-DA-IMAGEM" você coloca a url da imagem que quiser que apareça no lugar do "Leia Mais".

Freebies  


Lembram dos Cabeçalhos Personalizados que disponibilizei aqui no blog? Fiz alguns botões de Leia Mais que combinam com eles! É só clicar com o lado direito do mouse por cima da imagem que quer usar, clicar em "copiar url da imagem" e depois colar no lugar do passo 4 😄

imagem leia mais personalizada 1

imagem leia mais personalizada 2



imagem leia mais personalizada 4

imagem leia mais personalizada 5


imagem leia mais personalizada 6


~ \\ ~

Se quiser usar a sua própria imagem, você pode hospeda-lá no imgur, para poder copiar a url da sua imagem :)

E é isso! Espero que tenham gostado, deixei bem explicadinho pra não ficar dúvidas. Mas mesmo assim, se tiver alguma, pode deixar nos comentários! O que acharam do tutorial? Vão fazer nos blogs de vocês?

Beijinhos,
Lariz ♥

Comente com o Facebook:

2 comentários:

  1. Super bacana a explicação da quebra de página,html e freebie para o blog...infelizmente não consigo editar o html através do celular no Blogger se você souber algum tutorial desse seria de mega ajuda...seu blog é ótimo para ajudar as iniciantes parabéns pelo trabalho!!!

    ResponderExcluir
  2. Eu amo esses seus textos de tutorial de blog, sério. Muito utilidade pública! Gosto bastante do "leia mais" porque deixa a home mais arrumadinha e ainda ajuda no SEO <3

    blogdeclara.com

    ResponderExcluir

• 2015 - 2017 Feito com ♥ por Lariz Santana