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 Modelo → Editar HTML [Clique em Prosseguir] → Marque a caixinha Expandir modelos de widgets ♥ 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.
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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 "
2º 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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.
♦ 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;
#blog-pager-older-link {font-size:100%;width:200px;
Veja as imagens:
Antes:
Depois:
...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
.ico){kind=small}
Postagens
0 comentários:
Postar um comentário
Mensagem do formulário de comentário: