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:

Kayla Cristina disse...

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/

Kayla Cristina disse...

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/

Kaslley disse...

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

Louca Mistura disse...

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

Vida de Garota disse...

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

Paloma Viricio disse...

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

Kayla Cristina disse...

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/

Plum disse...

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

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

Viviane dos Santos disse...

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

Vida de Garota disse...

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

Any Brasil disse...

muito bom o tutorial
trendluxo.com.br

Newsdayoff disse...

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

Visita meu blog?

http://newsdayoff.tk/

Tainã Almeida disse...

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

Marcinha disse...

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

Kayla Cristina disse...

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/

Unknown disse...

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

http://happymomentts.blogspot.com/

Newsdayoff disse...

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

http://newsdayoff.tk/

Emily disse...

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

Postar um comentário

- 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