Deixe os links de navegação de seu blog no formato de botão colocando as cores que você mais gosta.
Apresentamos mais uma opção de personalização de seu blog, hoje daremos uma remodelada nos links de navegação, que são aquelas opções que ficam logo abaixo no seu blog e que nos modelos padrão do Blogger vem com os textos: Postagem mais recente, Início e Postagem mais antiga.
O meio que explicaremos aqui mostra como deixá-los em formato de botões com a possibilidade de alterar sua cor de fundo, bordas, texto tanto estáticos quanto ao passar o mouse. Com isso você colocará a cor que desejar e por si só criará um efeito ao passar o mouse alternando entre cores de sua preferência.
Se você quer dar uma cara nova a seu blog e modificar a aparência dos links de navegação, veja a seguir como fazer em um processo bem simples.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Transformando em Botões
1º- Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
2º- Clique no código de seu template, pressione "CTRL+F" e pesquise por ]]></b:skin>
3º- Copie o código abaixo para um editor de texto e faça as alterações desejadas:
Observação: As partes comentadas destacadas em VERMELHO, mostram o que você pode alterar para personalizar a seu gosto.
/*Botões nos links de navegação*/
a.home-link, a.blog-pager-newer-link, a.blog-pager-older-link {
display:inline-block;
border:1px solid #DDD; /*Cor da borda*/
border-radius:3px;
text-shadow:0 1px 1px #fff; /*Cor da sombra texto*/
text-decoration:none;
font: bold 11px Sans-Serif; /*Tipo e tamanho da fonte*/
padding:6px 10px;
white-space:nowrap;
vertical-align:middle;
color: #666; /*Cor da fonte*/
background: #F1F1F1; /*Cor de fundo do botão*/
}
a.home-link:hover, a.blog-pager-newer-link:hover, a.blog-pager-older-link:hover, a.home-link:focus, a.blog-pager-newer-link:focus, a.blog-pager-older-link:focus {
border-color: #999; /*Cor da borda ao passar o mouse*/
background: -webkit-linear-gradient(top, white, #E0E0E0); /*Gradiente botão ao passar mouse*/
background: -moz-linear-gradient(top, white, #E0E0E0); /*Gradiente botão ao passar mouse*/
background: -ms-linear-gradient(top, white, #E0E0E0); /*Gradiente botão ao passar mouse*/
background: -o-linear-gradient(top, white, #E0E0E0); /*Gradiente botão ao passar mouse*/
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; /*Cor sombra botão p/ mouse*/
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; /*Cor sombra botão p/ mouse*/
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; /*Cor sombra botão p/ mouse*/
}
a.home-link:active, a.blog-pager-newer-link:active, a.blog-pager-older-link:active {
border: 1px solid #AAA ; /*Cor da borda botão ativo*/
border-bottom-color: #CCC; /*Cor da borda inferior botão ativo*/
border-top-color: #999; /*Cor da borda superior botão ativo*/
-webkit-box-shadow: inset 0 1px 2px #aaa; /*Cor da sombra botão ativo*/
-moz-box-shadow:inset 0 1px 2px #aaa; /*Cor da sombra botão ativo*/
box-shadow:inset 0 1px 2px #aaa; /*Cor da sombra botão ativo*/
background:-webkit-linear-gradient(top, #E6E6E6, gainsboro); /*Gradiente botão ativo*/
background:-moz-linear-gradient(top, #E6E6E6, gainsboro); /*Gradiente botão ativo*/
background:-ms-linear-gradient(top, #E6E6E6, gainsboro); /*Gradiente botão ativo*/
background:-o-linear-gradient(top, #E6E6E6, gainsboro); /*Gradiente botão ativo*/
}
4º- Agora cole o código ACIMA da tag ]]></b:skin> que você pesquisou.
5º- Clique em "Visualizar", estando tudo de acordo clique em "Salvar Modelo".
Vá em seu blog e veja o resultado.
Observação: Caso não goste do resultado obtido, apenas volte ao editor html de seu template e apague o código que você colocou e salve normalmente.
Gostou? Comente. O seu comentário é a motivação para nosso trabalho.
Comentários