Inserir setas de navegação flutuante no Blogger

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Neste tutorial veremos como inserir setas de navegação flutuante no blogger, que nada mais é do que os links de “Postagens mais antigas” e “Postagens recentes” do blog.

Você já deve ter visto em alguns blogs links de navegação flutuantes, que deslizam ao longo da tela, possibilitando que seus visitantes possam navegar entre seus posts, facilitando assim, que ele encontre o post anterior, ou o post mais recente, fazendo com que ele continue navegando pelo seu blog.
Aqui no Mundo Blogger, os links de navegação são flutuantes, só que no meu caso, eu uso um plugin para wordpress.

Eu já mostrei, em outro artigo, que é possível alterar os links de navegação do blogger, alterando o texto padrão dos links, ou substituindo o texto por uma imagem, assim como já mostrei outras formas de personalização destes links.

O diferencial deste hack é que não usaremos javascript, o efeito dele é todo a base de puro CSS. Desta forma você não precisará e preocupar com problemas de conflitos entre scripts.

Ao implementar esse recurso, as setas dos links de navegação flutuam entre os posts, sempre que um visitante navega para cima ou para baixo da página.

Veja imagem demonstrativa:

Demonstração

[becape]Antes de mais nada é sempre bom fazer um backup do seu template antes de fazer quaisquer modificações, para evitar possíveis transtornos.[/becape]

Setas de navegação flutuante no Blogger

A instalação é bem simples, e você poderá ajustar a distância das setas, de acordo com o seu gosto.
Siga os passos a seguir para iniciar a instalação.

1º passo: Implementar o código CSS:

Se você estiver usando um dos modelos padrões do Blogger, Designer de Modelo, você poderá adicionar código CSS de 2 maneiras. Vou mostrar aqui as 2, assim você poderá escolher qual a maneira mais fácil para você, ok?

1. Adicionar CSS através do HTML do Template:

Acesse o painel do Blogger e clique no menu “Modelo“, em seguida clique no botão “editar HTML“.
No editor HTML do seu template, clique no botão “formatar modelo” e em seguida use as teclas Ctrl+F e procure pela tag ]]></b:skin>
 
Dica: Se ao lado desta tag tiver aparecendo aquela setinha preta, clique nela.

 
Você deverá colar o código CSS bem ACIMA da tag ]]></b:skin>
 
2. Adicionar CSS através do painel do blogger:

No painel do Blogger, clique no menu “Modelo”, em seguida clique no link “Avançado” e em seguida no link “Adicionar CSS”.
Dentro do campo à direita, é o local que você vai adicionar o código CSS, que eu estou disponibilizando logo aqui em baixo. Depois de adicionado, clique no botão “aplicar ao blog” para salvar as alterações.

 
ESTE É O CÓDIGO CSS PARA VOCÊ ADICIONAR:

/* Links de navegação flutuante 
----------------------------------- */
#blog-pager-newer-link {   /*-----botão do lado direito -postagens recentes----*/
float : left;
padding-left : 680px;     /* --ajuste as medidas aumentando ou diminuindo a numeração--*/
border : none;
}
#blog-pager-older-link {   /*----botão do lado esquerdo - postagens mais antigas----*/
float : right;
padding-right : 537px;    /* --ajuste as medidas aumentando ou diminuindo a numeração--*/
border : none;
}

.Blogprevlink{ 
margin-left:-100px; position:fixed;top:55%;display:block;text-decoration:none;width:54px;height:65px;z-index:99;
background:url(http://4.bp.blogspot.com/-FeHOY5F5Ve0/UgWuQ6757FI/AAAAAAAAASA/ydTmayGMZkc/s1600/button_prev.png) no-repeat; width:47px;
height:133px;
}

.Blogprevlink .detail{width:0;line-height:1.6em;overflow:hidden;position:absolute;top:0;left:70px;}
.Blogprevlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}

.Blognextlink{ 
margin-left:-100px; position:fixed;top:55%;display:block;text-decoration:none;width:55px;height:65px;z-index:99;
background:url(http://3.bp.blogspot.com/-IP9Rc29STno/UgWuOpgn01I/AAAAAAAAAR4/SoqbK53-TWk/s1600/button_next.png) no-repeat; width:47px;
height:133px;
}

.Blognextlink .detail{width:0;line-height:1.6em;overflow:hidden;position:absolute;top:0;left:70px;}
.Blognextlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}
#prevLink{left:10px !important}
#prevLink{left:30px}
#nextLink{right:30px; }
#nextLink .detail{right:70px !important;left:auto}
#nextLink{right:10px !important}

 

Agora vamos verificar as partes que você deve editar para ajustar as setas de acordo com a largura do seu template.

Para ajustar a seta referente as postagens recentes:
680 ? ajuste as medidas aumentando ou diminuindo esta numeração.
Para ajustar a seta referente as postagens mais antigas:
537 ? ajuste as medidas aumentando ou diminuindo esta numeração.
 
Se quiser substituir a imagem da seta, você deve usar uma imagem no tamanho de 47X133 (47 de largura e 133 de altura).
 
Seta de Postagens recentes é esta:  

http://3.bp.blogspot.com/-IP9Rc29STno/UgWuOpgn01I/AAAAAAAAAR4/SoqbK53-TWk/s1600/button_next.png

 
Seta de postagens mais antiga é esta: 

http://4.bp.blogspot.com/-FeHOY5F5Ve0/UgWuQ6757FI/AAAAAAAAASA/ydTmayGMZkc/s1600/button_prev.png

Eu recomendo que você salve a imagem no seu pc e hospede-a no seu álbum do blogger.
Substitua cada uma pela url da sua imagem.

2º passo: Incluir código HTML no template

Ainda no o painel do blogger, vá no menu “modelo >> editar html“. No editor HTML do seu template, clique no botão “formatar modelo” e em seguida use as teclas Ctrl+F, na caixinha de pesquisa, cole o código a seguir e tecle "enter" para localiza-lo:

<b:includable id='nextprev'>

 

Se ao lado desta tag tiver aparecendo aquela setinha preta, clique nela.

 
UMA DICA: Para facilitar a localização de código no novo editor html do blogger, eu recomendo que você verifique se aparecem setinhas pretas, e clique em TODAS as setinhas pretas que aparecer, para que fique visível todo o código do seu template.

Depois de localizado o código acima, verifique a codificação que aparece logo abaixo, que deverá estar igual a imagem demonstrativa:

 

Agora preste bastante atenção, pois o código todo deverá estar 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'><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>

Após localizado, selecione TODO o código e SUBSTITUA-O COMPLETAMENTE por este outro código que disponibilizo logo abaixo:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<!-- Postagens recentes -->
<a class='Blognextlink' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' id='nextLink'><div class='relative'>
</div></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<!-- Postagens mais antigas -->
<a class='Blogprevlink' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle' id='prevLink'><div class='relative'>
</div></a>
</span>
</b:if>

 
Atenção: é necessário que você substitua corretamente, senão ele não irá funcionar. Preste bastante atenção para não fazer nada errado!

Lembrando que as setas só serão visualizadas quando uma postagem estiver aberta.
 
Eu testei este recurso e comprovei que funciona em todos os modelos de templates do Blogger, tantos os novos Designer de Modelo, quanto nos Templates Mínima.
Para desenvolver este tutorial eu utilizei o modelo simple do Designer de Modelo. Portanto, siga todos os passos com atenção, para que o recurso funcione corretamente no seu template.
Se no seu blog o trecho de código html está aparecendo de forma diferente, tente localizar por algo semelhante.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn