Alterando links de navegação - "Anterior, Início, Próximo"
links de navegação
- Anterior Início Próximo
- Postagens mais recentes Página Inicial Postagens mais antigas
- Previous Home Next
Em Templates padrão do Blogger, esta opção só aparecerá ao chegar no final do número de postagens que você determinou que apareça em seu blog. Em cada página, esta opção pode ser alterada em configurações → postagens → comentários e, em seguida, no topo da página, irá aparecer mostrar no máximo.
Determine o número de postagens que você quer que apareça em cada página.
Voltando ao blog, você notará que no final das postagens existem links de navegação para exibir as próximas postagens, e estes links podem ser personalizados da maneira que você quiser, com textos, animações, imagens em gif, numeração, etc...
O objetivo deste artigo é ensinar como alterar, personalizar e deixar seu blog com o seu estilo. Caso não use um modelo padrão do Blogger, não se preocupe, pois o processo é o mesmo. Primeiro, decida o que quer colocar:
Se o que você deseja é inserir numeração de páginas, como no exemplo acima, acesse Como numerar as páginas do blog - colocando numeração nas postagens do blog
Mas, se você quer apenas personalizar os links de navegação, então vamos ao tutorial, mas primeiro, faça um backup do seu template:
Manipulando os links de navegação:
1° - Postagens mais antigas - Anterior - Previous Para alterar o primeiro link, acesse o menu no painel do seu blog, vá até modelo, e depois em editar HTML. Ao abrir a caixa com o código fonte do seu blog, dê um ctrl+f e procure pela seguinte linha:
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerpagetitle/></a>
Note que há um trecho destacado no código acima. Este trecho se refere a "retroceder", ou seja, Anterior ou Postagens mais recentes
Este trecho pode ser deletado e substituido ou, se você preferir, pode colocar uma imagem de uma seta ou algo do gênero.
Caso queira colocar uma imagem de uma seta ou animação, você deve substituir o código <img src='ENDEREÇO DA IMAGEM'/>.
Ao substituir por <data:newerpagetitle/> preste atenção para não deletar nenhuma tag. Basta inserir o endereço da imagem dentro do código <img src='Endereço da imagem'/>.
Abaixo, algumas imagens que você pode aplicar ao código. Basta clicar com o lado direito do mouse e copiar o endereço da imagem:
2° - Postagens mais recentes - Próximo - Next:
Este processo é igual ao primeiro, mas o código a localizar é diferente.
Novamente, localize o comando:
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderpagetitle/></a>
Abaixo, existem algumas imagens que você pode aplicar ao código. Basta copiar a URL clicando com o lado direito do mouse:
3° Página Inicial - Início - Home:
Este é o terceiro e último passo para colocar uma imagem personalizada. Onde aparece início ou home ou primeira página, basta localizar o seguinte comando:
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homemsg/></a>
Substitua o comando <data:homemsg/> por este código <img src='Endereço da imagem'/> Em seguida, coloque o endereço da imagem que você quiser dentro do código que você acabou de inserir.
Abaixo, algumas imagens para copiar a url:
O código <img src='Endereço da imagem'/> que você inseriu nas três situações acima, também pode ser substituído por textos personalizados.
Caso queira reduzir o conteúdo das páginas, você pode aplicar o resumo de postagens, e isso vale tanto para modelos padrão do Blogger, quanto para modelos personalizados.
Para aplicar este efeito, acesse Como colocar o resumo ("hack") de postagem no blog com ou sem script
5 comentários :
O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.
Assinar:
Postar comentários
(
Atom
)
Olá! vi esse mesmo tutorial em vários lugares mas comigo nunca dá certo. A url de uma das minhas três imagens, por exemplo, é https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-l0RuXnkweJY%2FVSn9Oijj2pI%2FAAAAAAAAAKQ%2Fx_DbvtTQQZc%2Fs1600%2Fhome%252Bicon%252B3.png&container=blogger&gadget=a&rewriteMime=image%2F*
ResponderExcluirmas sempre que eu coloco qualquer uma das três urls o blogger mostra a seguinte mensagem: The reference to entity "container" must end with the ';' delimiter.
Como eu resolvo isso? Sou um zero à esquerda em HTML.
Olá, O que acontece é que a referencia de imagem que o blogger fez está errada. Não sei ao certo, mas me parece alguma referencia de rascunho. O tutorial é simples.. primeiro você deve obter a url correta da imagem que vc deseja aplicar. você pode hospedar as suas imagens em seu Google plus.. renomeie para que fique com nome correto. Apos hospedar as imagens que você quer inserir nos links de navegação, refaça o tutorial acima. Um item importante: não é o tutorial que está errado e nem é você que não está conseguindo fazer.. simplesmente a url da imagem que você inseriu está errada. Dica: não utilize urls de imagens das próprias postagens pois pode acontecer este topo de erro.. sempre utilize imagens hospedadas no G+.
ExcluirAbraços... Andrew Silva
como faço para colocar numeração?
ResponderExcluirNão consigo fazer essas atualizações no meu blogger,o que eu faço?
ResponderExcluirNão consigo fazer essas atualizações no meu blogger,o que eu faço?
ResponderExcluir