Corrigindo o Estilo do Navegador do Blogger

| 1 Comentário

Se você usa o hack do Compulsivo para o Pager do Blogger (barra com links para a página anterior / próxima página), deve ter percebido que de uns tempos para cá, ele mudou. O que era assim:

Tornou-se assim:

Hoje, vamos aprender como fazê-lo voltar para o seu estilo antigo:

 - Resumo para usuários mais experientes:

Basta trocar os IDs CSS do Pager e de seus elementos, que ele voltará a funcionar como antes.

- Passo-a-passo para usuários menos experientes:
O tutorial está dividido em duas etapas:

>> Primeira etapa

Vá em “Editar HTML” e marque “Expandir modelos de widgets”

Localize um código semelhante a esse:

#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}

E substitua por:

#blogpager 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 */
}
#blogpager a:hover {
color: #000000; /* Cor do texto */
background-color: #EEEEEE; /* Cor do destaque */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blogpager {padding:5px;text-align:right;float:right}
#blogpager-older-link, #blogpager-newer-link {text-align:right}

OBS.: o código pode variar por causa da cor.

>> Segunda Etapa
 A primeira etapa resume-se a trocar o estilo CSS do Pager. Agora, vamos atualizar o Pager para ele corresponder às mudanças:

Procure por:

<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>

E substitua por:

<b:includable id='nextprev'>
<div id='blogpager'>
<b:if cond='data:newerPageUrl'>
<span id='blogpager-newer-link'>
<a 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='blogpager-older-link'>
<a 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 ver se está tudo certo e salve. Pronto! Seu Pager está normal como antes!

1 Comentário [Comente também!]:

F3N1X disse:

Excelente dica amigão!

Fiz pequenas adaptações para poder usar o hack em meu site.

Sua maneira de explicar o conteúdo é clara e objetiva.

Um forte abraço.

Ass: F3N1X

Postar um comentário

Antes de comentar, leia:

  • Não serão permitidos comentários com ofensas pessoais
  • Não serão permitidos comentários com conteúdo referente à pirataria
  • Os comentários devem ter ligação direta com o assunto
  • Não serão tolerados comentários com links para promover outros blogs.
  • Se quiser deixar um link, comente com a opção OpenID
  • O comentário será lido antes de ser publicado e só será publicado se estiver de acordo com as regras
  • Os comentários não refletem a opinião do autor do blog
  • O autor do blog não se responsabiliza pelo conteúdo dos comentários postados por outros visitantes