Como personalizar o navegador do Blogger

Sabe aqueles links que aparecem no rodapé da coluna dos posts nos blogs hospedados no Blogspot, que permitem avançar e retornar as páginas de postagem? Esse elemento de página chama-se navegador ou 'blog-pager'.

Por padrão são exibidos apenas os links: "Postagens mais antigas", "Início" e "Postagens mais recentes", centralizados e sem muito charme, assim:

Postagens mais antigas      Início      Postagens mais recentes

Já mostrei como personalizar o navegador do Blogger usando ícones intuitivos e mais recentemente também informei sobre o novo recurso de navegação em páginas numeradas, tão aguardado pelos usuários do serviço oferecido gratuitamente pela (empresa) Google.

Eu particularmente acredito que o recurso de navegação numerada não é o ideal para um site no formato blog. Pois o navegador não é exibido quando o usuário acessa uma página individual, apenas na home page.

Pensando nisso resolvi personalizar o blog-pager do Blogspot, seguindo um padrão usado por vários sites gringos, como o Gizmodo e o LifeHacker. Sem images ou arquivos JavaScript hospedados externamente, só no CSS.

O resultado, depois de concluída a configuração, é esse:


O que precisa ser feito:
  • Substituir as definições CSS originais do blog-pager;
  • Substituir o trecho HTML original do blog-pager.
Antes de começar:
  • Faça um backup do seu template atual ou tente num blog testes;
  • Leia o tutorial até o fim para ter certeza do que está fazendo.

1 - Localizar e substituir as definições CSS originais:
Acesse a área de edição do código do seu template, marque Expandir modelos de widgets e procure pelo trecho abaixo (use CTRL + F para facilitar):
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
Substitua tudo, sem dó nem piedade pelo código compulsivo disponibilizado abaixo. Não esqueça de alterar os valores destacados em vermelho, conforme o seu caso (O destaque em azul é uma correção. Caso esteja com problemas verifique se essas linhas estão de acordo):
#blog-pager a {
text-decoration: none;
padding: .2em 1em;
margin: .2em;
color: #000000; /* Cor do texto */
background-color: #FFFFFF; /* Cor de fundo */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blog-pager a:hover {
color: #000000; /* Cor do texto */
background-color: #EEEEEE; /* Cor do destaque */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blog-pager {padding:5px;text-align:right;float:right}
#blog-pager-older-link, #blog-pager-newer-link {text-align:right}

2 - Localizar e substituir o código HTML original:
Sem salvar ainda, vamos procurar pelo trecho de código HTML referente ao navegador de páginas do Blogspot:
<b:includable id='nextprev'>
<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'><data:newerPageTitle/></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'><data:olderPageTitle/></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:includable>
Agora vamos fazer da mesma forma que fizemos anteriormente nas definições CSS. Substituir todo o trecho localizado, pelo código compulsivo personalizado:
<b:includable id='nextprev'>
<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;' title='Página anterior'>&lt;&lt;</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;' title='Próxima página'>Seguinte &gt;&gt;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Visualize para testar, se não ocorrer nenhum erro pode salvar e correr para o abraço...

Imagem: O Pirata

Comentários

  1. Nossa! Agora vc lê mentes?? Estava justamente pensando em como tirar essa droga de postagens antigas... ainda bem que resolvi dar uma espiada por aqui!!

    Vou ali testar!!
    Como sempre mais uma ótima dica !!
    ;)

    ResponderExcluir
  2. Funcionou no blog teste!!E foi tão rapidinho!!
    Vivaaaaaaaaaa!!! amei! ;-)

    ResponderExcluir
  3. @Yara, faz tempo que leio mentes! Conecto-me ao inconsciente coletivo para capturar os desejos dos meus queridos leitores.

    Hehehe, quem me dera...

    []'s
    Compulsivo

    ResponderExcluir
  4. Ficou faltando o 'Home'.

    ResponderExcluir
  5. @Kct, não ficou faltando, pois foi intencional...

    []'s
    Compulsivo

    ResponderExcluir
  6. Por essa e outras coisas que é bom visitar diariamente seu blog...

    ResponderExcluir
  7. Compulsivo,
    Super fácil de instalar.
    Mas como vc nos acostumou mal, eu queria saber mais uma coisa...
    Já vi em alguns blogs que, ao invés de aparecer << ou Seguinte>>, ficam os títulos dos artigos anterior e posterior.
    Tem como???
    Como sempre, obrigada...

    ResponderExcluir
  8. Dúvida!!! eu procurei no codigo e não achei, mas vc melhor do que eu deve saber... tem como alterar o numero de páginas que aparecem quando se clica em "Seguinte"?

    :-)

    ResponderExcluir
  9. Saudações Compulsivo.

    Muito obrigado pelo tutorial fácil de customizar. Já está na coleção do MaNiNhO. Abraços e uma ótima semana para você! _o/

    ResponderExcluir
  10. @Nani, você deve ter visto esse recurso em algum blogue que usa o Wordpress, acho que no Blogspot não rola...

    @Yara, a quantidade de posts na página inicial você define nas configurações do Blogger. Para controlar a quantidade de posts exibidos nas páginas de arquivo e categorias, use este tutorial compulsivo.

    []'s
    Compulsivo

    ResponderExcluir
  11. Eu não disse "você esqueceu" o Home, disse que "ficou faltando". De resto é bacana.

    ResponderExcluir
  12. Olá Compulsivo,

    Simplesmente D+, esse tutorial é muito bom, eu nunca gostei daquela navegação simples e sem destaque, mas o que eu quero mesmo é implementar a navegação de páginas, mas vou esperar as melhorias para o código.

    Enquanto isso não aconteçe, vamos colocando as outras opções disponíveis.

    "Mais uma dica do Compulsivo para acabar com a plataforma wordpress!!!" =D

    T+

    ResponderExcluir
  13. Fui no tutorial, o problema (sempre tem um né?) é que mesmo marcando Expandir modelos de widgets eu não consigo encontrar o codigo do qual vc se refere... Tentei marcado e desmarcado ... e nada! :(

    ResponderExcluir
  14. Compulsivo,
    Incrivelmente consegui fazer ocorrer um erro ao inserir esse hack.
    Eu fiz exatamente como está no post, mas ocorre o erro: "O widget id 'Blog1' não pode conter o elemento: '#comment'. O widget só pode conter elementos b:includable."

    A primeira linha antes da substituição da primeira parte de código contém: id='Blog1'

    Pode me ajudar? Tenho que substituir o 'Blog11' por algum valor novo?

    ResponderExcluir
  15. @Henriqueloo, tem certeza que você está incluindo os códigos no lugar certo, tipo o CSS num lugar o o Html noutro?

    Seguindo a risca o tutorial, não tem erro!

    []'s
    Compulsivo

    ResponderExcluir
  16. olha para mim esta aprecenod que tem duas gadgets com os mesmo ids as vezes aconetce issu basta voce mudar de blog11 para um numero kualker exemplo



    blog99 ^^
    sorte !

    ResponderExcluir
  17. Sim. Ambas substituições (1ª e 2ª) devem ser feitas com o "Expandir modelos de widgets" habilitado certo?

    A 2ª parte (maior) eu conferi linha por linha da que está postada aqui e está identico ao do meu blog. O unico procedimento é deletar o original e colar o código novo correto?

    Qual é a diferença entre "o lugar" do CSS e do HTML? (não é só quando está ou não habilitado o "Expandir modelos de widgets"?)

    ResponderExcluir
  18. Compulsivo,

    Problema resolvido. O problema não estava onde estava sendo substituído (eu estava colocando no local correto!) e sim nos comentário do código que eu estava colocando. Eu coloquei no inicio e no fim do código comentários no formato, sendo que com os "modelos de widgets" habilitados não permite.

    Pelo que vi nos comentários que você colocou no código (/*) (com um asterisco só), talvez seja preciso usar esse modelo correto? (poderia me confirmar isso?)

    ResponderExcluir
  19. @Henrique, os comentários são só ilustrativos e estão só no CSS, se você usar esse mesmo tipo de comentário ( /* comentario */ ) na parte HTML, vai ocorrer o erro que apareceu para você...

    Pra comentar no trecho HTML você precisa usar outros caracteres ( <!-- comentario --> ), porém há lugares no código do Blogspot, onde não são permitidos comentários...

    Pessoal, como tem gente com dificuldade estou pensando em disponibilizar um template para download com o recurso já aplicado. O que vocês acham?

    []'s
    Compulsivo

    ResponderExcluir
  20. eu não tive dificuldade para aplicar esse tutorial... mais meus pobres olhinhos miopes não conseguiram achar o codigo do outro.

    Se fosse para escolher o ideal seria vc conseguir juntar esse post com o outro do numero de posts mostrados no arquivo ( pq o numero de exibição normal quase todo mundo sabe mudar)...

    Apenas uma ideia! ;-)

    ResponderExcluir
  21. @Yara, sugestão anotada!

    []'s
    Compulsivo

    ResponderExcluir
  22. Fiz tudo certo mas não funcionou como o esperado. Funcionou melhor! este hack melhorou a aparência do hack para navegação por páginas numeradas.Você saberia explicar o porque

    ResponderExcluir
  23. @tecnodrop, sei sim, é porque eu sou 'o cara' :-P

    []'s
    Compulsivo

    ResponderExcluir
  24. É isso ai! agora mudando um pouco de assunto você não teria como disponibilizar um template como esse do Compulsivo? porque acho aquela área do bloco 720 x 90 do adsense muito boa

    ResponderExcluir
  25. @Tecnodrop, não!

    []'s
    Compulsivo

    ResponderExcluir
  26. Valeu garoto...boa sorte!!!

    ResponderExcluir
  27. blz...estou estreando no mundo dos blogs e acho que estou estreando com pé direito...
    vlw brother...

    ResponderExcluir
  28. Comp.....

    Notei uma diferença ontem.

    Após a colocação deste post.. Os anuncios debaixo do título do post sumiu!! Os outros estão ok, mas justamente os de 300 x 250 sumiaram nos 2 blogs que estartei este post. Já num 3º de teste continuou normal. O que presumo é que não é o adsense e sim alguma modificação no template que não está voltando.


    Como é que pode, já retornei o template anterior, mas continua a mesma coisa, mesmo com o template anterior. Nunca tinha visto isto. O que pode estar acontecendo?

    Gde Abraço

    Dr. Chicletinho

    ResponderExcluir
  29. @Dr. Chichetinho, não faço idéia do que pode estar acontecendo. O tutorial foi testado num template padrão que inclusive está disponível para download. Qualquer alteração num template personalizado deve ser feita com toda cautela.

    Você usa aqueles anúncios que o próprio Blogger oferece através dos elementos de página? Eu não recomendo esses anúncios, melhor usar os gerados na página do AdSense, onde você pode organizar seus anúncios com critérios.

    []'s
    Compulsivo

    ResponderExcluir
  30. OLA COMPULSIVO...GOSTO MUITO DESSA SUA DICA...COLOQUEI NO MEU BLOG E FICOU UMA BLZ! OBRIGADO!...MAIS QUERIA SABER SE VC TEM ALGUMA POSTAGEM QUE FALA COMO INSERIR UM TEXTO COM LINK EM CIMA DE UMA IMAGEM...AGRADECERIA MUITO

    ResponderExcluir
  31. @Cidadão sem sonho. Antes de mais nada, FAVOR ENFIAR O CAPS-LOCK NO ONDE O SOL NÃO BATE!!!

    Sim tenho um post a respeito:
    Como publicar imagens no Blogger.

    []'s
    Compulsivo

    ResponderExcluir
  32. oi compulsivo, tem tambem logo abaixo do navegador do blog tem:

    Assinar: Postagens (Atom)

    queria saber se vc tem alguma postagem ensinando a como muda-lo...obrigado

    ResponderExcluir
  33. @Adriana, tenho uma para remover de vez o danado...

    Lembre-se de usar a caixinha de pesquisa do Google lá no topo, quando tiver dificuldade em achar alguma coisa aqui no site.

    []'s
    Compulsivo

    ResponderExcluir
  34. oi compulsivo...esse navegador tem o efeito de quando se passa o mouse ele muda de cor, queria saber se voce tem algum artigo que ensine a como fazer um botao em que mudar de cor quando passar o mouse, eu ja tentei achar na caixinha de pesquisa la em cima mas nao conseguir, pq nao sei q nome se da a esse efeito...

    ResponderExcluir
  35. @Harlley, não publiquei nada específico a respeito, vai no Google e digita: CSS HOVER...

    Ou pega um manual básico de CSS e dê uma lida, tem muita coisa útil...

    []'s
    Compulsivo

    ResponderExcluir
  36. brigado cara, aproposito eu coloquei no meu blog esse seu navegador ficou bacana uma blz!

    ResponderExcluir
  37. Eu venho sempre ler as novidades, por duas razões: primeiro, você nos oferece dicas valiosas; segundo, tem uma maneira extremamente didática de fazê-lo. Boa semana!

    ResponderExcluir
  38. Ja o meu nao foi tao rapido fazer os codigos do meu blog e um pouco diferente mais funcionou legal...valew compulsivo!

    ResponderExcluir
  39. Funcionou bom non IE,mas no firefox os títulos da sedebar ficaram enormes

    ResponderExcluir
  40. Garoto...não é à toa que sou "compulsivo por seu site"...
    Suas dicas são ótimas. Vc. é muito bom, no q se propõe a fazer.!
    Abraços a todos!

    ResponderExcluir
  41. Ola cara! show d+ essa dica em!!! prabens!!!
    primeira vez ue posto um comentario aki, mais merece mesmo!!!!!
    merece muito mais!
    suseso!!!!!!!
    parabens !!

    ResponderExcluir
  42. No meu blog coube tudo certinho, mas a borda na parte de baixo não aparece.
    Problema no código ou no layout do Blog??

    ResponderExcluir
  43. @Kayo, você pode tentar jogar uma margem abaixo do navegador, ou colocar uma quebra de linha [br/] após o código do navegador no seu template.

    Se precisar de uma ajuda especializada, solicite orçamento através do formulário de contatos...

    []'s
    Compulsivo

    ResponderExcluir
  44. Queria uma ajuda sua, o meu template peguei em um site dos eus, mas os paramereos são quase todos diferentes do que vc coloca em suas postagens, sempre tenho dificuldades, queria mudar isso no meu blog, poderia me ajudar? obrigado

    ResponderExcluir
  45. @olhardofuturodigital, como seu caso é particular, creio que seja melhor você solicitar um orçamento através do nosso formulário de contato.

    []'s
    Compulsivo

    ResponderExcluir
  46. estou a testar este cod no meu blog de testes e...visualizando o blog em IE o "seguinte2 começa a "brincar a apanhada"

    l-o-l

    ele aparece no lado direito e quando vou para lhe clicar ele foge para a esquerda!! :S

    experimenta aqui: http://testesganhafacil.blogspot.com/

    ResponderExcluir
  47. @Dav7, essa é novidade pra mim. Faça o seguinte: Crie um novo blog de testes e tente aplicar essa alteração num template padrão. Quando conseguir, passe para o template do seu blog.

    []'s
    Compulsivo

    ResponderExcluir
  48. Olá, Compulsivo!

    Recentemente, adaptei o template "Esqueleto Compulsivo Dark" em meu Blog de notícias sobre a série Harry Potter. Percebi que algo estava faltando: os navegadores do Blogger, para passar pra próxima página, anterior e home. Daí, troquei novamente pelo original (o que está atuamente instalado). E, com essa minha adaptação compulsiva, o meu Blog ficou sem os navegadores, o que atrapalha, por ser de notícias. Por favor, me ajude!!

    ResponderExcluir
  49. @Fenix, de uma olhada nos comentários do post sobre o template, pois sua dúvida já foi respondida.

    []'s
    Compulsivo

    ResponderExcluir
  50. Obrigado pelo código, deu certo no meu blog.
    Só gostaria de saber como mudo a posição.
    No final do blog aparece seguinte, só que ele fica bem na direita da página, gostaria de centralizar, como devo proceder?

    ResponderExcluir
  51. @universomethodic, Altere a seguinte linha no trecho CSS: #blog-pager {text-align: right;}

    []'s
    Compulsivo

    ResponderExcluir
  52. Legal!
    Vlw Compulsivo.
    Fico bem legal no meu blog.

    ResponderExcluir
  53. Fiz tudo corretamente, eu optei pelo navegador sem imagem, já que uso o Templante Usuário Compulsivo, mas infelizmente o navegador não está aperecendo na pagina inicial... :/
    Pode me ajudar por favor?
    Abs

    ResponderExcluir
  54. @gfdsg, sua duvida ja foi respondida nos comentarios do artigo do template.

    []'s
    Compulsivo

    ResponderExcluir
  55. Muito legal! Ficou direitinho lá no blog!
    Valeu pela super dica. Thanks,
    dea

    ResponderExcluir
  56. Olá, Compulsivo!!

    Porque você não posta um artigo mostrando que é possível colocar um hack no Blogger para mostrar quantas páginas tem o nosso Blog??

    8)

    ResponderExcluir
  57. @Fenix, porque já fiz isso. De uma pesquisada nos arquivos do blog que você encobrra...

    []'s
    Compulsivo

    ResponderExcluir
  58. Muito bom.. deu certo =D

    Estou começando no mundo dos blogs e nada como um lugar que explica direitinho, tudo passo a passo, para que até os mais leigos como eu ^^ conseguirem executar com sucesso.

    Valewww.. =)

    ResponderExcluir
  59. Bom trabalho!
    Seviu direitinho no meu blog!

    Obrigado!

    ResponderExcluir
  60. Compulsivo, sabe o que mais me chamou a atenção nessa dica? A data em que foi postada. Olha lá na página de dicas...rs. 59 de agosto? KKKKKKKKKKKKK...

    P.s.: obviamente, não precisa nem deve publicar o comentário. Ah... aproveito pra agradecer pelas dicas em sua recente visita no meu blog. Abraços!

    ResponderExcluir
  61. Valeu pela dica, mas estou com uma dúvida. Como faço para afastar os botões das postagens? Pois no meu template ficou colado na última postagem de cada página. Muito Obrigado.

    ResponderExcluir
  62. compulsivo, você disse: você deve ter visto esse recurso em algum blogue que usa o Wordpress, acho que no Blogspot não rola...
    em resposta a @nani
    mas, eu ja vi este recusso em um blogger.
    *-* poderia procura-lo para nós?

    ResponderExcluir
  63. Compulsivo,
    Sua dica é excelente, mas tá rolando algo estranho... Uso seu template Esqueleto Compulsivo, os códigos estão todos lá, mas... não aparece o navegador na página. Que faço?
    Obrigada, Lucia

    ResponderExcluir
  64. @lucia fontes, sua pergunta já foi respondida lá nos comentários onde o template foi postado...

    []'s
    Compulsivo

    ResponderExcluir
  65. Olha eu outra vez aqui de pará-quedista (já estou ficando profissa), ótima dica, outros blogs que falavam ao respeito (os que entrei) só meu deu dor de cabeça, porém aqui deu tudo certo. Minha próxima dúvida, vou pesquisar primeiro aqui, prometo ;)

    ResponderExcluir
  66. Compulsivo:

    Andava atrás de uma solução para um "póbrema" desde que substitui os links texto de navegação. Esta semana baixei até no BlogspotBrasil.
    De imagem com botão a criar linha para tal e estas duas só não rolavam o IE-K/0X... nos outros ia bem.

    Ai mais que Tabajaramente meus póbrema se acabaram-se ao seguir mais esta Dica que foi de primeiríssima!
    Valeu!

    []'s

    ResponderExcluir
  67. Olá Compulsivo!

    Meu template ñ é original,o 2° trecho está certinho mas o 1° trecho está diferente veja:

    #blog-pager-newer-link {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    #blog-pager-older-link {
    float: right;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    .feed-links {
    margin: 10px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    clear: both;
    text-align: left;
    font: $postfooterTextFont;
    color: $feedlinksColor;

    Alguma sugestão?
    Abraços

    ResponderExcluir
  68. vlw me ajudou muito ainda bem que existem pessoas que ajudam as outras muiiiiiiiito Obrigada!!

    ResponderExcluir
  69. Obrigadão, funcionou logo a 1ª :)

    ResponderExcluir
  70. Olá!
    Desculpe por estar incomodando, só que não estou conseguindo arrumar o navegador do meu Blog. O template é modificado e não estou conseguindo alterar para este que postou.
    O meu é fora de ordem e está muito junto.
    Já tentei de tudo (que eu sei...rs)

    Desde já agradeço!

    ResponderExcluir
  71. Viciei... Caramba seu blog é uma mistura de cerveja bem gelada com churrrasquinto quente... Viciante!!!
    Agradeço pelo conteúdo super proveitoso!
    Brigaduuuuuuu......

    ResponderExcluir
  72. Eu gostaria de excluir este link que diz "postagens mais antigas", como faço? Até porque todos assuntos postados no meu blog estão na lista ao lado!

    Obrigada
    Vivian

    ResponderExcluir
  73. Muito feliz com essa dica, minha página agora mais simples, e mais bonita.

    Sucesso

    ResponderExcluir
  74. moço por favor vc sabe como eu tiro aquele link de navegação do cabeçalho do blog aquele que é assim

    home, dicas comentario e etc jah venho no temple mais n consigo tirar. obrigada srtapamii

    ResponderExcluir
  75. Compulsivo, exelente dica e personalização. Adotei esta dica e deu tudo certo, a não ser um pequeno erro. As bordas em cima e embaixo ficaram cortadas, assim fazendo o botão não aparecer por completo. Voltei às alterções anteriores originais do blog e os textos também ficaram cortados...

    Valeu!

    Augusto Búrigo

    ResponderExcluir
  76. Compulsivo, um erro ainda persisti depois da correção. Quando o botão "Seguinte" está sozinho a borda inferior dele não aparece. Quando seguido das setas "<<" (ou não) são as superiores que não aparecem.

    Valeu!

    Augusto Búrigo

    ResponderExcluir
  77. Cara tentei mais não consegui fazer as auterações

    ResponderExcluir
  78. Legal, inseri no meu, obrigadinha

    ResponderExcluir
  79. Show de bola esta dica Compulsivo! Eu estava usando as páginas numeradas, mas como você disse tem o problema de não visualizá-las em páginas individuais e também constatei que muitos posts são omitidos com a navegação numerada.

    Abraço

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

O que significa DVDRip, DVDScr, R5, etc?

Nomes de todas as igrejas do Brasil

Hospedar JavaScript no Blogger / Blogspot