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

Atualizado - 21/01/2011

Correção quebra layout das setas (passo 2)


 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 "#blog-pager" e insira o código "<b:if cond="data:blog.pageType != &quot;item&quot;">" antes e depois do próximo "}" insira "</b:if>".

Exemplo de como deve ficar:
<b:if cond="data:blog.pageType != &quot;item&quot;">
#blog-pager {
...
}
</b:if>

Faça isso também com "#blog-pager-older-link" e "#blog-pager-newer-link".

Obs.: Caso não encontre os códigos acima, passe para o próximo passo.
Obs.2: Essa parte vai retirar todos as aplicações CSS já existentes para o modelo de navegação.

3) 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-link&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = alts(&quot;a.blog-pager-newer-link&quot;).text();
alts(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
var olderLink = alts(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = alts(&quot;a.blog-pager-older-link&quot;).text();
alts(&quot;a.blog-pager-older-link&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>

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

5) 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-pager' id='blog-pager'>

<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-link' 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-link' 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).

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

Abrir código

 Abrir código

 Abrir código

Abrir código

Abrir código

Abrir código

Abrir código

Abrir código

Abrir código

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

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