13 de dez. de 2011

Footer personalizada

Ontem uma seguidora pediu que eu ensinasse esse tutorial para vocês, então vim fazer esse post hoje. Lembrando que aprendi a fazer isso no blog Tudo pra Mim - Maratona de Tutoriais, então os créditos são todos para eles.
     Para os que não sabe, a footer que é o quê eu vou ensinar a personalizar é essa faixa que tem lá no final do blog com o nome de quem criou o layout e tal, igual tem aqui no blog:

     Para colocar isso você deve primeiro tirar o gadget Attribution do seu blog, aquele que tem escrito Tecnologia do Blogger. Para fazer isso vá em Modelo no seu painel do blogger (na antiga interface chamado de Design) e clique em editar html, depois que carregar aperte F3 e procure pelo seguinte código:
<!-- outside of the include in order to lock Attribution widget -->
<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
     Para facilitar procure somente pela primeira linha do código, mas apague todo o código que mostrei.
     Agora que você já retirou a Attribution, podemos colocar a footer. No mesmo lugar de editar html onde você está, procure por ]]></b:skin> e cole o seguinte código acima dele:

#footer-wrapper {
background: #000; /*** cor do fundo ***/
background-repeat: no-repeat;
z-index: 1000;
height: 20px;
clear: both;
font-size: 90%; /*** tamanho da fonte ***/
color: #fff; /*** cor da fonte ***/
text-align: center; /*** alinhamento da fonte ***/
padding: 5px;
}
     Tudo que você pode mudar está indicado no código. Para mudar as cores do fundo e da fonte, escolha uma cor nessa tabela de cores.
     Depois que fizer isso procure por </body> e cole o seguinte código:
<div id='footer-wrapper'>Designer por SEU NOME | Tecnologia do <a href="http://blogger.com">Blogger</a> | Todos os direitos reservados ©</div>
     Isso é uma sugestão do que deve estar escrito na sua footer, lembrando que deve trocar onde está SEU NOME pelo seu nome (claro), mas se você preferir escreve outra coisa coloque esse código:
<div id='footer-wrapper'>SEU TEXTO AQUI</div>
     No lugar onde estiver SEU TEXTO AQUI você deve escrever o quê quer que esteja na sua footer.
     Pois é, o tutorial é simples, mas se tiver alguma dúvida é só perguntar.

18 comentários:

  1. Muuuito obg*-*
    voou colocar isso no meu blog, acho legal!!
    eii lá no blog, tem a minha primeira inspiração e me diz oq achoou?
    bjoos,
    depoiisi passa lá ♥ ----->
    http://fluorescentadolecent.blogspot.com/

    ResponderExcluir
  2. Ahh, maiis no meu blog o cód. taah diferente!! poiis eu tinha tirado o Tecnologia do Blogger pelo design antes! ii agora :X
    http://fluorescentadolecent.blogspot.com/

    ResponderExcluir
  3. Amei seu blog flor,já estou seguindo,se poder segue de volta?
    www.estilosa-sempre.blogspot.com

    ResponderExcluir
  4. Eu fiz! Já estava a algum tempo querendo aprender, mas não sabia o nome disso e nem onde procurar! Ficou lindo, obrigado ^^
    Bjjos
    blogloucamistura.blogspot.com

    ResponderExcluir
  5. Oi, flor! Tudo bem? Que demais, foi bom saber! Obrigada.
    Amei seu cantinho. Seguindo aqui!

    * Me ajuda alcançar uma meta? Segue de volta? Te espero lá.

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  6. Adorei o tuto!Muitoo fofo mesmo o seu blog! Estou seguindo...se puder me segue tbm! Sempre vou passar por aqui! Participa da promo do Livro O Preço de uma lição no meu blog!Bjus!
    http://palomaviricio.blogspot.com

    ResponderExcluir
  7. Oioii!! tudoo bem afiliada! viim fazer a visitaa do dia.. não posso deixar de fazer e esqueçer os conteúdos néeh? gostei do post de hj =*
    bjiinhos,
    kah santos :)
    http://fluorescentadolecent.blogspot.com/

    ResponderExcluir
  8. Adorei o tutorial,vou coloca-lo em prática assim que eu ajeitar meu html (:
    SEMPRE ARRASANDO NOS TUTORIAIS!!

    http://viverserfeliz-renata.blogspot.com/

    ResponderExcluir
  9. Muito lindo seu blog
    e os tutoriais bem uteis
    http://t-w-o-teens.blogspot.com/

    ResponderExcluir
  10. Oi, flor! Tudo bom? Obrigada, pela visita lá no meu cantinho. Fiquei muito feliz em te ver por lá. Obrigada por retribuir, se precisar de algo é só falar.

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  11. Hhaha, muito bom o tutorial, me ajudou muito mesmo, amei seu blog! É muito bom mesmo em!

    Visita meu blog?

    http://newsdayoff.tk/

    ResponderExcluir
  12. Que lindo seu blog, OMG!
    Parabéns, beijos.

    ResponderExcluir
  13. curti pra caramba, mas o layout q coloquei tá com isso já rs rafa reabri o blog amore, os coments e td mais irão voltar ao normal. Te aguardo lá.
    Bjoo
    TDiaryofteens.blogspot.com

    ResponderExcluir
  14. oi afiliada. vim aquee te fazer a visitinha do dia e cara, seem brincadeira quase toodos os dias venho aquii pra ver se teem alguma novidade ou algum post legal... e como sempre acabo elogiando poois eu acho massa as suas postagens sem brincadeira ta ?
    bjiinhos,
    depooisi passa lá ------>
    http://fluorescentadolecent.blogspot.com/

    ResponderExcluir
  15. Ótimo tutorial ! *-*
    Conhecendo seu blog... é lindo viu ! Parabéns ;)
    rsrs

    http://happymomentts.blogspot.com/

    ResponderExcluir
  16. HAAAAAAAAA, amei o tutorial, muito bom mesmo em! ... Lindo seu blog...

    http://newsdayoff.tk/

    ResponderExcluir
  17. Você fez um bom tutorial com meu código. Adoro seu jeitinho de postar, acho bom de ler. rs.
    Bjos

    ResponderExcluir

- Para evitar que seu comentário venha a ser excluído, leia a política de comentários do blog.
- Antes de fazer uma pergunta dê uma olhada na página de FAQ para ver se sua pergunta já não foi respondida lá.

Obrigada por comentar. Saber que minhas postagens são valorizadas por outras pessoas é o que me faz continuar com o blog