14.1.13

Como por imagem no rodapé do blog


Boa tarde gente!

Queria agradecer à todos, e principalmente à Kaorii pela avaliação. Realmente ajudou muito! Chega de carinhas nos posts, realmente isso não é nem um pouco bom, estava estragando completamente o CD. Espero que agora eu pare com essas coisas desagradáveis. Enfim, estamos sempre melhorando, não é mesmo? Espero que essa seja mais uma dessas melhoras e que contribua para que o blog cresça.

No post de hoje vou ensinar a personalizar o footer do blog, também conhecido como rodapé, colocando uma imagem igual aqui. Inicialmente eu vi o footer personalizado dessa maneira no Land of Designs, mas eu não consegui colocar seguindo o tutorial de lá. Daí eu mesma arranjei o meu jeito de por a imagem no footer. Foi apenas uma customização do que todos já conhecem, aquele que é uma barrinha colorida. Eu modifiquei o código para que possa colocar a imagem.


Modo 1:


Procure por ]]></b:skin> e acima da tag cole:

#footer-wrapper {
background: url(URL DA IMAGEM); /*imagem do fundo*/
background-repeat: repeat;
z-index: 1000;
height: 73px; /*altura da imagem*/
clear: both;
font-size: 15px; /* tamanho da fonte */
color: #fff; /* cor da fonte */
text-align: center; /* alinhamento da fonte */
padding: 5px;
}


 Para adicionar o escrito, procure por  </body> e acima cole:

<div id='footer-wrapper'> Escreva o que quiser aqui </div>

Salve e pronto.



Modo 2:





É praticamente igual ao anterior, mas no lugar do escrito é uma imagem. Eu não achei um jeito de por a imagem pelo HTML, então fiz do meu jeito. Se alguém conhecer outra forma me avise pra mim atualizar o post, pois fiz do jeito que consegui.

Para adicionar o fundo, no caso da imagem, o azul, procure por ]]></b:skin> e acima cole:


#footer-wrapper {
background: url(URL DA IMAGEM DE FUNDO); /*imagem do fundo*/
background-repeat: repeat;
z-index: 1000;
height: 73px;
clear: both;
}

Salve. Agora, para colocar a sua imagem com o nome do blog, adicione um gadget de HTML/javascript, mas deve ser um desses:

*clique para aumentar*

De preferência, no último espaço de adicionar um gadget. Então, como ia dizendo, adicione um gadget de HTML/javascript e cole:

<div style="position: absolute;z-index: 10000; margin-top: 38px; left: 280px;">
<img border="0" src="URL DA IMAGEM" /></div>


Vá alterando os valorem em negrito até que a imagem fique na posição certa. Pronto. Sei que ficou meio confuso, mas tentei deixar o mais claro possível. Qualquer dúvida, é só comentar que te atendo. Beijos ♥

24 comentários:

  1. ótimo tutorial, flor *-* Talvez eu o use no próximo lay... já que o coloquei por pouco tempo rsrs

    Flor, faz um favorzinho?? Poderia seguir o blog do meu maninho? mundogalotoecia.blogspot.com

    Beijos. Luh

    MCW || MY CRAZY WORLD

    ResponderExcluir
  2. Fica lindo assim :3 Acho que vou usar,ficará bem mais bonito.
    Beijos >.< Good Lollipop

    ResponderExcluir
  3. Caramba, estava procurando esse tuto! Muito obrigada linda!!
    Beijos!

    http://productions-ofdreams.blogspot.com.br/

    ResponderExcluir
  4. Fica super fofo, gostei, vou tentar fazer!!
    Amei o novo layout, ficou lindo de mais *--* Beeijos!
    pqngarota.tk

    ResponderExcluir
  5. amei a dica e amei seu blog,tudo muito lindo aqui <3 e com certeza vou usar as dicas pra poder criar o proximo lay do meu blog.

    beijinhus;*

    weneedtochangethis.blogspot.com

    ResponderExcluir
  6. o.O sua linda! Eu estava querendo este tutorial, mas não consegui pedir, pois quase não estava visitando o CD! Amei o tutorial, vou colocar ;) Beijão!

    Ju, do Epílogos e Finais.

    ResponderExcluir
  7. Que perfeitos esses modelos, meldeus *-*
    Amei, acho que vou usar um no próximo layout do COT ^^
    Cake Of Tutorials

    ResponderExcluir
  8. Adorei o tutorial, o efeito fica perfeito! ><
    Amei o novo layout Bárbara, babando aqui (haha')

    Beijos

    BANGTEEN.BLOGSPOT.COM

    ResponderExcluir
  9. Que lindo, adorei esse tutorial. Vou colocar no meu proximo layout ♥
    Seguindo | lilarozen.blogspot.com.br

    ResponderExcluir
  10. O efeito fica mt lindoo. Gostei bastante!
    Seguindo, segue de volta? Beijos

    www.Be--Different.blogspot.com

    ResponderExcluir
  11. own, adorei! *-* Hm, eu tô te convidando pra passar no meu blog, se gostar pode ajudar a completar a meta? Bom, espero que gostei do meu blog, comenta também se gostar, adoraria saber tua opinião linda ♥

    Kiss ~ Teen's House | Clica no perfil ♥

    ResponderExcluir
  12. Nossa, que tutorial perfeito!!! *U*
    Eu não sabia como se colocava imagem no footer e já tinha procurado uma vez mas acabei nem achando nada X.X
    Este tutorial há de me ajudar muito!! ^^

    ResponderExcluir
  13. Ai que legal! Vou testar lá no blog! Adorei.



    Quer saber mais sobre a nova onda que está atacando as meninas?? Estou falando da série e livro "Os diários de Carrie". É a nova sensação das garotas... Ficou curiosa? Corre aqui que no BDF tem as informações! Tudo para se apaixonar pela Carrie!
    Batom De Framboesa.

    ResponderExcluir
  14. Oi Bárbara, eu tenho uma tag pra você lá no meu blog. Apropósito... Ótimo tutorial. Muito bom. Eu vou tentar...

    Beijos, Pâm.

    Menina Delicada

    ResponderExcluir
  15. ótimo tutorial!
    adorei seu blog, é lindo e tem um ótimo conteúdo :)
    beijos da isa
    link: Cute Time//Official

    ResponderExcluir
  16. Ameei .. Vou usar no novo layer q estou fazeendo !
    E deixarei os merecidos créditos (claro dhã)

    http://blogueirarebelde.blogspot.com.br/

    ResponderExcluir
  17. Faz um atualizado, porque o blogger não tem mais o ]]> !
    Dá pra fazer a versão atualizada?

    ResponderExcluir
    Respostas
    1. Tem sim, é porque você tem que clicar na primeira setinha preta pra aparecer os códigos que ficavam antes dele :)

      Excluir
  18. Não funcionou o trecho de colocar o "background" ='C

    ResponderExcluir
    Respostas
    1. eu heim.. às vezes é o link da imagem ou você tirou alguma letra um dos parênteses do código quando foi colar ele... Estranho º-º

      Excluir
  19. Super útil, vou usar ele no meu proximo lay

    ResponderExcluir
  20. Caramba, um rapaz com 20 anos nas costas, barbudo, acaba de ser ajudado em HTML por uma garota de 13 anos, você é demais Bárbara! haha

    Obrigado demais moça, agradeço grandemente ♥

    ResponderExcluir