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 Modelo → Editar 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:

  

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:



Depois:




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