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 == "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 (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 == "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>
Obs.: A segunda parte do código acima, depois de “<b:if cond=’data:blog.pageType != "item"’>” é 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.
Olá
tentei colocar mas parei no 3º passo não acho a tag de jeito nenhum
ok consegui instalar perfeitamente no blog de testes agora vou testar no outro
valeeeuuuuuu deu certo
tava procurando isso mais nao achava kk
vlw mesmo
um abç
ola sou Gusttavo Nascimento Dono do Portal G8..
Coloquei no meu templante do meu blog pego mas tem um problema aparece mas não tem nenhum link redirecionando para as outras postagens vc poderia me ajuda a resolve fikari grato…..
portal-g8.blogspot.com.br
Como fazer para a borda da seta voltar para a seta quando o usuário não está mais com o mouse em cima? Tipo, passou o mouse aparece a caixa com o link, mas aí fica só a seta, sem a borda. Como posso mudar isso no CSS? Abraço e obrigado!
Poxa, foi difícil encontrara essa dica! ehhehe Testando agora!
Poxa, foi difícil encontrar essa dica! ehhehe Testando agora!
Adorei! muito obrigado funcionou perfeitamente
Não encontrei a tag
Excelente! Funcionou muito bem, e ainda pode ser personalizado.
Muito bom mesmo, agradeço por compartilhar este utilitário e pelo esforço para adaptá-lo ao blogger, e tornar o código público.
Parabéns.
Parabéns pelo trabalho, Paulo. É disso que a internet precisa… Material de qualidade, feito por gente que entende do assunto!
Abç
Parabéns pelo artigo, excelente explicação. Ainda estou criando um novo layout para o meu blog e no blog de testes funcionou muito bem.
Porém, encontrei só um probleminha, a ordem dos artigos ficou inversa, ou seja, aquele que seria o proximo artigo, aparece com artigo anterior e vice versa.
como resolvo isso?
Obrigado
não cpnsegui, deu erro
vlwwww….até q enfim consegui
mt obrigado
Muito obrigado, já faz algum tempo que estava procurando isso, e ficou ótimo no meu Blog/Site. Parabéns!!!
Esse código é demais.
Fica muito melhor com essa seta no lado e o título do artigo.
Com certeza aumenta o tempo do visitante na página.
Obrigado, Abraços.
Achava legal no WordPress, alias eu uso lá, mas no blogger já procurava a um bom tempo.
Obrigada.
Ficou show de bola.
Ola! meu guru!,
antes de mais nada, gostaria de resaltar o belo trabalho que você faz em seu blog.
Depois de muitas tentativas de corrigir esta falha, eu desiste e vim aqui para lhe pedir um auxilio… eu gosto muito destas setas laterais, mas em meu blog, o wwww,tudoseo.com, não funciona bem no internet explorer, você poderia me dar uma dica de como corrijo esta falha, aliais tenha visto muitos por ai com esta falha.. porem como o seu esta perfeito.. então…. lhe aguardo…
Utilizo o WordPress Mauricio, por isso. Poderia tirar um prit do erro e me mandar?
abraços
Caro Estevão, creio que já resolvi o problema, e creio que isto possa estar ocorrendo com outros, o que ocorre é que no ie, fica dobrando, e não funciona. ou seja aparece duas setas laterais e não se consegue clicar com o mouse para ir ao post seguinte ou retornar ao post anterior.. resolvi este problema como o painel do blog, colocando o script css em adcionar css, e então passou a funcionar….
Agradeço pelo trabalho e compartilhamento, muito bom.
Mas em meu blog não funcionou por completo. Apareceu as setas, quando passo o mouse em cima, só aparecia PRÓXIMO, e ANTERIOR, e nada mais. Também estava muito rápido, quase não dava para clicar. Creio que seja problema com meu template ou com o meu Chrome.
Rodrigo, tente fazer de novo. Mas acredito que seja conflito de JS.
abraços.
Alguém sabe dizer se existe um plugin pra colocar essas setas num site normal, sem ser num blog?
Não há plugin, você tem que desenvolver pegando só o HTML e o Javascript.
Abraços.
Obrigado pelo post é muito legal mas eu estou com um problema na hora de localizar esse trecho no novo editor de HTML do Blogger… não consigo encontrar isso!….
Clica dentro da caixa que contém o código e dê Ctrl+f.