Maroteiros ; )

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, é igual nós temos aqui no Maroteiros



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.

#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 {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&gt

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


Essa dica foi retirada na cara dura do: Usuario Compulsivo