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 + "_blog-pager-newer-link"' title='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"' title='Próxima página'>Seguinte >></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 + "_blog-pager-newer-link"' title='Página anterior'><<</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blogpager-older-link'>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' title='Próxima página'>Seguinte >></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!]:
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: