12 janeiro 2014

Footer/Rodapé do blog personalizado

| |
Oi gente *-* Desculpa não ter retribuído os comentários da postagem retrasada, eu tava meio ocupada preparando esse tutorial. Uma leitora havia pedido na última postagem, mas eu já estava planejando postar aqui pra variar mais, já que eu tenho postado só menus.

Não é complicado, mas precisa de paciência e tempo pra fazer, pois tem que ficar constantemente mudando números e visualizando...

Pra quem não sabe o que é footer, aqui tem um exemplo.



Você precisa excluir o footer que já tem no blog. Pra isso, siga esse tutorial.
A imagem não pode ser muito grande, se não o blog vai diminuir. A minha é de 1200x300
••• ♥ •••

1 • Depois de excluir o rodapé, vá em 'Layout' > 'Adicionar um Gadget' (print) > 'HTML/JavaScript' e cole:
<div style="position: absolute; margin-top: -30px; margin-left: -900px;">
<img border="0" src="URL_DA_IMAGEM" />
</div>
A imagem não ficará inteira, então cole o número necessário pra ficar certinho. Na segunda vez é só mudar os números, mas cuidado porque pra visualizar você tem que salvar e se não prestar atenção desconfigura e dá a maior dor de cabeça ¬.¬

2 • Agora pra criar caixinhas onde ficaram outros gadgets (seguidores, barra de pesquisa, menu, etc), salve o gadget e vá em 'Modelo' > 'Editar HTML' > aperte F3 e procure por ]]>< • Acima da tag, cole:

.box {
background: white; /* Fundo */
width: 210px; /* Tamanho da altura e largura */
border: 1px solid #eee; /* Borda */
padding: 9px; /* Espaço */
font: 8px arma five; /* Tamanho e fonte */
}
Visualize pra ver se nada saiu do lugar e depois salve.

3 • Vá no gadget que você criou anteriormente e cole:

<div style="position: absolute; margin-top: 6px; margin-left: -500px;">
<div class="box">
código
</div>
</div>
Mude o margin-top e margin-left para mudar a posição do objeto...

4 • Para adicionar outra caixinha, siga o passo 2, porém ao lado de box coloque qualquer número ou letra e mude o tamanho se quiser...

Aí siga o 3 e cole o código e ao lado de box coloque o mesmo número que colocou no html... Faça isso o quanto você quiser...

••• ♥ •••
Por algum motivo, sinto que não expliquei direito. Então, qualquer dúvida pergunta na ask.

9 comentários:

  1. Ele fica muito lindo, ótimo tutorial :3

    Visite o blog :3 | Etc For Me :3

    ResponderExcluir
  2. Que tuto maravilhoso <3 Testei no meu blog de test ficou showww <3 beijos

    http://vanity-candy.blogspot.com.br/

    ResponderExcluir
  3. Acho que fica tão lindo colocar um footer no blog >w< Adorei o tuto, ficou bem explicadinho sim!
    Beijos
    Purple Star

    ResponderExcluir
  4. Eu sempre achei o footer daqui divoso, que bom que fez o tutorial :3 Beijos

    wehearthtml.blogspot.com

    ResponderExcluir
  5. Sempre gostei do seu footer. Amei o tuto <3

    ha-unting.blogspot.com

    ResponderExcluir
  6. Uaww! Que rodapé diwo! >< Vou usar no próximo layout do blog! ^^

    Beijinhos!

    http://simplekawaii.blogspot.com.br/

    ResponderExcluir
  7. Lindo este modelo de rodapé ^^

    www.unconditionallydesigns.blogspot.com

    ResponderExcluir
  8. Eu nao consigui colocar, Tem como me ajudar
    Blog: http://elareveloubeleza.blogspot.com.br/

    ResponderExcluir
  9. adorei o eu blog e me ajudou muito !!!
    http://garotavenenomak.blogspot.com.br/

    ResponderExcluir

« »