Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1511350971
Vida do cache: 1511394171
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Tutoriais Blogger

Inserir setas de navegação flutuante no Blogger

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:

seta-de-navegação-flutuante-no-Blogger

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.
localizando a tag skin no blogger
 
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.
adicionar css pelo painel do blogger

 
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.
01-clique na setinha

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

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.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

12 Comentários

  1. Muito obrigada, funcionou direitinho, parabéns pelo belo trabalho.

  2. Olá, tudo bem?
    Qual o código que eu uso para deixar as setas como estas do mundo blogger que ao clicar em cima aparece inclusive o título da próxima postagem????
    Obrigado

  3. Aline disse:

    n consegui de nenhum jeito :( como eu so noob

  4. jailson disse:

    Ola vanessa você não tem nenhum tutorial que mostra como colocar setas parecidas com essas do seu blog.
    estou a procura de como inserir setas iguais a essas.

  5. Thais disse:

    Oi vanessa! Amei, mas me ajuda? Ao abrir o blog só aparece o “postagens mais antigas”, ao clicar nele, no próximo post aparece somente o “postagens mais recentes” que por sua vez retorna ao post anterior. Fica nesse vai e vem e não avança para os demais posts. É possível arrumar isso?
    Muito obrigada!!!!

  6. Hadrien disse:

    Funcionoiu, deu um efeito bacana

  7. Igor Montemor disse:

    Muito bom o tutorial, porém o efeito não ficou muito legal em meu template.

  8. Luiz Henrique disse:

    Simplesmente espetacular! Estava sempre procurando como adicionar essa função no Blogger a ai você apareceu! Simplesmente fantástico!

  9. schreiyarai ? disse:

    Ótimo tutorial, como sempre.
    Vanessa, você é a melhor.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.