[Blogger - Customização] - Como customizar os botões de paginação do Blogger

Eu já mostrei aqui no blog como instalar um gadget de paginação, para substituir os botões de paginação padrão do Blogger por botões de paginação com numeração, mas hoje eu mostrarei a você como customizar os botões de paginação do próprio Blogger adicionando estilos CSS a eles, mudando a frase dos botões ou até mesmo substituindo-os por imagens.

Adicionando estilos CSS à paginação do Blogger


Neste primeiro item, mostrarei a você como customizar os botões adicionando estilos CSS a eles. Os estilos CSS serão responsáveis pode adicionar cores de fundo, cores de texto, tipo e tamanho de fonte, bordas e outros estilos aos botões. Para adicionar os estilos CSS siga os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ------ Customização dos botões de paginação do Blogger ------ */

#blog-pager-older-link {
        font: normal normal 12px Arial; /* fonte do botão */
        text-align: center;
        padding: 5px;
        margin: 0;
}

#blog-pager-older-link a:link,
#blog-pager-older-link a:visited {
        color: #000000; /* cor do texto do botão */
        background: #EEEEEE; /* cor de fundo do botão */
        border: 1px solid #AAAAAA; /* cor da borda do botão */
        text-decoration: none;
        outline: none;
        webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
}

#blog-pager-older-link a:hover {
        color: #FFFFFF; /* cor do link/texto do botão com o mouse em cima */
        background: #000000; /* cor de fundo do botão com o mouse em cima */
        border:1px solid #FFFFFF; /* cor da borda do botão com o mouse em cima */
}


#blog-newer-older-link {
        font: normal normal 12px Arial; /* fonte do botão */
        text-align: center;
        padding: 5px;
        margin: 0;
}

#blog-pager-newer-link a:link,
#blog-pager-newer-link a:visited {
        color: #000000; /* cor do link/texto do botão */
        background: #EEEEEE; /* cor de fundo do botão */
        border:1px solid #AAAAAA; /* cor da borda do botão */
        text-decoration: none;
        outline: none;
        webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
}

#blog-pager-newer-link a:hover {
        color: #FFFFFF; /* cor do link/texto do botão com o mouse em cima */
        background: #000000; /* cor de fundo do botão com o mouse em cima */
        border: 1px solid #FFFFFF; /* cor da borda do botão com o mouse em cima */
}


.home-link {
        font: normal normal 12px Arial; /* fonte do botão */
        text-align: center;
        padding: 5px;
        margin: 0;
}

a.home-link,
a.home-link:visited {
        color: #000000; /* cor do link/texto do botão */
        background: #EEEEEE; /* cor de fundo do botão */
        border:1px solid #AAAAAA; /* cor da borda do botão */
        text-decoration: none;
        outline: none;
        webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
}

a.home-link:hover {
        color: #FFFFFF; /* cor do link/texto do botão com o mouse em cima */
        background: #000000; /* cor de fundo do botão com o mouse em cima */
        border:1px solid #FFFFFF; /* cor da borda do botão com o mouse em cima */
}


A parte do código que foi destacada em vermelho é responsável por alterar o botão "Postagens mais antigas"; a parte do código que foi destacada em azul é responsável por alterar o botão "Postagens mais recentes"; e a parte que foi destacada em rosa é responsável por alterar o botão "Início". Você pode alterar qualquer parte do código, desde que você tenha conhecimentos básicos em CSS. Caso contrário, altere somente o que tiver comentários à frente. Os comentários são escritos da seguinte forma: /* exemplo de comentário */.

Você pode também, mudar as cores dos atributos como bem entender. As cores são geradas através de um código hexadecial: #000000, #EEEEEE, #FFFFFF etc. Você pode ver uma tabela completa de cores, clicando aqui, basta escolher o código da cor que você quer e substituir no código acima. Se você utilizar o código que foi fornecido acima sem fazer nenhuma alteração, o efeito que os botões de paginação do seu blog adquirirão será exatamente como o mostrado no exemplo abaixo (passe o mouse nos botões).



NOTA: Os botões de paginação "Postagens mais recentes" e "Postagens mais antigas", geralmente possuem o mesmo efeito e cores para que fiquem combinando, mas nada impede que você coloque estilos diferentes para cada botão. Foi por isso que o código acima foi fornecido separadamente para cada botão, para facilitar a customização independente caso o usuário assim o queira.

4. Para finalizar, clique em Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Mudando a frase/texto do botão de paginação do Blogger


Para os usuários que estão satisfeitos com os botões de paginação do Blogger do jeito que são fornecidos, mas gostaria de mudar o texto do botão, os passos abaixo explicam exatamente como o fazer, siga-os para alterar o texto.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

Postagens mais recentes

<data:newerPageTitle/>

Postagens mais antigas

<data:olderPageTitle/>

Início

<data:homeMsg/>

3. Substitua cada um dos códigos citados acima pelas respectivas frases que você quer. E após fazer as substituições, clique em Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo.

Substituir os botões de paginação do Blogger por imagens


O processo para substituir os botões de paginação por imagens, é semelhante ao processo que acabamos de ver para mudar o texto. Essa opção geralmente é mais utilizada por pessoas que possuem blogs de humor e afins, mas nada impede que você também a utilize. Para substituir os botões por imagens, siga os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

Postagens mais recentes

<data:newerPageTitle/>

Postagens mais antigas

<data:olderPageTitle/>

Início

<data:homeMsg/>

3. Substitua todos os 3 códigos pelo código mostrado abaixo.

<img src="link-da-imagem" border="0" alt=""/>

4. Altere a parte destacada em vermelho pelo link da imagem que você quer para cada botão. Para finalizar, clique no botão Visualizar e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, agora basta acessar o seu blog e conferir como os botões de paginação ficaram. Se você gostou do artigo ou ficou com dúvidas, sinta-se a vontade para participar postando um comentário.

Atualização — 24.08.2011 às 04h50
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, e para adicionar um efeito de transição suave ao CSS dos botões.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 3 comentários neste artigo!

  1. Igor!

    Não se vc teve o mesmo problema, mas venho percebendo em alguns blogs - inclusive no meu - um problema com a visualização de postagens antigas. Fiz a substituição do link como eu vi no Templates Novo Blogger - http://templatesparanovoblogger.blogspot.com/2011/03/problemas-com-o-link-postagens.html - e agora os links estão meio visíveis, a outra parte sumiu.

    Vc teve o mesmo problema?

    Abração!

    ResponderExcluir
  2. Ah, só para completar: com o código acima eu corrigi o link desaparecido, mas só queria saber se mais alguém teve esse problema!

    Abração!

    ResponderExcluir
  3. Sybylla: creio que meu blog tenha sido afetado também (digo “creio” pois meu computador queimou, então fiquei afastado da Internet), mas como eu utilizo o hack de paginação, acredito que não tenha aparecido para ninguém. Eu removi o hack por alguns instantes e os botões padrão do Blogger estão aparecendo normalmente. Pelo que vi hoje - em meus 161 e-mails de newsletter -, isso foi um bug do próprio Blogger. Agradeço as visitas e os comentários! Volte sempre. Abraços.

    ResponderExcluir