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:
Para adicionar o escrito, procure por </body> e acima cole:
Salve e pronto.
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:
Salve. Agora, para colocar a sua imagem com o nome do blog, adicione um gadget de HTML/javascript, mas deve ser um desses:
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 ♥
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 ♥
ótimo tutorial, flor *-* Talvez eu o use no próximo lay... já que o coloquei por pouco tempo rsrs
ResponderExcluirFlor, faz um favorzinho?? Poderia seguir o blog do meu maninho? mundogalotoecia.blogspot.com
Beijos. Luh
MCW || MY CRAZY WORLD
Fica lindo assim :3 Acho que vou usar,ficará bem mais bonito.
ResponderExcluirBeijos >.< Good Lollipop
Caramba, estava procurando esse tuto! Muito obrigada linda!!
ResponderExcluirBeijos!
http://productions-ofdreams.blogspot.com.br/
Fica super fofo, gostei, vou tentar fazer!!
ResponderExcluirAmei o novo layout, ficou lindo de mais *--* Beeijos!
pqngarota.tk
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.
ResponderExcluirbeijinhus;*
weneedtochangethis.blogspot.com
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!
ResponderExcluirJu, do Epílogos e Finais.
Que perfeitos esses modelos, meldeus *-*
ResponderExcluirAmei, acho que vou usar um no próximo layout do COT ^^
Cake Of Tutorials
Adorei o tutorial, o efeito fica perfeito! ><
ResponderExcluirAmei o novo layout Bárbara, babando aqui (haha')
Beijos
BANGTEEN.BLOGSPOT.COM
Que lindo, adorei esse tutorial. Vou colocar no meu proximo layout ♥
ResponderExcluirSeguindo | lilarozen.blogspot.com.br
O efeito fica mt lindoo. Gostei bastante!
ResponderExcluirSeguindo, segue de volta? Beijos
www.Be--Different.blogspot.com
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 ♥
ResponderExcluirKiss ~ Teen's House | Clica no perfil ♥
Nossa, que tutorial perfeito!!! *U*
ResponderExcluirEu 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!! ^^
Ai que legal! Vou testar lá no blog! Adorei.
ResponderExcluirQuer 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.
Oi Bárbara, eu tenho uma tag pra você lá no meu blog. Apropósito... Ótimo tutorial. Muito bom. Eu vou tentar...
ResponderExcluirBeijos, Pâm.
Menina Delicada
ótimo tutorial!
ResponderExcluiradorei seu blog, é lindo e tem um ótimo conteúdo :)
beijos da isa
link: Cute Time//Official
Ameei .. Vou usar no novo layer q estou fazeendo !
ResponderExcluirE deixarei os merecidos créditos (claro dhã)
http://blogueirarebelde.blogspot.com.br/
Muito Perfeito to usando bjs
ResponderExcluirFaz um atualizado, porque o blogger não tem mais o ]]> !
ResponderExcluirDá pra fazer a versão atualizada?
Tem sim, é porque você tem que clicar na primeira setinha preta pra aparecer os códigos que ficavam antes dele :)
ExcluirNão funcionou o trecho de colocar o "background" ='C
ResponderExcluireu heim.. às vezes é o link da imagem ou você tirou alguma letra um dos parênteses do código quando foi colar ele... Estranho º-º
ExcluirSuper útil, vou usar ele no meu proximo lay
ResponderExcluirCaramba, 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
ResponderExcluirObrigado demais moça, agradeço grandemente ♥
Obrigada! Fico feliz por ter ajudado!
Excluir