Como personalizar o rodapé do blog

Através do Designer de modelo do Blogger não podemos personalizar todos os elementos da página (pelo menos da forma que desejamos). Um exemplo é o rodapé. Em alguns modelos podemos personalizar a cor dos links, a cor do background e em outros nem isso. Mas podemos fazer tudo isso (e muito mais) se editar-mos diretamente o código HTML do blog. Note que neste exemplo vamos personalizar a aparência do rodapé e não o seu conteúdo.

No seu blog vá em Modelo --> Editar HTML e procure por .footer-inner {. Você encontrará o código abaixo (pode ser diferente dependendo do modelo do blog, neste caso, procure por algo semelhante):

.footer-inner {
    ALGUM CONTEÚDO AQUI
}

Podemos personalizar o rodapé acrescentando uns detalhezinhos nesse código. Para alterar a cor do background, por exemplo, acrescente a linha abaixo ( juntamente com o conteúdo existente e sempre entre as chaves):

background-color: #00923e;

Para adicionar uma imagem como background:

background-image: url(https://sites.google.com/site/juarezlourenco/handle_with_care.png);

Substitua a parte colorida pelo URL de sua imagem.

Para adicionar uma cor e uma imagem ao mesmo tempo:

background: url(https://sites.google.com/site/juarezlourenco/handle_with_care.png), #00923e;

Duas imagens como background:

background: url(https://sites.google.com/site/juarezlourenco/bg_frog.png) no-repeat top right, url(https://sites.google.com/site/juarezlourenco/handle_with_care.png);

Note que a primeira imagem está posicionada no topo à direita e não se repete (no-repeat top right) mas você pode alterar isto substituindo top por bottom e right por left. Para a imagem repetir horizontalmente substitua no-repeat por repeat-x e para repetir verticalmente substitua por repeat-y. Para centralizar utilize center. Lembre-se de que ao utilizar duas imagens, a imagem que se repete deve ser colocada por último, caso contrário, ela ocultará a outra imagem. Melhores resultados são obtidos utilizando-se imagens com transparência (PNG ou GIF).

Para adicionar um gradiente de cores:

background-image: linear-gradient(7.6deg, #ff0000 20%, #0000ff 80%);

Para aumentar ou diminuir o tamanho da fonte:

font-size: 14px;

Para alterar a fonte:

font-family: Georgia;

Ainda podemos colocar o texto em negrito, itálico, maiúsculo, maiúsculo com a primeira letra maior, bordas, bordas arredondadas, enfim, as possibilidades são muitas e ocupariam muito espaço se fossem incluídas aqui.

O código de um rodapé depois de personalizado ficará mais ou menos assim, dependendo, é claro, do que você modificou:

.footer-inner {
   padding: 30px 0;
   overflow: hidden;
   font-size: 14px;
   font-family: Georgia;
   background: url(https://sites.google.com/site/juarezlourenco/handle_with_care.png), #00923e;
}

Após cada modificação no código de seu template clique em Visualizar modelo para ver como ficou e, quando estiver pronto, clique em Salvar modelo.

Nota: As imagens e as cores utilizadas nestes exemplos foram escolhidas ao acaso e, naturalmente, não são as mais adequadas para esta finalidade.

Por segurança, sempre faça um backup de seu template antes de qualquer modificação.

O autor
Juarez Pereira
Unaí - MG, Brasil
Visualizar meu perfil completo