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:
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:
<!-- outside of the include in order to lock Attribution widget -->Para facilitar procure somente pela primeira linha do código, mas apague todo o código que mostrei.
<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
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.
Muuuito obg*-*
ResponderExcluirvoou 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/
Ahh, maiis no meu blog o cód. taah diferente!! poiis eu tinha tirado o Tecnologia do Blogger pelo design antes! ii agora :X
ResponderExcluirhttp://fluorescentadolecent.blogspot.com/
Amei seu blog flor,já estou seguindo,se poder segue de volta?
ResponderExcluirwww.estilosa-sempre.blogspot.com
Eu fiz! Já estava a algum tempo querendo aprender, mas não sabia o nome disso e nem onde procurar! Ficou lindo, obrigado ^^
ResponderExcluirBjjos
blogloucamistura.blogspot.com
Oi, flor! Tudo bem? Que demais, foi bom saber! Obrigada.
ResponderExcluirAmei seu cantinho. Seguindo aqui!
* Me ajuda alcançar uma meta? Segue de volta? Te espero lá.
Beijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com
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!
ResponderExcluirhttp://palomaviricio.blogspot.com
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 =*
ResponderExcluirbjiinhos,
kah santos :)
http://fluorescentadolecent.blogspot.com/
Adorei o tutorial,vou coloca-lo em prática assim que eu ajeitar meu html (:
ResponderExcluirSEMPRE ARRASANDO NOS TUTORIAIS!!
http://viverserfeliz-renata.blogspot.com/
Muito lindo seu blog
ResponderExcluire os tutoriais bem uteis
http://t-w-o-teens.blogspot.com/
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.
ResponderExcluirBeijos; @Raah_Castroo
www.vidaadegarotaa-vdg.blogspot.com
muito bom o tutorial
ResponderExcluirtrendluxo.com.br
Hhaha, muito bom o tutorial, me ajudou muito mesmo, amei seu blog! É muito bom mesmo em!
ResponderExcluirVisita meu blog?
http://newsdayoff.tk/
Que lindo seu blog, OMG!
ResponderExcluirParabéns, beijos.
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á.
ResponderExcluirBjoo
TDiaryofteens.blogspot.com
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 ?
ResponderExcluirbjiinhos,
depooisi passa lá ------>
http://fluorescentadolecent.blogspot.com/
Ótimo tutorial ! *-*
ResponderExcluirConhecendo seu blog... é lindo viu ! Parabéns ;)
rsrs
http://happymomentts.blogspot.com/
HAAAAAAAAA, amei o tutorial, muito bom mesmo em! ... Lindo seu blog...
ResponderExcluirhttp://newsdayoff.tk/
Você fez um bom tutorial com meu código. Adoro seu jeitinho de postar, acho bom de ler. rs.
ResponderExcluirBjos