29 de set de 2013

Personalizando o rodapé do blog

Amanhã começam minhas provas e realmente não sei se vou ter tempo para postar essa semana. É bem provável que sim, mas não posso afirmar. Estou dormindo tarde e acordando tarde, e por causa disso não sei se vou conseguir dormir para ir a aula, perdi a aula de sexta-feira porque não acordei O.O Aulas sempre me dão boas ideias, mas estou faltando tanto que não tenho nada de interessante para escrever. Estou esperando ansiosamente pela minha formatura, ao mesmo tempo que não quero que acabe a mordomia que é estudar. ;-;

Estou sem ideias de tutoriais para fazer, então resolvi ensinar a personalizar o rodapé do blog, como eu uso aqui. Fiz isso na versão passada do blog, e na atual, Madness Returns. O tutorial nada mais é do que aquele que coloca área de créditos no blog, com uma diferença apenas de que esse tem uma imagem. No fim do post deixei algumas imagens que vocês podem usar e uma base para aplicarem os próprios efeitos/cores. Vocês podem colocar também uma imagem na largura total do blog, fica bonito do mesmo jeito, desde que combine.


1- Vá no HTML do seu blog e procure por ]]></b:skin>. Acima, cole:

#footer-wrapper { background: url("URL DA SUA IMAGEM") repeat;height: 60px; font-size: 90%; color: #fff; text-align: center; padding-top: 60px; }

Para colocar um link (opcional): Procure por </body>. Acima, cole:

<div id='footer-wrapper'><div align='center'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Design by <spam style='font: white'><a href='LINK DO SEU BLOG' target='_blank'>SEU NOME</a></spam> | Tecnologia do <a href='http://blogger.com/' target='_blank'>Blogger</a> | Todos os direitos reservados </div></div>

Edite apenas o que está sublinhado. O nome do seu blog aparecerá automaticamente.

Você pode colocar uma imagem grande e colocar Gadgets no rodapé, os créditos são opcionais.

Entendendo o código:
background: url("URL DA SUA IMAGEM") repeat; >> URL da sua imagem, troque o repeat por no-repeat para que a imagem não repita.
height: 60px; >> Troque o 60 pela altura da sua imagem.
font-size: 90%; >> Tamanho da fonte. Você pode colocar em pixels (px) ou deixar do jeito que está.
color: #fff; >> Cor da fonte.
text-align: center; >> Alinhamento do texto.
padding-top: 60px; >> Espaçamento entre topo e o rodapé. Mexa apenas se você tem conhecimento em HTML.

As imagens:


Essa é a base


                      


Essa último é daqueles que ocupam a largura toda. Coloquei uma frase e uma imagem de um gatinho, o fundo ficou simples pois assim vocês podem apagar com facilidade e mudar a cor para a do blog de vocês. Não coloquei a base do rodapé com coraçõezinhos porque não iria funcionar, o único jeito de fazer assim é com PSD. Espero que gostem :)


4 comentários:

  1. Ótimo tuto.... Tenho um parecido com este no meu blog, só que no lugar dos links que colocamos pelo html, eu coloco na imagem mesmo.
    www.soytiago.blogspot.com

    ResponderExcluir
  2. É um ótimo tutorial! Eu procurei por muito tempo como personalizar com imagens, mas quando finalmente achei não consegui fazer funcionar :(

    ResponderExcluir
  3. Meu período de provas já passou, graças a Kami!
    Vou usar no próximo lay *-*

    ResponderExcluir
  4. Estou aprendendo muito aqui...vou testar este pra ver se consigo! Feliz Ano Novo!

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!