O modelo que ensinarei tem o fundo semi-transparente, super moderno e não precisa de nenhuma imagem de fundo. Se você seguir os passos direitinho, ele ficará mais ou menos assim:
E não é muito difícil, basta colocar apenas um código e pronto. Vamos ao tutorial, então?
Personalizar a atribuição do Blogger:
Antes de começar, gostaria de avisar que pode ser que este código não fique bem em blogs que tenham o fundo inteiro integrado. Para saber se ele ficará igual a como está aqui no DSA, vá ao rodapé do seu blog e veja se a atribuição fica dentro ou fora do corpo do seu template. Se ela ficar do lado de fora, é mais provável que funcione.
Lembrando que
antes de fazer qualquer mudança no HTML de seu blog, recomenda-se que
se faça antes num blog de testes ou que você faça um backup do seu template atual.
- Entre em Modelo > HTML;
- Clique em qualquer parte de seu HTML e aperte "Ctrl + F" no seu teclado;
- Copie o seguinte código: ]]></b:skin> cole-o na caixinha que abriu (Search) e aperte a tecla "Enter";
- Antes do trecho destacado, cole o código seguinte:
.region-inner.footer-inner{
background: #FFFFFF; /*Cor do Fundo*/
font: 14px Arial; /*Tamanho do texto e fonte*/
color: darkmagenta; /*Cor da fonte*/
opacity: 0.7;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-box-shadow: 3px 3px 3px #666666 inset;
box-shadow: 3px 3px 3px #666666 inset;
-webkit-box-shadow: 3px 3px 3px #666666 inset;
margim-bottom: 20px !important;
}
background: #FFFFFF; /*Cor do Fundo*/
font: 14px Arial; /*Tamanho do texto e fonte*/
color: darkmagenta; /*Cor da fonte*/
opacity: 0.7;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-box-shadow: 3px 3px 3px #666666 inset;
box-shadow: 3px 3px 3px #666666 inset;
-webkit-box-shadow: 3px 3px 3px #666666 inset;
margim-bottom: 20px !important;
}
Os códigos em negrito são os que você pode personalizar de acordo com seu gosto (as explicações estão ao lado de cada um), só mexa nos outros códigos se você tiver certeza do que está fazendo. Os códigos em verde deixam as bordas redondas e os em azul colocam sombra. Se não quiser algum, é só apagar.
Visualize para ver se funcionou e depois clique em "Salvar Modelo".
Espero que o código seja útil! Aguardem os próximos!
Beijinhos Alados,
uau,amei o tuto
ResponderExcluirnão deu nada
ResponderExcluir