Saiba como:"Configurar o " Next Post " e o "Previous Post" do seu Blog
Autor: Edilene brandao da silva | Publicado: 2012-12-29T18:42:00-08:00




Saiba como:"Configurar o " Next Post " e o "Previous Post" do seu Blog






- fonte e créditos deste presente post :

templatesparavoce


&nbsp;

&nbsp;




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 [Clique em Prosseguir] → Marque a caixinha Expandir modelos de widgets   


Encontre o bloco de linhas abaixo▼

Procure pela Linha: &lt;b:includable id='nextprev'&gt;

&nbsp;

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

&nbsp;&nbsp;&nbsp; &lt;a class='home-link' expr:href='data:blog.homepageUrl'&gt;&lt;data:homeMsg/&gt;&lt;/a&gt;

&nbsp;&nbsp;&nbsp; &lt;b:if cond='data:mobileLinkUrl'&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class='blog-mobile-link'&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a expr:href='data:mobileLinkUrl'&gt;&lt;data:mobileLinkMsg/&gt;&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;/b:if&gt;
&lt;/div&gt;
&nbsp; &lt;div class='clear'/&gt;
&lt;/b:includable&gt;


»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:»&nbsp;Ícones para o seu blog / »&nbsp;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: 


&nbsp;&nbsp;




Para colocar a seta da Esquerda que significa Post mais Recente

Substitua a primeira tag em vermelho &lt;data:newerPageTitle/&gt; do código acima por esta tag: 
&nbsp;
&lt;img alt='Next' border='0' src='URL da Seta da Esquerda'/&gt;




Para colocar a seta da Direita que significa Post mais Antigo

Substitua a primeira tag em vermelho &nbsp;

&lt;data:olderPageTitle/&gt;&nbsp;
do código acima &nbsp;
por esta tag:&nbsp;


&lt;img alt='Previous' border='0' src='URL da Seta da Direita'/&gt;




Para colocar a imagem de Home que Significa Início

Substitua a primeira tag em vermelho &nbsp;

&lt;data:homeMsg/&gt;&nbsp;

do código acima por esta tag:&nbsp;


&lt;img alt='Home' border='0' src='URL da IMAGEM de Home'/&gt;
&nbsp;


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

♦ Clique em Salvar modelo.


"Veja como ficou neste Blog de Demonstração "



2º Colocando Símbolos nos Links

Existem vários símbolos que representam setas que você pode colocar no seu blog.&nbsp;
Veja em:
&nbsp;
..." Demoplate ...":
..." símbolos ◄ ►&nbsp;
que são representados pelos atalhos Alt+17 e Alt+16 respectivamente.

"Veja neste post: Símbolos - Atalhos do Teclado&nbsp;
&nbsp;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&nbsp;

&nbsp;&lt;data:newerPageTitle/&gt;&nbsp;

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 &lt;data:olderPageTitle/&gt;&nbsp;
do código no começo do post&nbsp;
pelo atalho do símbolo:


[Alt+16 = ►] ou 
[Alt+26 = →] ou 
[Alt+175 = »]


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

&nbsp;&nbsp;&nbsp; &lt;a class='home-link' expr:href='data:blog.homepageUrl'&gt;&lt;data:homeMsg/&gt;&lt;/a&gt;

&nbsp;&nbsp;&nbsp; &lt;b:if cond='data:mobileLinkUrl'&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class='blog-mobile-link'&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a expr:href='data:mobileLinkUrl'&gt;&lt;data:mobileLinkMsg/&gt;&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;/b:if&gt;
&lt;/div&gt;
&nbsp; &lt;div class='clear'/&gt;
&lt;/b:includable&gt;



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 &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/&gt;&nbsp; acima da tag &lt;/head&gt; 


♦ 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.

&lt;style type="text/css"&gt; 
#blog-pager-newer-link {font-size:100%;width:200px;text-align:left;} 
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;} 
&lt;/style&gt; 
&lt;script type="text/javascript"&gt;
$(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("&lt;&lt; " + 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 + " &gt;&gt;");//rgt 
}); 
}); 
&lt;/script&gt;


"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:



&nbsp;
...hack&nbsp;
aplicado
em
no TPV (templates Para Você). "




"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 &amp; Newer Post Links With Post Titles