Como inserir setas de navegação nos posts do blog – Floating NextPrev WordPress Plugin

Siga o Blog no Facebook e no Twitter

Aprimorar a experiência do visitante dentro de seu blog não é tarefa fácil de ser feita, além de um bom conteúdo é necessário disponibilizar ferramentas que ajudam o usuário a navegar para poder encontrar o que ele procura. A navegabilidade de seu blog é importante, então desenvolvemos um plugin que exibe setas de navegação na lateral da página. Você pode testar e ver funcionando aqui mesmo no [ Ferramentas Blog ]. Então, aplique em seu blog.

Quando tratamos sobre navegação e usabilidade em um blog/site é sempre uma boa pratica responder estas três perguntas do usuário:

  • Qual foi o caminho eu fiz para chegar aqui?
  • Onde eu estou?
  • Para onde eu posso ir?

As duas primeiras perguntas são facilmente respondidas com o uso de Breadcrumbs.
Para quem não conhece Breadcrumbs aqui esta um exemplo:

Neste exemplo o usuário sabe que passou pela página início, também que o assunto trata sobre WordPress e finalmente onde ele esta agora que seria no post “WordPress 3.3: Customize o logo e link da nova Admin Bar” do exemplo.

Agora para a terceira pergunta podemos ter menus, links em nossas sidebars ou mostrar qual é o próximo post que ele pode ler ou o anterior.

Pensando em oferecer uma melhor experiência para os usuários do [ Ferrmanetas Blog ] o Marcos Lemos e eu resolvemos colocar um sistema de navegação entre os posts. Dediquei algum tempo desenvolvendo esse plugin.

Esta navegação foi inspirada em algo que encontramos no portal Ego da Globo.com

Algumas pessoas nos perguntaram como isso foi feito e como elas poderiam fazer também. Com isso eu resolvi desenvolver e disponibilizar um plugin bem simples para ajudar a todos instalarem este tipo de navegação em seus blogs feitos no WordPress.org.

Floating NextPrev

Com o Floating NextPrev é possível inserir facilmente ícones iguais que temos aqui no [FB] também em seu blog.

Além de possuir vários modelos de layouts prontos, onde a única coisa que você deve fazer é escolher qual irá usar.

Instalação do Floating NextPrev:

Para instalar o Floating NextPrev é necessário baixa-lo pelo seguinte link:

  Plugin Floating NextPrev para Wordpress.org (227,7 KiB, 1.167 downloads)

Depois de realizado o download basta entrar em seu blog e ir ao menu “Plugins” > “Adicionar novo” > “Fazer upload”:

instalar o plugin floating nextprev

Feito o upload do plugin, basta ativa-lo que ele já estará funcionando perfeitamente em seu blog.

Modelos de layout do Floating NextPrev:

Após a instalação teremos um novo menu em “Configurações”:

Através deste menu é possível escolher entre 9 opções de layout para o plugin.

Basta selecionar o modelo que mais combina com seu blog e clique em salvar.

Notas sobre o plugin:

Peço por favor para quem tiver uma ideia ou problemas sobre o plugin deixar um comentário aqui. Sugestões e comentários dos usuários nos ajudarão a melhorar o modelo do plugin e resolver problemas de incompatibilidade ou de conflitos. Mas já adianto que não encontramos nenhum problema.

Estarei tentando resolver problemas de compatibilidade do plugin (caso aconteça) e também inserindo novas opções, conforme as necessidades de vocês. Toda dúvida também será respondida pelo comentário.

Download do plugin Floating NextPrev

  Plugin Floating NextPrev para Wordpress.org (227,7 KiB, 1.167 downloads)

Versão para Blogger

Nosso amigo Paulo Estevão do Códigos Blog conseguiu adaptar esta navegação para o Blogger. Configura como fazer isso aqui:

FBlogHost - Hospede seu Blog

137 Comentários

  1. Mais uma vez parabéns ao Claudio Sanches. Muito legal esse plugin. Sei que podemos encontrar algo similar pela internet, mas a confiança que vocês do Ferramentas Blog passa nós leitores/seguidores é espetacular.

    Esse blog com certeza faz aumentar a qualidade da blogosfera nacional. Parabéns!

    Responder

      • Também não encontrei até o momento algo parecido na internet.

        Confesso que a primeira vez que percebi esta nova [Ferramenta] aqui no [Ferramentas Blog], fiquei fascinado, imediatamente já busquei algo parecido, kkk, agora passando por aqui, vi esta postagem. Parabéns toda Equipe, fazem um ótimo trabalho. Continue com Deus.

        Valeu Claudio.

        Responder

        • Primeiro de tudo, como assim “se foram vc q desenvolveram” ?
          Não entendi isso.

          Enfim.
          Uma coisa é fazer algo no WordPress onde tudo é possível, outra coisa é fácil no Blogger onde nada é possível.
          Pesquisei como criar navegação de uma página para outra no Blogger e que tenha o título nela e etc, levai mais de 2 horas até ver que eu não encontrei nada e desistir.

          No WordPress eu levei uma hora para fazer ele e colocar no ar aqui no Ferramentas Blog.

          Responder

      • Claudio, não me interprete mal. Onde mencionei que podemos encontrar algo “similar” pela internet, se deu pelo fato da diversidade e riqueza de conteúdo que existe na web. Mas, não quer dizer que esses plugins sejam de confiança, e principalmente segurança.

        Na minha opinião o plugin upPrev: NYTimes Style “Next Post” Animated Button, faz algo similar. Óbvio, que sua criação Floating NextPrev é mais completo e muito mais atrativo. Porém, os dois agem de forma bem parecida quando se apresentam ao leitor.

        Importante mencionar, que uso em meu blog o Floating NextPrev! Por ser mais completo, atrativo, de confiança e principalmente pela segurança que vocês do Ferramentas Blog transmitem aos seus leitores.

        Responder

        • Ah sim, quando dissemos que não tem nada igual, falo para blog (WordPress ou Blogger).
          No caso o upPrev ele faz até algo similar, porém não igual este.

          O que fizemos aqui é bem básico de ser feito e não levei mais de uma hora para fazer.

          A primeira vez que vi algo com setas assim foi em um blog de tirinhas que chama Vida de Programador, porém elas são do lado do post mesmo e não fazem nada.
          Depois vimos no Ego da Globo.com.

          Pesquisei para ver se existia algo assim já pronto e sendo distribuído para o publico e não encontrei nada.

          Então resolvemos desenvolver este plugin.

          Responder

  2. Olá Claudio , estava a tempos atras de um plugin deste genero, parabéns pelo otimo trabalho desenvolvido. Eu instalei ele no meu blog mas ele parece estar estático( quando posiciona o mouse sobre a seta não aparece o efeito) que pode ser? atualizei ontem ele para wp 3.3

    Muito Obrigado

    Responder

    • Se for só colocar as setas é fácil. O que pegou para fazer no blogger foi chamar o título do próximo post e conseguir deixar isso aparecendo no final do HTML para poder posicionar com CSS sem ter problema com nenhum layout.

      Responder

  3. Há outra coisa, nas caixinhas abaixo do formulario de contato vcs usam o Jetpack no é isso? Mas no meu as caixinhas ficam em cima e o texto em baixo como faço pra conserta isso? Deste já agradeço.

    Responder

  4. Olá, instalei o plugin e funcionou perfeitamente. Só uma observação: quando ativei o plugin apareceu uma mensagem de erro no meu painel de controle. Se não me engano era o erro 500, não copiei porque com dois F5 resolvi o problema.

    Só comentei para ninguém se assustar caso aconteça o mesmo :)

    Parabéns e continuem disponibilizando ótimas ferramentas.

    Responder

    • Erro 500 é um erro interno inesperado do servidor de rede.

      Este erro não tem nada haver com o plugin e sim com o host onde você esta hospedando seu blog.
      No momento em que você instalou o plugin deve ter ouvido uma queda na rede do seu servidor e por isso que apareceu o erro.

      Porém não é nada que você deve se preocupar.

      Responder

  5. Claudio notei que vc gosta de desenvolver plugins, pq vc ñ faz um para exibir aqueles poup-up de assinar a newsletter, aqueles que aparecem no lado inferior direito e acompanha quando a pagina é rolada, sabe qual é? Procurei por algo, mas não encontrei…

    Responder

  6. Claudio gostei muito do plugin ja está funcionando em meu blog porém em uma próxima atualização do plugin você poderia fazer ele aparecer nas duas laterais como este que está aqui no Ferramentas Blog, obrigado.

    Responder

  7. Obrigado FerramentasBlog, agora pretendo mudar par ao wp e o meu web precisava de um plugin desses para adicionar uma paginas só de publicidades. Vc supriram as minhas necesidades galera. Vlw!!!!

    Responder

  8. Não sei de mais alguém comentou a sugestão eu vou dar! Séria muito bacana se na configurações tivesse uma especie de palheta de cores para nos definirmos a cor das bordas do box que aparece com o nome da próxima post. (-:

    Obrigado!

    Responder

    • Sim, olha o comentário que eu fiz para o Ventilô.
      Eu disse que foi inspirado no Ego da Globo.

      Quando eu disse de desenvolvemos foi algo para funcionar em blogs e não que foi a primeira vez que alguém fez esse tipo de navegação.

      Responder

  9. Cara seguinte,
    não sei o que está ocorrendo, mas nem esse nem o seu outro plugin está funcionando.
    Neste plugin mesmo estando em um post único a função is_single() parece estar retornado false. Se eu coloco o código direto no arquivo do tema está funcionando certo..

    Isso aparentemente está ocorrendo depois da atualização do wordpress, alguma ideia do que pode ser?

    Responder

  10. Olá Claudio, o plugin é excelente porém tenho um problema: tenho sempre as mesmas postagens nas setinhas, independentemente do post que estou a ler. Será problema do tema? Uso WordPress 3.3 Agradeço a atenção.

    Responder

  11. Ola claudio, desde já venho agradecer a vocês do ferramentasblog, pelo excelente trabalho, vocês são blogueiros que devem ser espelhados, do tipo que buscam fazer algo em prol de outras pessoas.

    Eu consegui fazer a adptação do HTML para que funcione tranquilo na plataforma blogger e agora está bem legal no nosso blog.

    Estou a disposição caso algo tenha duvida, como fiz minha adptação.

    Obrigado a todos do ferramentasblog e um abração para o Marcos Lemos, parabens a toda equipe pelo prêmio do Top Blog.

    Responder

  12. Pingback: Floating NextPrev - setas de navegação nas postagens para Blogger - [PT Blogger]

  13. Claudio, primeira vez que comento aqui, mas já achei muita coisa interessante aqui no FerramentasBlog nesses últimos tempos, realmente um dos melhores blogs do gênero que conheço. ;D

    Mas falando do plugin, achei genial ele, simples e muito útil, e sem falar da instalação, que é super fácil.

    Parabéns pelo trabalho.

    Responder

  14. Pingback: Os 8 melhores recursos para WordPress em 2011 | [ Ferramentas Blog ]

  15. Cláudio, me tornei leitor fiel do Ferramentas e vocês fazem jus ao prêmio que receberam. Instalei este plugin e ele rodou perfeitamente, ou seja, não é o tema. Só que de repente ele parou de funcionar, fiz um monte de mudanças no blog de testes e não encontro o conflito. Poderia me ajudar?

    Professor Darlan

    Responder

  16. Olá Claudio, tudo bem?

    Bem legal esse plugin, mas percebi um erro ao executá-lo em localhost.
    Ele mostra o nome do artigo APENAS quando estou logado na conta de adm do site no WP e acessando pelo mesmo browser.
    Se eu tento abrir sem estar logado por esse browser, ele não mostra o nome do artigo de jeito nenhum!

    Fiz esse teste com o Chrome 16.0.912.63, Opera 11.60 e o Firefox 8.0.
    Todos rodando no XAMPP 1.7.7, WordPress 3.3–pt_PT e no Ubuntu 11.10 32 bits.

    O tema usado como base do meu futuro e primeiro site é esse aqui => http://topwpthemes.com/jovan/

    Por ser bem inexperiente nisso, ainda não consegui descobrir qual é a versão do JQuery.
    Vou dar uma pesquisada nisso também.

    Responder

    • Desenvolvo tudo em localhost usando o Twenty Eleven para testar.
      No seu tema deve estar faltando algo.

      Baixei ele aqui e vi um código no functions.php que chama uma navegação, esta em baixo do comentário:

      /* PAGE NAVIGATION */

      Ele cria uma função para chamar a navegação, a função é “getpagenavi()”
      Já tentou deletar ela?

      Responder

  17. Tive alguns probleminhas. Como os arquivos “single.php” do meu wordpress são padronizados tive que adicionar as divs das setas diretamente no código html de cada arquivo. Os arquivos js também tiveram de ser adicionados manualmente ao footer. Estou com um problema de compatibilidade com o Internet Explorer, os retângulos com os nomes dos posts não aparecem, só aparecem as setas. No Firefox e no Chrome está tudo redondinho, funcionando de boa.

    Descobri que quando o plugin começa a exibir next / prev sempre para as mesmas páginas as “divs” das setas estão sendo colocadas antes do loop, por isso sempre repete os posts a serem exibidos.

    Parabéns pelo plugin! É fantástico!

    Responder

      • Você teve este problema pois o seu tema com certeza não esta completo e nem compatível com as última versões do WordPress.

        Você precisava ter dentro do header.php:
        <?php wp_head(); ?>
        E dentro do footer.php:
        <?php wp_footer(); ?>

        Por este motivo você precisou instalar manualmente.

        Responder

        • Tenho ambas as chamadas “” e “” no header e footer respectivamente. Acredito que possa estar ocorrendo conflito com algum outro plugin, talvez o wp-minify, mas como está funcionando com a instalação manual no chrome e firefox, pra mim já está ótimo.

          Abs.

          Responder

  18. Tive que desativá-lo no meu blog, pois com o tema novo as setas de next/prev estão direcionando sempre para as mesmas páginas, repetindo apenas dois posts a serem exibidos.

    Alguma sugestão?

    Responder

    • Com certeza falta algo no seu tema.
      Pode estar falantaod o wp_head() ou o wp_footer() ou até mesmo ter algum código dentro do functions.php que esta alterando isso.

      O plugin é super simples e não faz nada demais, ele apenas pena funções nativas do WordPress e coloca as setas ali. Desta forma se o seu tema esta alterando essa função as setas realmente não irão funcionar como deveria.

      Testei ele usando os temas padrões do WordPress, aqui no Ferramentas Blog e em outros blogs, por fim, nenhum deles teve qualquer problema.
      Recomendo você revisar o conteúdo do seu functions.php

      Responder

  19. Pingback: Nova Versão do Plugin Floating NextPrev para Blogger - [Blogando com Facilidade]

  20. O Paulo tem como colocar no blogger, só que é longo de mais o processo lá Claudio, mesmo assim vou testar no blog de testes, valeu o artigo. Abraço, Rafael do futebol Extensivo.

    Responder

  21. Olá!
    Parabéns por ter desenvolvido esse plugin. Esse site é referência sempre!

    Bom, estou tentando instalar… Me desculpe se é ignorância minha. Mas instalei, ativei… O mesmo encontra-se como ativo, mas quando vou em Configurações, as setas só encontram-se como inativas, sem opção pra selecionar o “ativo”.
    Não sei se é problema do meu tema do WP. Mas poderiam me ajudar?
    Meu blog está no campo para links aqui no comentário.

    p.s.: meu tema é Delicate theme.
    p.s.2: já limpei cache, fiz tudo o que o pouco conhecimento que tenho permitiu.

    Obrigada

    Responder

  22. Olá! Vim dar boas notícias. Depois de algumas horas o plugin começou a funcionar. Talvez tenha sido um problema do meu painel, ou hospedagem, não sei. Só vim avisar pra não dar trabalho pra responder um problema já solucionado.
    Obrigada

    Responder

  23. Muito bom esse plugin!!!!!!! Parabéns!!!!!!

    Queria saber se eu teria como inserir um query_post? Pois não queria que aparecessem alguns post na navegação.

    Obrigado desde já.

    Responder

      • Na verdade seria uma categoria seria uma categoria inteira. Tenho alguns posts que são privados para clientes e eles recebem um e-mail com o link. Então não teria porque outras pessoas terem um acesso direto. Tirei eles do loop da página principal usando query_post Ex: new WP_Query( array( ‘cat’=> -123, ‘paged’ => get_query_var e blá,blá,bla’.

        O site em questão é esse aqui:

        www. fazendopose. com. br / blog

        Mais uma vez obrigado.

        Responder

  24. Olá, parabens pelo plugin, pois estava procurando hà algum tempo! Estou desenvolvendo um tema, instalei o plugin, ativei mas não acontece nada. Ele funcionada em servidor local? Ou eu tenho que esperar um determinado tempo pra funcionadar? Desde jà agradeço!

    Responder

    • Parace que o script do Lightbox que não esta funcionando esta quebrando o plugin também.
      O carregamento da página toda esta bem demorado por causa daquela barrinha, que pode estar causado isso também.

      Responder

  25. Olá Cláudio, gastei uns bons minutos lendo os comentários do pessoal e resolvi abrir o bico. Sei que as setas apresentadas aqui são para WordPress e que o caro Paulo Estevão já modificou e criou um para Blogger.

    Mas aí é que entra o meu problema. Quando instalei o último template em meu blog, creio que houve um conflito na instalação e só fui ver depois. Quando instalei as setas, deu tudo certo, mas fica aparecendo vários títulos nas caixinhas laterais. Já me informaram que é isso mesmo; duas áreas de postagens num só template.

    Lido com HTML, mas é muito básico mesmo. Pelo que vejo você entende até demais da conta. Será que você não poderia me ajudar neste caso? Não é quanto a instalação das setas, mas sim em remover os códigos duplicados no template.

    Você faria como um favor, ou cobraria? Se precisar envio o template para você. O endereço é este: http://ricardoartsblog.com

    Coloque o mouse sobre as setas e verá como é mostrado o título dos posts. Ficarei muito grato se responder e puder me ajudar.

    Responder

  26. Parabens mesmo pelo plugin. Só que está dando erro no internet explorer. Pois as setas aparecem em baixo do post do mesmo lado e desgovernado. Pode me ajudar?

    Responder

  27. Olá Claudio, baixei o plugin e testei aqui em Localhost, e no meu caso o plugin está exibindo apenas o lado “Anterior”. E sempre a mesma postagem, já fiz umas 10 postagens de teste e ele sempre mostra a mesma. Estou testando com o template do Escola Sites (es-one). Alguma dica de como posso normalizar? Grato desde já pela atenção.

    Responder

    • Jairo, o plugin utiliza apenas funções do WordPress e por este motivo ele esta normalizado com a documentação.
      Aconselho verificar o tema, talvez nele tenha algo que esta influenciando este comportamento no plugin.

      Responder

  28. Pingback: Floating NextPrev – Setas de navegação nos posts para Blogger | Códigos Blog

  29. Opa, eu vi relatar um problema
    independente do post que eu estou só aparece o mesmo post em ir e em voltar e quando eu clico no post ir e quando vou la na setinha do ir o post performance o mesmo mesmo eu tando no post em questão.
    depois da uma olhada no meu blog e veja o problema.
    Obrigado

    Responder

  30. Olá, parabéns pelo plugin, é possível customizar ele, exemplo, adicionar um thumbnail ao lado do titulo do post, já vi esta customização em outros sites e blogs… o que é preciso fazer? Agradeço.

    Responder

    • Não é tão fácil de ser feito assim.
      Não coloquei thumbnail porque iria precisar adicionar scripts para pegar imagens ou recortar elas.
      Tem alguns nativos do WordPress, entretanto nem todo mundo utiliza Post Thumbnails.
      Aqui no Ferramentas Blog mesmo não usamos.

      Por este motivo não adicionei miniaturas.

      Responder

  31. Pingback: Wordpress: Cuidados que devemos tomar na hora de instalar um plugin - [ Ferramentas Blog ] | [ Ferramentas Blog ]

  32. Instalei, mas não ficaram como aqui. Elas não abrem e mostram o conteúdo como aqui… eu clico e ela pula para algum post que eu ainda nem sei como é escolhido… se é por categoria ou o quê.
    Deu pra entender o que eu disse?

    Responder

  33. Olá Claudio. Não teria uma forma de colocar estes botões de navegação sem a necessidade de usar plugin? Por exemplo, pegando os códigos e colocando diretamente nos arquivos header.php, style.css, etc … Mesmo que seja com um tema específico, pois pra mudar isto seria relativamente fácil.

    Responder

  34. Olá!

    Instalei o plugin e, para todos os posts, estão aparecendo sempre os mesmos posts para anterior e próximo.

    Também se trata de incompatibilidade do meu tema ou isso está relacionado ao conflito com o Jet Pack que aconteceu no Social Count Plus?

    O estranho é que, há alguns meses, eu já havia utilizado esse plugin, e com o mesmo tema.

    Poderia me ajudar?

    Grata,
    Cintia

    Responder

  35. Olá, estou com mesmo problema citado acima pela Cintia. Tem alguma dica para sanar este problema? Este pluggin é muito útil, parabéns!

    Responder

  36. Pingback: Plug-in Floating Nextprev Coloque em seu artigos Setas de Navegação

  37. Cláudio, não sei se é incompatibilidade com meu tema, mas apesar do plugin aparentemente ter funcionado bacana, ele sempre mostrava os mesmos posts, tanto no prev quanto no next. Acabei retirando por que não consegui resolver o problema. Abs!

    Responder

  38. Estou com problema, Tive que desativá-lo no meu blog, pois com o tema novo as setas de next/prev estão direcionando sempre para as mesmas páginas, repetindo apenas dois posts a serem exibidos.

    Responder

  39. Pingback: Nova Versão do Plugin Floating NextPrev para Blogger - Sucesso Blog

  40. Olá Claudio, achei o plugin excelente, porem estou com um problema no meu blog, e eu precisaria mudar a altura das setas, precisaria que elas ficassem um pouco mais para baixo!
    Será que isso seria possível??
    Como devo fazer a alteração?

    Responder

  41. O plugin é muito bonito e leve. Carlos e Marcos, tive dois problemas cuja solução não encontrei nos comentários ou no corpo do texto e, por isso, venho lhes pedir orientação.

    1- Não consegui ativar o modo ATIVO no meu blog (http://www.historiadigital.org). Ele fica no modo INATIVO, ou seja, só aparece a seta, sem escrita ou imagem.
    2- Desejo saber se é possível configurar o plugin para navegar apenas em categorias específicas. Gostaria que o meu visitante, ao ler os resumos no meu blog, pudesse ir para o resumo seguinte.

    Aguardo resposta.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.