Pesquisar

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

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

- fonte e créditos deste presente post :
 
 

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 [Clique em Prosseguir] → 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 "

Colocando Símbolos nos Links
Existem vários símbolos que representam setas que você pode colocar no seu blog. 
Veja em:
 
..." Demoplate ...":
..." 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.

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


  ...hack 

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

0 comentários:

Postar um comentário

Mensagem do formulário de comentário:

comentado

IntenseDebate Comments - Blog Stats

IntenseDebate Comments - Last 5

Facebook Google+ Twitter RSS
http://mensagensdiversificadas1.blogspot.com, é um espaço onde tudo acontece, MD 1 - mensagens diversificadas1,blogspot, template, background, aulas, cosméticos, naturais, ecológicos, recados, orkut, mensagem, mensagens, diversificadas, virtual, lembrança, poesia, monografias,poemas,amor,vida,etc.