Uma coisa que os blogueiros devem estar sempre atentos é em como manter seu visitante por mais tempo em seu site, aumentando suas chances de atrair este visitante de volta em seu blog futuramente ou até o fidelizando.
E uma forma que pode ser utilizada para melhorar esse tempo de permanência dos usuários foi desenvolvido pelo Claudio Sanches do Ferramentas Blog, que é o plugin Floating NextPrev para WordPress, todavia o Claudio encontrou algumas dificuldades e acabou desenvolvendo o plugin apenas para WordPress. Daí o Paulo Estevão do Códigos blog adaptou o plugin para rodar no blogger, e deu certo !!!
Tutorial:
1. Faça login no Blogger, e vá em “Modelo” -> “Editar HTML”.
<b:if cond='data:blog.pageType == "item"'> <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("a.blog-pager-newer-link2").attr("href"); alts("a.blog-pager-newer-link2").load(newerLink+" .post-title:first", function() { var newerLinkTitle = alts("a.blog-pager-newer-link2").text(); alts("a.blog-pager-newer-link2").text(newerLinkTitle); }); var olderLink = alts("a.blog-pager-older-link2").attr("href"); alts("a.blog-pager-older-link2").load(olderLink+" .post-title:first", function() { var olderLinkTitle = alts("a.blog-pager-older-link2").text(); alts("a.blog-pager-older-link2").text(olderLinkTitle);//rgt }); }); var fnp = jQuery.noConflict(); fnp(document).ready(function(){ fnp(".fnp-previous").mouseenter(function(){ fnp(".fnp-content-left").stop().animate({ left:-10 },700); fnp(".fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link").stop().delay(500).animate({ opacity:1 },500); }); fnp(".fnp-previous").mouseleave(function(){ fnp(".fnp-content-left").stop().animate({ left:-400 },700); fnp(".fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link").stop().animate({ opacity:0},500) });fnp(".fnp-next").mouseenter(function(){ fnp(".fnp-content-right").stop().animate({ right:-10 },700); fnp(".fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link").stop().delay(500).animate({ opacity:1 },500); });fnp(".fnp-next").mouseleave(function(){ fnp(".fnp-content-right").stop().animate({ right:-400 },700); fnp(".fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link").stop().animate({ opacity:0 },500); }); }); </script> </b:if>
3. Procure agora pelo código <b:includable id=’nextprev’>, selecione todo o código a partir dessa tag até a primeira tag </b:includable>.
Ou seja, selecione este intervalo de HTML:
<b:includable id='nextprev'> ... </b:includable>4. Substitua o código selecionado por:
<b:includable id='nextprev'> <b:if cond='data:blog.pageType == "item"'> <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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'/></div></div></div></a></div> </b:if> </div> <div class='clear'/> </div> </b:if> <b:if cond='data:blog.pageType != "item"'> <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'>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 + "_blog-pager-older-link"' 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>5. Agora você deve aplicar o CSS. Escolha um dos modelos abaixo e clique em "Abrir Código", após copiá-lo procure por ]]></b:skin> e cole o código antes dessa tag encontrada.
Queria deixar bem claro que tantos os códigos, quanto as fontes de pesquisa para este tutorial foram retirados dos sites Ferramentas Blog e Códigos Blog.
Os titulos dos posts não aparecem :(
ResponderExcluir