» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Configure o Next Post e o Previous Post do seu Blog


|


Quando você está lendo um post e, no final quando está terminando a sua leitura sempre tem os links de postagem mais recente e postagem mais antiga.

Se você gosta do que leu, muitas vezes é impulsionado a clicar em um destes links e continuar a ler os bons artigos do blog.

» Você pode deixar estes links como estão ou pode alterá-los colocando imagens com setas para a direita ou para a esquerda, com os dizeres Posts mais Antigos e Posts mais Recentes, com os símbolos ◄ ► ou até com o título do post anterior e do próximo, etc…
Vou ensinar como fazer tudo isso neste artigo:
Não Se Esqueça:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Entre no seu blog: Vá em ModeloEditar HTML→ Marque a caixinha Expandir modelos de widgets

Encontre o bloco de linhas abaixo▼

Procure pela Linha: <b:includable id='nextprev'>
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
</div>
  <div class='clear'/>
</b:includable>

»Não se preocupe se o seu bloco de linhas estiver um pouco diferente deste o que interessam são as tags em vermelho.

1º Colocando imagens de setas nos links:
» Encontre e defina as imagens de setas para a direita, para a esquerda e de “Home” que te agradarem mais. Procure em sites de ícones.


Sugestões:» Ícones para o seu blog / » 22 Links de Sites de Ícones para Download → Nos sites de ícones procure por Arrow que significa Seta em inglês.

Salve as imagens em seu computador » Hospede em algum site de imagens ou no seu próprio blog » Guarde a URL das imagens

Eu escolhi estas imagens:

Next Home Previous

Para colocar a seta da Esquerda que significa Post mais Recente
Substitua a primeira tag em vermelho <data:newerPageTitle/> do código acima por esta tag:
<img alt='Next' border='0' src='URL da Seta da Esquerda'/>

Para colocar a seta da Direita que significa Post mais Antigo
Substitua a primeira tag em vermelho <data:olderPageTitle/> do código acima por esta tag:
<img alt='Previous' border='0' src='URL da Seta da Direita'/>

Para colocar a imagem de Home que Significa Início
Substitua a primeira tag em vermelho <data:homeMsg/> do código acima por esta tag:
<img alt='Home' border='0' src='URL da IMAGEM de Home'/>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Veja como ficou neste Blog de Demonstração no final do post.
2º Colocando Símbolos nos Links
Existem vários símbolos que representam setas que você pode colocar no seu blog. No Demoplate eu coloquei os símbolos ◄ ► que são representados pelos atalhos Alt+17 e Alt+16 respectivamente.

Veja neste post: Símbolos - Atalhos do Teclado a lista de símbolos e atalhos do teclado para você colocar.
Para colocar a seta da Esquerda que significa Post mais Recente
Substitua a primeira tag em vermelho <data:newerPageTitle/> do código no começo do post pelo atalho do símbolo:
[Alt+17 = ] ou 
[Alt+27 = ] ou 
[Alt+174 = «]
Para colocar a imagem da Direita que significa Post mais Antigo
Substitua a primeira tag em vermelho <data:olderPageTitle/> do código no começo do post pelo atalho do símbolo:
[Alt+16 = ] ou 
[Alt+26 = ] ou 
[Alt+175 = »]

O Código ficará assim:
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
</div>
  <div class='clear'/>
</b:includable>

Neste caso não alterei o link do início. Mas fica a seu critério alterá-lo ou não.

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Para colocar dizeres diferentes dos pré estabelecidos pelo blogger você faz o mesmo procedimento descrito acima.
3º Colocando os Títulos dos Posts no lugar dos links Next Post e Previous Post
1- Aqui vamos usar jQuery e precisamos colocar o link do javascript no HTML do blog:

» Cole esta tag <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>  acima da tag </head>


♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

♦ Clique em Fechar .


2- Vá em Layout » Clique em Adicionar um Gadget » Escolha um gadget HTML/JavaScript » Cole o código abaixo em Conteúdo e Clique em Salvar.

<style type="text/css"> 
#blog-pager-newer-link {font-size:100%;width:200px;text-align:left;} 
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;} 
</style> 
<script type="text/javascript">
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
</script>

Visualize seu blog e verá os títulos dos posts anterior e próximo. Confira no blogs de demonstrações Demoplate2.

OBS: »Você pode configurar os títulos como desejar alterando estas linhas de código CSS:

#blog-pager-newer-link {font-size:100%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;}

Veja as imagens:

Antes:
Nexpost02


Depois:

Nexpost03


Apliquei este hack aqui no TPV. Veja no final deste post abaixo dos comentários.
OBS: Este hack funciona em todos os templates do blogger 2006 e 2010.

Fontes - Tradução e Adaptação dos artigos:
How To Change Older Post And Newer Post Link
Replace Older & Newer Post Links With Post Titles
Gostou deste post? Compartilhe:
Áurea
Sobre a Autora:
Áurea Farmacêutica, mineira, Amo ensinar e gosto muito de internet. Comecei a blogar em 2007, me apaixonei e aprendi a customizar os blogs estudando sozinha. A partir daí publico tudo o que aprendo e acho legal para que as pessoas possam personalizar seus blogs do jeito que quiserem, assim como eu
G+ Facebook Twitter Linkedin

3 comentários :

  1. Ajudou muito, parabéns pelo blog, era oque eu precisava para levar minha "carreira" de blogueiro a diante. Obrigado mesmo.

    ResponderExcluir
  2. @Chuck KilmisterOlá Chuck,
    Espero que o TPV continue sempre ajudando você!
    É um prazer!

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger