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 != "item"">" antes e depois do próximo "}" insira "</b:if>".
Exemplo de como deve ficar:Faça isso também com "#blog-pager-older-link" e "#blog-pager-newer-link".
<b:if cond="data:blog.pageType != "item"">
#blog-pager {
...
}
</b:if>
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 == "item"'>4) Procure (Ctrl + f) por <b:includable id='nextprev'>, selecione todo o código a partir dessa tag até a primeira tag </b:includable>.
<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-link").attr("href");
alts("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = alts("a.blog-pager-newer-link").text();
alts("a.blog-pager-newer-link").text(newerLinkTitle);
});
var olderLink = alts("a.blog-pager-older-link").attr("href");
alts("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = alts("a.blog-pager-older-link").text();
alts("a.blog-pager-older-link").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>
Ou seja, selecione isso:
<b:includable id='nextprev'>Obs.: Existem várias tags </b:includable>, é importante você selecionar até a primeira que você ver.
...
</b:includable>
5) Substitua o código selecionado por:
<b:includable id='nextprev'>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).
<b:if cond='data:blog.pageType == "item"'>
<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 + "_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-link' 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>
6) Agora devemos aplicar o estilo CSS. Escolha um dos modelos abaixo, abra o link e copie o código correspondente.
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.













A tempos q queria isso p Blogger.
ResponderExcluirParabéns!!
Paulo, testei em meu blog e foi instalado perfeitamente. Só uma dúvida (n sei se é um erro):
ResponderExcluirEscolhi o 6º modelo de abas, mas qndo se coloca o mouse sobre ela, o título da postagem fica distante do "Anterior" e "Próximo".
Tem como 'consertar esse espaço' no código?
Estou com problemas no meu blog, ao invéz de aparecer na lateral as duas flechas, aparece apenas o nome do post e em baixo do post e fico mto bugado, se tiver como resolver isso pra mim eu agradeço :D
ResponderExcluirParabéns!
ResponderExcluirCom certeza vai ajudar muita gente, valeu o esforço!
Obrigado pelas ótimas dicas de sempre.
Sucesso para o Códigos Blog!
@Luís,
ResponderExcluirÉ comum ter variações no CSS, depende muito do layout de cada blog.
No seu caso, procure por: #blog-pager a
Lá você vai encontrar padding e margin. Coloque os dois com 0.
Exemplo:
#blog-pager a {
padding: 0;
margin: 0;
}
abraços
@Jonas,
ResponderExcluirdeixa eu ver, manda o link.
legal o post, parabéns xD
ResponderExcluirOpa! Grande, Paulo...
ResponderExcluirDeu certo a sua dica. Ficaram no lugar certo.
Mais uma vez, obrigado e parabéns pela postagem!
@Luís,
ResponderExcluirvolte sempre. =]
Cara muito Show sua postagem estive procurando esses dia sobre isso como colocar é já tinha visto no ferramentasblog que não dava para blogs... bem não tinha, agora tem rsrs e na hora que vi gostei de mais e já fui tentando colocar em meu site, fiz tudo direitinho achei os códigos que tem q mudar etc... mas mesmo assim não apareceu nada. Será que é porque estou usando template? e outra coisa, antes de salvar eu visualizo primeiro correto? ou tenho que salvar pra aparecer? Pode me ajudar? e PARABÉNS mais uma vez 100% codigosblog.
ResponderExcluirFaça o passo dois novamente. Acho que agora vai. =]
ExcluirMeus PARABÉNS!!! Ficou perfeito, na minha opinião, combinou perfeitamente com meu layout.
ResponderExcluirAgora mais um motivo para ficar no blogger!
Boa sorte!!!
Ai meu chará, obrigado por essa postagem, ficou lindo em meu blog, fico grato, fiz algumas modificações no CSS para ficar no estilo do meu site, caso alguem queira modificar o fundo das setas, é só entrar em contato.
ResponderExcluirDesde já agradeço.
Paulo Estevão Adorei o tutorial :D
ResponderExcluirem bora que no meu blogger tive que adpatar algumas coisas no CSS
Ficou muito bom.
ResponderExcluirValeu Paulo por conseguir adaptar para o Blogger.
@Arte,
ResponderExcluirfaça como falei e vai funcionar.
abraços
Parabéns cara, fantástico. Estou usando já! Com os devidos créditos!
ResponderExcluirGostei da dica! Obrigada!
ResponderExcluirMuito bom....
ResponderExcluiraqui no meu blog infelizmente não apareceu a seta, fiz tudo certinho .
ResponderExcluirOlá Paulo, comigo não funcionou...
ResponderExcluirVocê poderia dar uma olhada? Por Favor!
http://templatesoff.blogspot.com/ (Blog de teste) :]
Obrigado!
Não vi nada no seu blog de teste. =x
ExcluirConsegui colocar só me tira uma dúvida, já esta no site mas aparece em branco quando clica nela como faço pra aparecer os textos ou os link? Porque esta com o textos próximo e anteriores mas não há links. Desculpe pela ignorância.
ResponderExcluirPaulo Estevão, tem um errinho básico no código, veja bem, o seu último post é Contador de seguidores do Google Friend Connect, isso deveria ser a Anterior, certo, mas na sua página por exemplo está como Próxima e na verdade não existe próxima, pois esta postagem e a última, logo, deveria mostrar apenas a anterior e não a próxima, espero que tenha entendido, e só para complementar, e só trocar as classes do último código, Um abraço e bom trabalho, sucesso!
ResponderExcluirO meu apareceu desconfigurado no fim do post. Fiz tds os passos e revi duas vezes, está tudo certo, mas não funcionou.
ResponderExcluirOlá Paulo...
ResponderExcluirNo meu blog não funcionou... Tentei várias e várias vezes, fiz tudo direitinho, mas o título do post (a parte mais importante), não é exibido. O endereço de meu blog é http://www.bovoqui.com.
Me ajude, por favor!
Parabéns
ResponderExcluirA segunda parte do código acima, depois de “” é 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).
ResponderExcluirnão entendi essa parte ;x
NO meu não funcionou. Pode me ajudar?
ResponderExcluirfiz do jeito que vc falou por enguanto não apareceu as setas mais salvei mesmo assim porque não alterou nada e fiz o backup....
ResponderExcluirMais não entendi direito porque não apareceu imediatamente ???
Obrigado aeee e parabens.
Tem que abrir um post para você ver o sistema funcionando.
ExcluirNo meu blog não está funcionando!
ResponderExcluirInfelizmente não deu certo comigo!
ResponderExcluirPutz, queria muito isso pra por no meu Gostei Bloguei, mas não apareceu o link pra mudar o post quando poem o mouse em cima! =/
ResponderExcluirCara, parabéns pelo tutorial! Fiz tudo certo aqui, as setas apareceram normalmente, porem quando você vai clicar em alguma das setas simplesmente ele não passa para o próximo post, na acontece nada. Será que dá para você dar uma olhadinha. O meu blog é www.baladitroco.com
ResponderExcluirNem comigo colega, somos 2 :(
ResponderExcluirDeu certo mais não consigo por os liks para postagens anteior e mais recentes
ResponderExcluirCara, muito obrigado, deu tudo certo, ficou muito show no meu blog, outro ponto forte no layout do Ferramentas Blog é o efeito que se tem ao passar o mouse sobre um link, seria muito legal aplica-lo no blogger.
ResponderExcluirObrigado.
Olá, Paulo.
ResponderExcluirServiu direitinho, parabéns, ficou muito bom.
Queria fazer uma pergunta um pouco fora do assunto deste artigo: No rodapé de sua postagem, percebi que você conseguiu tirar alguns recursos como o "Postado por" e colocou outros. Gostaria de saber, qual código do template você retirou para tirar este, e tem também para tirar os "Marcadores"?
Desde já, obrigado, e bastante sucesso!
@Jose,
ResponderExcluirfaça direitinho, pois isso é automático.
muito bom esse recurso mas no meu template principal não gera os link pras outras postagem mas no de teste funciono, como faço pra funciona no que eu uso?
ResponderExcluirAchei muito bom o código, mas deu o seguinte erro:
ResponderExcluirO widget id "Blog1" não pode conter o elemento: "#comment". O widget só pode conter elementos b:includable.
Error 500
O que devo fazer? Cuidei mas não dá certo!(Procure (Ctrl + f) por , selecione todo o código a partir dessa tag até a primeira tag .)
E aí pessoal, desculpa pelo comentário anterior, O código funciona e não tem erro, cometi um equivoco e já resolvi, na verdade sou novo no blogger,mas estou aprendendo!
ResponderExcluirObrigado pelo código!
Caro amigo Paulo Estevão, apreciei muito vc ter me respondido. Mas eu intelei tudo como manda o pst, mais os textos, e links proximo e e anterior não aparece. o cs ta perfeito.. veja o link do meu blog
ResponderExcluirhttp://missaonolar.blogspot.com
me ajuda caro amigo, não sou muito bom de html.
Jose,
Excluirseu blog tá tão poluido por elementos em volta da página, fica até impossível analisar o HTML.
abraços
Excelente! Me ajudou demais!
ResponderExcluirObrigado!
poderia me ajudar.. veja como ficou no meu blog .. http://missaonolar.blogspot.com/2011/12/verdadeira-fe.html
ResponderExcluirMuito bom o post.
ResponderExcluirMas explica como colocar os links nas setas aê, pois só aparece próximo e anterior!!!!
@Banana,
ResponderExcluirjá está com link.
abraços
Olá !!
ResponderExcluirEstava doida para achar esta dica ! Infelizmente no meu blog não deu certo, não apareceu nada após as mudanças...
Uma pena :(
Mas parabéns mesmo assim, pois outros conseguiram e seu passo a passo está super simples e fácil de aplicar ;)
Grande abraço e Feliz 2012 !
Paulo Estevão, boa noite coloquei no site só aparece as setas e a escrita próximo e anterior, não esta aparecendo os link pra ir pro próximo ou a anterior fica em brando sem links, já tentei mais de 50 vezes,. Já segui seus faça direitinho, pois isso é automático. será??
ResponderExcluirPode me da uma luz ai? uma ideia? Porque o faça direitinho só se eu tiver sendo muito burro. Me desculpe por alguma coisa mas quando quero algo fico meio loco aqui ate conseguir kkkk entra ai e de uma olhada deixei aplicado www.artenocorel.com.br e veja como esta.. Por favor
Eu fiz tudo o que estava pedindo, mas em vez de aparecer as setas no lado da página, elas aparecem em baixo como o padrão do blogger, o que eu faço?
ResponderExcluirDexa pra lá agora eu consegui!!!
ResponderExcluirPOR FAVOR deixe um pouco mais claro que a gente tem que colocar esse código das setas lá no "Adicionar CSS" !! kkk
Cara você é Demais! Legal... :D
ResponderExcluirDeu Muito Certo...
ResponderExcluirJesus Te Ama!
Paulo estou com mesmo problema do Jonas,
ResponderExcluiraparece só embaixo das postagens,
Jonas Henrique diz:
19 de dezembro de 2011 16:38
Estou com problemas no meu blog, ao invéz de aparecer na lateral as duas flechas, aparece apenas o nome do post e em baixo do post e fico mto bugado, se tiver como resolver isso pra mim eu agradeço :D
Cara fiz de todo jeito e não consegui fazer estas setas de navegação funcionar. me ajude aí. www.mikaeluke.tk
ResponderExcluirBacana mesmo, coloquei no meu blog e ficou legal, me ajudou mto
ResponderExcluirnossa vlw .. ajudo mtu ..
ResponderExcluir@Paulo Estevão no meu blog fica uns quadradinhos bracos :(
ResponderExcluirnçao tem como tirar?
http://bagacadigitalblog.blogspot.com/2012/01/bate-papo-no-twitter.html
No meu blog deu erro eu tentei 4 vezes e nao deu certo fiz tudo certinho...
ResponderExcluirPaulo meu querido, nao consegui no meu blog ...
ResponderExcluirNao aparece nada.
Por favor me ajude, meu blog é www.vibeconnexion.net
se quizer posso postar aqui o codigo inteiro do meu blog.
flavioomelhor@hotmail.com
por favor, me responde!
Parabéns cara antes eu sabia que esse código s[o tinha no wordspress mas vc arrumo ele pro blog eu coloquei veja http://helogames.blogspot.com/ muito bom valew mesmo
ResponderExcluirPaulo valeu pela dica, você fez um ótimo trabalho parabéns!
ResponderExcluirNo meu blog fica uns quadradinhos brancos
ResponderExcluirhttp://bagacadigitalblog.blogspot.com/2012/01/sopa.html
como tirar eles?
Agradecemos muito a Deus por ter pessoas assim como Vocês, por tirar tempo para ajudar pessoas, que Deus posso dar em dobro... Obrigado!
ResponderExcluirOlá Paulo,
ResponderExcluirTenho acompanhado sua trajetória e visto o quanto você tem crescido. Quero parabenizá-lo pelo excelente trabalho e sabedoria ao compartilhar seus conhecimentos com outros. Tenha a certeza de que o que você tem feito é semear e quem semeia colhe. Sua colheita com certeza será superabundante. Tenho sido abençoado com seus conhecimentos.
Grande abraço,
Pastor Waldyr do Carmo,
http://casadeoracaocehab.com.br
Muito obrigado!
ExcluirAbraços
Caro Paulo
ResponderExcluirA sugestão é muito boa. Todavia estou enfrentando o mesmo problema. Aparecem as setas e escrito esquerdo e direito. Todavia não aparece o nome do post e nem mesmo consigo voltar ou avançar através das setas.
Pode me dar um apoio?
Deus te abençoe.
Cesar
Já fiz tudo, eu salvo normalmente, não dá problema nenhum, mas, quando eu vou pro blog ver se está funcionando, não aparece nada.
ResponderExcluirNo meu tbm dá problema
ResponderExcluirhttp://bagacadigitalblog.blogspot.com/
ten uns quadradinhos brancos!
No meu tbm dá erro
ResponderExcluirhttp://bagacadigitalblog.blogspot.com/
Parabéns excelente trabalho, não coloquei mas é um caso a pensar.
ResponderExcluirMto orbigado era disso que eu precisava!
ResponderExcluirPaulo, parabens! Funcionou, só tive que mudar o padding la mesmo. =)
ResponderExcluirSe quiser ver, está aqui:
http://www.capenga.com/
Muito bom seu site.
Sucesso!
Bacana d+!!
ResponderExcluirParabéns pessoal!
muito obrigado a todos...
ResponderExcluirmeu blog: http://corrente-grafica.blogspot.com/
Olá
ResponderExcluirO eu adicionei o codigo ao meu blog, porém ele só funciona no Chrome.
Quando é visualizado no Firefox ou no Explorer dá erro.
Fiz algo errado?
http://inconscienteflutuante.blogspot.com
Abrç
End Fernandes
Olá, Paulo. Cheguei aqui através do FB e já instalei em meus blogs. É claro que coloquei primeiro em meus blogs "espelho". E quando coloquei no segundo blog simplesemente não apareceu nada. Como o primeiro tinha dado certíssimo, fui olhar para ver o que estava errado.
ResponderExcluirAo colocar o código final, acima de ]]>, não reparei que a chave que fecha o código imediatamente anterior estava "colado" neste código,
}]]>
o que fez com que meu código fosse colocado dentro de outro e, apesar das "alterações salvas", nada aconteceu.
No meu caso, para corrigir isso, simplesmente passei a chave "}" para uma linha mais acima do códgo e "salvei modelo".
}
]]>
Tudo funcionou perfeitamente. Como isso é algo tão banal, simples de resolver, mas que passa despercebido para muitos, resolvi colocar aqui.
Muitas vezes fazemos tudo certo, mas apenas uma chave fora de lugar ou um espaço vazio na url de uma imagem, impedem um código de funcionar.
Mudei a cor e o modelo das setas.
Obrigada pelo tutorial.
Abraços.
Muito bom amigo, recebi as suas dicas e estão resultando em um design muito gostoso para o meu blog.
ResponderExcluirEsse Problemao vc resolveu para mim!
Muito obrigado pelas dicas.
ResponderExcluirImplementei no meu blog que ainda esta engatinhando e o design dele esta ficando muito gostoso, graças a sua ajuda.
Este Problemao vc resolveu para mim! =D
Muito obrigado meu fera!! sou seu fan vc é o cara amei de verdade.
ResponderExcluirexcelente trabalho, adorei muito bom mesmo
ResponderExcluirCara, no meu blog funcionou direitinho o sistema das setas e tal mas quando está na pagina inicial e clica em proxima pagina aparece que nao existe proxima pagina. O que eu faço?????
ResponderExcluirFicou d+ muito obrigado pela dica.
ResponderExcluirGrato por esse código. Ficou perfeito no meu blog.
ResponderExcluirGostaria de perguntar somente como faço para que todo o bloco (estilo css) vire um link, ou seja, em qualquer parte do retângulo que eu clicar, eu vá para o próximo/anterior artigo. E não somente clicando sobre o texto.
OBS: olhei no FB e lá isso é possível.
Desde já, muito grato!
Não é possível ensse código.
Excluirabraços
Grato pela atenção!
ExcluirAbraços!