25 março 2012

Como Personalizar o Rodapé do Blog

X_8689f7b9_large
Que domingo lindo hein gente? Bom eu não vou sair hoje e resolvi escrever esse super tutorial para vocês. Descobri ele por acaso, eu tava tentando colocar um gadget pelo html e descobri como colocar uma imagem no rodapé do blog. Se vocês descerem até o final do blog vão ver. Se quiserem um rodapé parecido, vem comigo que eu vou ensinar como fazer.

1. No seu blog clique em editar html e prossiga;
2. Aperte F3 ou Ctrl+F e procure por  .footer-inner {
3. Apague tudo o que aparecer em baixo dessa tag, mas deixe a última chave ( })
4. Depois de ter apagado, coloque a tag abaixo corretamente:

margin-top:-20px;
Background-image: url(SUA IMAGEM AQUI);
Background-position: center bottom;
Background-repeat: no-repeat;

Se seu rodapé já estiver arredondado, retire o arredondamento. Se não souber como faz, comente aqui. Mas se ainda não tiver arredondado, vamos indo!

5.  Agora a gente precisa criar uma imagem para colocarmos no rodapé. Lembre que a largura da imagem tem que ser exata ao do seu blog. Ex: se seu blog tem 980 px a imagem tem que ser 980x 45 px;
Na imagem você pode colocar brushes, pode escrever os créditos, sua política de cópia, seu nome... enfim o que você quiser! Após ter feito a imagem hospede ela (pode ser num blog de teste ) e pegue a url e coloque no lugar indicado. Visualize, se estiver tudo ok salve.


PS: SE QUISER QUE A IMAGEM DO RODAPÉ FIQUE ARREDONDADA COMO A DO BLOG, COLE O CÓDIGO ABAIXO DE .footer-inner { ASSIM:


margin-top:-20px;
Background-image: url(SUA IMAGEM AQUI);
Background-position: center bottom;
Background-repeat: no-repeat;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-right: 20px;

-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;

DEVERÁ FICAR ASSIM (SE COLOCAR O ARREDONDAMENTO) 
CLICA QUE FICA GRANDE!

Espero que tenham gostado e qualquer coisa é só falar comigo que eu ajudo. Para evitar erros, primeiro faça esse tutorial num blog de testes, depois passe para seu blog mesmo.

Comente com o Facebook:

14 comentários:

  1. Goste tanto que ja estou fazendo em meu blog. ficou super fucks..

    htp://debysabetudo.blogspot.com.br

    ResponderExcluir
  2. Obrigada pela passadinha em meu blog!! seja sempre bem vindaaa


    Amei o Blog!!! muito legal esse sorteio... estou participando!!


    seja sempre bem vinda

    bEIJOSS

    thay-degasperi.blogspot..com

    ResponderExcluir
  3. Adorei o tutu, e ficou muito fofo o rodapé *-* faz tempo q não passo aki haha' camilaejustin.blogspot.com

    ResponderExcluir
  4. Que tuto útil flor, ameii *---* XOXO :* charmenaveia.blogspot.com

    ResponderExcluir
  5. oii flor amei o blog estou te siguindo me siga tbm beijao
    http://maddalice.blogspot.com.br/

    ResponderExcluir
  6. Hoy Lindona, eu adorei sua ideia muito legal vou ver o que posso fazer :D

    Sobre o tutorial o melhor jeito de você retirar o responder dos comentários seria colocando o seu template antes de ser editado, diz que você salvou seu modelo antes de colocar essa função :o

    ResponderExcluir
  7. Olá, tudo bem? :) Estou passando aqui pra dizer que seu blog é super interessante e eu amei. Estou seguindo já. E se não for muito incômodo, poderia passar no meu? Saiba que estou te esperando lá.

    Beijos e sucessos

    http://blogclubeteen.blogspot.com.br/

    ResponderExcluir
  8. Fica mto legal mesmo :D Obrigada pela visita, volte sempre viu?♥

    www.blogmundodamoda.com/

    ResponderExcluir
  9. AAAAAAAAAAH VOCE ME SALVOU ! eu estava procurando esse tutorial faz muito tempo mais NUNCA achava nossa obrigada mesmo.Estou seguindo agora ok flor ? beijos ♥
    www.guidymania.blogspot.com

    ResponderExcluir
  10. Ótimo tutu, me ajudou bastante brigada.
    Gostaria muito que você visitasse meu blog, http://coffemilia.blogspot.com.br/
    beijos.
    Já to seguindo adorei o blog.

    ResponderExcluir
  11. Ah muito obrigada! Ajudou e muito, parabéns pelo blog =)

    http://thesongoftheletters.blogspot.com/

    ResponderExcluir
  12. minha imagem ficou mt pro lado esquerdo oque eu faço ?

    ResponderExcluir
  13. Não xtou conseguindo...ajudem-me por favor

    ResponderExcluir
  14. Eu queria te dar uma sugestão que é a seguinte:
    -Muitas vezes vc faz tutorial, para o publico feminino e eu gostaria de que vc fizesse tambem para o leitor masculino......
    O post estava incrivel!!!!!

    ResponderExcluir
:) :( ;) :D :-/ :P :-O X( :7 B-) :-S :(( :)) :| :-B ~X( L-) (:| =D7 @-) :-w 7:P \m/ :-q :-bd

Deixe aqui sua opinião a respeito do post ou do blog ♥
Você pode comentar através do Facebook também! É rápido, simples e prático!