Personalizando o Pager

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:




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





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





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