Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

13/06/2013

Tutorial: personalizar a atribuição do Blogger

Personalizar atribuição
Já faz um bom tempo que eu não posto um tutorial para blog, não é? Hoje aprenderemos a personalizar a área da atribuição do Blogger, aquela que fica no rodapé da página e geralmente comtem os dizeres "Tecnologia do Blogger". Tem gente que pode não gostar muito dessa parte do template, mas, na minha opinião, é uma baita ingratidão retirar os créditos do Blogger. Puxa vida, a gente já está usando o blog de graça, não custa nada deixar um link básico no final da página para mostrar que estamos usando o serviço deles, não?
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.

  1. Entre em Modelo > HTML;
  2. Clique em qualquer parte de seu HTML e aperte "Ctrl + F" no seu teclado;
  3. Copie o seguinte código: ]]></b:skin> cole-o na caixinha que abriu (Search) e aperte a tecla "Enter";
  4. 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;
}


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,
2 Comentários
Comentários

2 comentários:

Related Posts Plugin for WordPress, Blogger...
Posts relacionados