Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1471608410
Vida do cache: 1472904410
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Blogger Destaques Postagens

Floating NextPrev – Setas de navegação nos posts para Blogger

 

Atualizado – 14/06/2012 (Código Reformulado!)

Não é fácil manter os usuários conectados em uma página, é uma tarefa difícil e exige dedicação do blogueiro para encontrar formas de conquistar e prender cada visitante em seu blog.

Uma nova forma interessante para melhorar esse tempo de permanência dos usuários foi desenvolvido pelo Claudio Sanches do Ferramentas Blog, o plugin Floating NextPrev para WordPress, todavia o Claudio encontrou algumas dificuldades e achou melhor desenvolver o plugin apenas para WordPress. Como eu adoro desafios, logo fui procurar alguma solução para rodar o plugin no Blogger, e consegui!

Peguei um javascript desenvolvido pelo Dicas para Blogs, adaptei para funcionar junto com o Floating NextPrev e depois de muito trabalho o resultado foi positivo!

Plugin em funcionamento no Blogger

Antes de ensinar como colocar os botões de navegação no seu blog, quero deixar bem claro que todo o sistema foi desenvolvido pelo Claudio Sanches, apenas adaptei o código para funcionar no Blogger.

Siga o tutorial:

1) Faça login no Blogger, entre em “Modelo” – > “Editar HTML”. Depois marque a caixa “Expandir modelos de widgets”;

2) Procure (Ctrl + f) por ]]></b:skin> e cole o seguinte código logo ABAIXO da tag encontrada:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var alts = jQuery.noConflict();
alts(document).ready(function(){
var newerLink = alts(&quot;a.blog-pager-newer-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-newer-link2&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = alts(&quot;a.blog-pager-newer-link2&quot;).text();
alts(&quot;a.blog-pager-newer-link2&quot;).text(newerLinkTitle);
});
var olderLink = alts(&quot;a.blog-pager-older-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-older-link2&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = alts(&quot;a.blog-pager-older-link2&quot;).text();
alts(&quot;a.blog-pager-older-link2&quot;).text(olderLinkTitle);//rgt
});
});

var fnp = jQuery.noConflict();
fnp(document).ready(function(){

    fnp(&quot;.fnp-previous&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-10
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });
    fnp(&quot;.fnp-previous&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-400
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().animate({
            opacity:0},500)
    });fnp(&quot;.fnp-next&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-10
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });fnp(&quot;.fnp-next&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-400
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().animate({
            opacity:0
        },500);
    });
});
</script>
</b:if>

3) Procure (Ctrl + f) por <b:includable id=’nextprev’>, selecione todo o código a partir dessa tag até a primeira tag </b:includable>.
Ou seja, selecione isso:

<b:includable id='nextprev'>
...
</b:includable>

Obs.: Existem várias tags </b:includable>, é importante você selecionar até a primeira que você ver.

4) Substitua o código selecionado por:

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fnp-nav'>
<div class='blog-pager2' id='blog-pager2'>

<b:if cond='data:newerPageUrl'>
<div class='fnp-previous'><a rel='prev'><div class='fnp-box-left'><div class='fnp-content-left'><div class='fnp-content-border'/><div class='fnp-nav-title'>Anterior</div><div class='fnp-nav-link'><a class='blog-pager-newer-link2' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' style='display: block;'/></div></div></div></a></div>
</b:if>

<b:if cond='data:olderPageUrl'>
<div class='fnp-next'><a rel='next'><div class='fnp-box-right'><div class='fnp-content-right'><div class='fnp-content-border'/><div class='fnp-nav-title'>Próximo</div><div class='fnp-nav-link'><a class='blog-pager-older-link2' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/></div></div></div></a></div>
</b:if>

</div>
<div class='clear'/>
</div>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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'>Página Anterior</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'>Próxima Página</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:if>
</b:includable>

Obs.: A segunda parte do código acima, depois de “<b:if cond=’data:blog.pageType != &quot;item&quot;’>” é o código de navegação de páginas do blog, essa parte pode ser editada como quiser, só não retire a condicional (if).

5) Agora devemos aplicar o estilo CSS. Escolha um dos modelos abaixo, abra o link e copie o código correspondente.

 

 

 

 

 

 

 

 

6) Agora procure por ]]></b:skin> e cole o código antes dessa tag encontrada.

7) Teste, se não deu nenhum erro e a página visualizada não sofreu alteração, salve. Os botões de navegação só serão vistos quando alguma postagem for aberta.

Espero que gostem do resultado.

Obs.: Não copie o post! Tivemos trabalho em desenvolver o widget, caso queira compartilhar o código, coloque os créditos do Códigos Blog e do Ferramentas Blog.



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:

253 Comentários

  1. Excelente! Funcionou perfeitamente no meu site. Obrigado. Ah, aceito sugestões. rs.

    Forte abraço.

  2. Meu parceiro, coloca de novo aí os codigo por favor, eles estão off’s! Obrigado!

  3. Diogo disse:

    Olá, os links dos CSS estão OFF.

  4. Olá Paulo, ótima dica e muito obrigado cara, porém tive de parar na penúltima parte, na hora de pegar a formatação em CSS qualquer um dos modelos dos links mostram-se aspirados. Vc ainda tem esse código ai com você? Desde já grato!

  5. Joani RP disse:

    Muito bom esse post, mas gostaria de saber se ele funcionaem dispositivos moveis? Existe algum código para blogger que ao arrastar o dedo para um dos lados, apareça uma seta indicando o post anterior/próximo?

    Obrigado!

  6. Erick disse:

    Os links dos modelos de botões estão Off!

  7. Gustavo disse:

    Não está funcionando, poderia arrumar o código ?

  8. Adriana disse:

    Funcionou, mas não sei porque a caixinha de Anterior não aparece o titulo do post. Alguma ideia?

Para enviar seu comentário, preencha os campos abaixo:

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