Botão estilo CSS "Postagem mais Recentes" e "Postagem mais Antiga" do Blog

Olá hoje vamos aprender a criar os botões "Postagem Mais Recente" e "postagens mais Antigas" que são aqueles links que aparece abaixo do roda-pé da postagem do blog, e o que iremos fazer será simplesmente adicionar um Código CSS que irá personalizar toda a área do link, e dando um feito parecendo um botão, e ao passar o Mouse sobre o botão ele Muda de cor...

Na aula anterior eu ensinei como Criar botão de "Postagem mais Recentes" e "Postagem mais Antiga" no Blog, só que neste tutorial vamos usar estilo CSS  

Então vamos aprender a personaliza.
Primeiro você vai acessar o painel de edição do seu blog, vá em Modelo >> em Editar HTML >> depois em Prosseguir.

Agora vamos pesquisar um código no HTML e pra lhe ajudar a pesquisar utilize as teclas Ctrl + F do teclado e pesquise por esse Tag:

]]></b:skin>

Acima do Tag que você encontrou você vai colocar esse código CSS:

Copie o código

/* ------ Customização dos botões de paginação do Blogger ------ */

#blog-pager-older-link {
        font: normal normal 12px Arial; /* fonte do botão */
        text-align: center;
        padding: 5px;
        margin: 0;
}

#blog-pager-older-link a:link,
#blog-pager-older-link a:visited {
        color: #000000; /* cor do texto do botão */
        background: #EEEEEE; /* cor de fundo do botão */
        border: 1px solid #AAAAAA; /* cor da borda do botão */
        text-decoration: none;
        outline: none;
        webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
}

#blog-pager-older-link a:hover {
        color: #FFFFFF; /* cor do link/texto do botão com o mouse em cima */
        background: #000000; /* cor de fundo do botão com o mouse em cima */
        border:1px solid #FFFFFF; /* cor da borda do botão com o mouse em cima */
}

#blog-newer-older-link {
        font: normal normal 12px Arial; /* fonte do botão */
        text-align: center;
        padding: 5px;
        margin: 0;
}

#blog-pager-newer-link a:link,
#blog-pager-newer-link a:visited {
        color: #000000; /* cor do link/texto do botão */
        background: #EEEEEE; /* cor de fundo do botão */
        border:1px solid #AAAAAA; /* cor da borda do botão */
        text-decoration: none;
        outline: none;
        webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
}

#blog-pager-newer-link a:hover {
        color: #FFFFFF; /* cor do link/texto do botão com o mouse em cima */
        background: #000000; /* cor de fundo do botão com o mouse em cima */
        border: 1px solid #FFFFFF; /* cor da borda do botão com o mouse em cima */
}

.home-link {
        font: normal normal 12px Arial; /* fonte do botão */
        text-align: center;
        padding: 5px;
        margin: 0;
}

a.home-link,
a.home-link:visited {
        color: #000000; /* cor do link/texto do botão */
        background: #EEEEEE; /* cor de fundo do botão */
        border:1px solid #AAAAAA; /* cor da borda do botão */
        text-decoration: none;
        outline: none;
        webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
}

a.home-link:hover {
        color: #FFFFFF; /* cor do link/texto do botão com o mouse em cima */
        background: #000000; /* cor de fundo do botão com o mouse em cima */
        border:1px solid #FFFFFF; /* cor da borda do botão com o mouse em cima */
}

Pronto Pessoal, Já adicionamos o CSS agora é só clicar em Visualizar pra verificar se você não fez nada errado, e se não apareceu erro é por que está tudo certo então Salve.

Alteras as cores do CSS
Se você precisar mudar as cores dos botões para se adequar com as cores do seu blog, é preciso que altere no código CSS.

• Veja que no código CSS eu destaquei em Três cores (Rosa, Azul, e Verde). 
• A parte que eu deixei em cor de Rosa é a parte que representa o botão "Postagem Mais Antiga".
• Em Azul é a parte do botão "Postagem mais Recentes".
• E a parte que está em cor Verde é o botão "INICIO".

Então pra para alterar a Cor é só substituir o código da cor por um outro código.

Se você ainda não sabe como é o código de uma cor veja um exemplo logo abaixo:
#FFFFFF - #000000 - #EEEEEE - #AAAAAA - #363636
O código da cor é iniciado por # e contem Letras e números 
>>> Clique Aqui para encontra uma tabela de cores.

Prontinho espero terem gostado