Personalizando o "Pager"

 Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial para vocês! No tutorial de hoje ensinarei a como personalizar o pager do blogger. Pro caso de você se perguntar "o que é o pager do blogger?" eu já adianto a resposta... Pager são aqueles links "Postagens mais recentes", "Início" e "Postagens mais antigas" que se encontram no rodapé da área das postagens. Enfim, vamos la.

 Comece acessando a página de editar o HTML, em seguida busque por:

#blog-pager {
  float: left;
 }

 Este trecho é referente ao link "Início". Vamos substituir todo este código pelo seguinte código:

#blog-pager a{
  border:#XXXXX 1px solid;/* --Defina a borda--*/
  background:#XXX; /* --Defina a cor--*/
  font-family:Arial; /* --Fonte--*/
  color:#XXX !important; /* --Cor do link antes de passar o mouse por cima--*/
  font-size:13px; /* --Tamanho da fonte--*/
  padding:2px 2px 2px 2px;
 }

#blog-pager a:hover{
  border:#XXXXX 1px solid;/* --Defina a borda--*/
  background:#XXX; /* --Defina a cor--*/
  font-family:Arial; /* --Fonte--*/
  color:#XXX !important; /* --Cor do link antes de passar o mouse por cima--*/
  font-size:13px; /* --Tamanho da fonte--*/
  padding:2px 2px 2px 2px;
}

 Na parte #blog-pager a{ é onde iremos definir as características do botão "Início" antes de passar o mouse por cima, já na parte #blog-pager a:hover{ é onde definimos as características do botão ao passar o mouse por cima.
 Agora vamos definir as características dos botões "Postagens mais antigas" e "Postagens mais recentes". Encontre o seguinte código:

#blog-pager-newer-link {
  float: left;
 }

#blog-pager-older-link {
  float: right;
 }

 E substitua pelo seguinte código:

#blog-pager-newer-link a{
  border:#XXXXX 1px solid;/* --Defina a borda--*/
  background:#XXX; /* --Defina a cor--*/
  font-family:Arial; /* --Fonte--*/
  color:#XXX !important; /* --Cor do link antes de passar o mouse por cima--*/
  font-size:13px; /* --Tamanho da fonte--*/
  padding:2px 2px 2px 2px;
 }

#blog-pager-newer-link a:hover{
  border:#XXXXX 1px solid;/* --Defina a borda--*/
  background:#XXX; /* --Defina a cor--*/
  font-family:Arial; /* --Fonte--*/
  color:#XXX !important; /* --Cor do link antes de passar o mouse por cima--*/
  font-size:13px; /* --Tamanho da fonte--*/
  padding:2px 2px 2px 2px;
}

#blog-pager-older-link a{
  border:#XXXXX 1px solid;/* --Defina a borda--*/
  background:#XXX; /* --Defina a cor--*/
  font-family:Arial; /* --Fonte--*/
  color:#XXX !important; /* --Cor do link antes de passar o mouse por cima--*/
  font-size:13px; /* --Tamanho da fonte--*/
  padding:2px 2px 2px 2px;
 }

#blog-pager-older-link a:hover{
  border:#XXXXX 1px solid;/* --Defina a borda--*/
  background:#XXX; /* --Defina a cor--*/
  font-family:Arial; /* --Fonte--*/
  color:#XXX !important; /* --Cor do link antes de passar o mouse por cima--*/
  font-size:13px; /* --Tamanho da fonte--*/
  padding:2px 2px 2px 2px;
}

 "#blog-pager-newer-link" é referente ao botão "Postagens mais recentes" e "#blog-pager-older-link" é referente ao botão "Postagens mais antigas". As modificações a serem feitas nos demais botões são as mesmas citadas do botão Início.

Mudando os nomes Início, Postagens mais recentes e antigas.

Pois bem, muita gente acha feio aqueles links, agora vou ensinar a como estar trocando o que irá aparecer como representação de cada link. Busque por:

<data:olderPageTitle/>

 Este é o código que representa o "Postagens mais antigas", para mudá-lo você deve substituir por aquilo que quiser. Exemplo:

[...]title='data:olderPageTitle'>Próximo</a>[...]

<data:newerPageTitle/>

 Este é o código que representa o "Postagens mais recentes", para mudá-lo você deve substituir por aquilo que quiser. Exemplo:

[...]title='data:newerPageTitle'>Anterior</a>[...]

<data:homeMsg/>

 Este trecho é encontrado duas vezes no código, porém iremos fazer a alteração apenas no primeiro. Este é o código que representa o "Início", para mudá-lo você deve substituir por aquilo que quiser. Exemplo:

[...]expr:href='data:blog.homepageUrl'>Página Inicial</a>[...]