Como colocar o "Leia mais" personalizado no blog | Quero Dicas | Tutoriais para seu blogs


Como colocar o "Leia mais" personalizado no blog


Como colocar o "Leia mais" personalizado
Esta semana, como prometido, estarei postando sobre como personalizar o botão "Leia mais" no blogger.
Na segunda-feira, fiz a postagem: Leia mais personalizado para blogger, que foi uma das maneiras simples e fácil de instalação.

Hoje vou mostrar como você poderá colocar sua própria imagem de maneira, também, muito fácil, deixando ainda mais bonito seu layout.
No final da postagem  deixei algumas imagens que você poderá utilizar, caso queira, claro!

  PASSO 1

A primeira coisa a ser feita é adicionar a ferramenta no blogger chamada Jump Break. Para isso:
1 - Acesse o painel do seu blogger

2 - Vá em "Layout" em "Postagens no blog" e clique em "Editar"

3 - Depois selecione quantas postagens você quer que apareça na primeira página.

Vá em "Layout" em "Postagens no blog" e clique em "Editar"

4 - Agora vá em qualquer postagem já criado ou, se preferir, crie uma e logo após o texto que quer deixar visível, clique em "Inserir expansão de postagem"

clique em "Inserir expansão de postagem"

Pronto. Agora vamos para o segundo passo.


  PASSO 2

Antes de começarmos, eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências ao blogs de teste! Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.
1 - Crie uma imagem  e hospede sua imagem. No próprio Blogger ou hospede na Web.
Caso prefira, você pode coletar alguma das imagens abaixo, Basta "salvar como", editar e hospedá-las ou até mesmo, colete o endereço qualquer uma delas. Para isso, clique em abrir em outra aba do seu navegador e pegue o endereço.

 
 

 
  
Todas estão em tamanho pequeno para não ocupar muito espaço


  ESTILO 1 - IMAGEM FIXA

Neste caso, vai aparecer apenas uma imagem fixa no local onde fica o link leia mais...

1 - Acesse o HTML do deu blog
2 - Procure por:

 <data:post.jumpText/>
 


3 - Ao encontrá-la, substitua por :

 <img src="URL da sua imagem"/>
 

4 - Cole o endereço da sua imagem no local indicado (URL da sua imagem), salve e Pronto!

  ESTILO 2 - EFEITO HOVER

Neste caso, vai aparecer duas imagem no local onde fica o link leia mais.
Terá que ter duas imagens. Uma que aparece em todas as postagens e a outra quando o mouse está em cima para clicar. Estilo o efeito hover.

1 - Acesse o HTML do deu blog

2 - Procure por:

 <data:post.jumpText/>
 

3 - Ao encontrá-la, substitua por :

Estilo único

 <img src="URL da sua imagem"/> 

Estilo hover
 <img border='0' onmouseout='this.src='url da sua imagem''
onmouseover='this.src='url da sua imagem quando passa o mouse'
; return true' src='url da imagem'/> 

4 - Cole o endereço da sua imagem nos locais indicados, salve e Pronto!

E você, gostou? Deixa seu comentário. Beijinhos
Me Contrate!

23 comentários

Clique e deixe seu comentários
terça-feira, 04 agosto, 2015 ×

adorei muito obrigado por ajudar os(a) blogueiros <3 no meu blog ate indiquei voce e se vc puder seguir bjs
http://universodamodinha.blogspot.com.br/2015/07/blogssites-que-podem-ajudar-fazer-seu.html#more

Resposta
avatar
admin
quarta-feira, 05 agosto, 2015 ×

Obrigada minha linda. Já estou seguindo seu blog =D

Resposta
avatar
admin
sexta-feira, 07 agosto, 2015 ×

MUITO OBRIAGADA , VOCÊ ME AJUDOU MUITO ! Tentando fazer isso eu tirei as postagens do meu blog sem querer por causa de um outro site ! Amei ! Super explicado !

Resposta
avatar
admin
sábado, 08 agosto, 2015 ×

Que bom que tenha gostado Mariana, fico muito feliz =D
Sucesso no blog!!!

Resposta
avatar
admin
Anônimo
sexta-feira, 18 setembro, 2015 ×

Obrigado pela boa dica. Funcionou legal.

Resposta
avatar
admin
sábado, 10 outubro, 2015 ×

Olá tudo bem?
To com um probleminha... quando eu pesquiso por , não aparece, como meu template é personalizado ele não tem isso

o que eu faço?

Resposta
avatar
admin
sábado, 10 outubro, 2015 ×

Olá Kaah.
Se seu template é personalizado (retirado da Web), ainda sim, existe os códigos nele. Você só precisa achar o caminho.
Por exemplo, insira a expansão em uma postagem e depois de publicada, ficará mais fácil.achar o caminho pelo seu navegador. =D
Espero ter ajudado. Beijinhos ♥

Resposta
avatar
admin
terça-feira, 05 janeiro, 2016 ×

E para retirar, vc saberia dizer como faz?
Bjs

Resposta
avatar
admin
quarta-feira, 06 janeiro, 2016 ×

Sim, Milca
Para que o Laia mais não apareça no seu blog veja este post:
Ocultar elementos no blogger

Escolha o que deseja e faça o tutorial. =D
Beijinhos ♥

Resposta
avatar
admin
sábado, 27 fevereiro, 2016 ×

ola eu ja fiz isso uma vez mais quando eu pesquiso no codigo html eu nao acho como eu nao estou consegindo se daquela vez eu cnsegui

Resposta
avatar
admin
sábado, 27 fevereiro, 2016 ×

bom, e quando o blog não tem ?
Exite outro formato a se procurar?

Resposta
avatar
admin
domingo, 28 fevereiro, 2016 ×

Olá Cia do leitor. Caso eu tenha entendido sua pergunta: Sim, existe outras designer para o leia mais, aqui mesmo no Quero Dicas, se procurar na caixa de busca, você irá encontrar outros formatos.
Espero que eu tenha ajudado.
Beijinhos ♥

Resposta
avatar
admin
domingo, 28 fevereiro, 2016 ×

Desculpe Livia e Laura, não entendi o que está acontecendo. Poderia me explicar melhor para eu poder ajudar?
Beijinhos ♥

Resposta
avatar
admin
terça-feira, 01 março, 2016 ×

Oi Bia
Muito Obrigada pela ajuda!

Resposta
avatar
admin
quarta-feira, 09 março, 2016 ×

Obrigada pela dica :) Eu comecei um blog agora só para me distrair, essa foi uma ótima dica :D

Resposta
avatar
admin
quinta-feira, 10 março, 2016 ×

Obrigado, passa no meu blog por favor..http://eusemprequissaber.blogspot.com.br/

Resposta
avatar
admin
domingo, 24 abril, 2016 ×

Obrigado, deu muito certo ;)
http://bloggabrielaluz.blogspot.com.br/

Resposta
avatar
admin
quinta-feira, 12 maio, 2016 ×

Adoro seu blog, me ajuda muito.
Parabéns!

Se quiser, de uma passadinha no meu blog
http://eullarennia.blogspot.com.br

Resposta
avatar
admin
sábado, 14 maio, 2016 ×

Obrigada Eulla por seu comentário e por gostar do Quero Dicas.
Dei uma passadinha no seu blog, ele é uma gracinha! =D
Beijinhos ♥

Resposta
avatar
admin
sábado, 18 junho, 2016 ×

Poxa Vida Muinto Bom valeu!

Resposta
avatar
admin
quarta-feira, 22 junho, 2016 ×

Muito obrigada, ajudou bastante! :)

Resposta
avatar
admin
segunda-feira, 07 novembro, 2016 ×

Eu tenho que fazer o esquema de postagem por postagem?

Resposta
avatar
admin
segunda-feira, 07 novembro, 2016 ×

Neste caso, sim!
Para que você tenha o leia mais automático acesse, leia e siga este tutorial: Leia Mais automático no Blogger

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.