16.3.13

Footer do blog com imagem ou texto

Olá, leitores. Como vocês estão? Recebi bastante comentários no post passado, o que me deixou muito feliz, obrigada pelos comentários sobre o novo design! Ah, e de quatorze passamos para vinte e dois seguidores >u< Acho que essa evolução toda é um ótimo começo... Mas enfim, hoje o tutorial é sobre como personalizar o Footer do blog, ou seja, em alguns blogs quando descemos toda a página vemos uma imagem ou um texto com créditos em relação ao layout. E perguntaram como eu fiz. É muito fácil e super rápido, além de ficar super fofo quando personalizamos do nosso jeitinho! Deixei aqui os dois tutoriais, de como fazer com imagem e com texto. Vamos ver?

 Personalização com imagem:

01. Vá em seu html dê F3 e procure pela tag </body> após isso cole acima dela cole:
<div id='footer-wrapper'/>
02. Agora procure pela tag ]]></b:skin>  após isso, acima dela cole:
#footer-wrapper {
background: url('URL') ; /*** cor de fundo ou imagem ***/
z-index: 1000;
height: 12px;
clear: both;
font-size: 9px; /*** tamanho da fonte ***/
color: #000; /*** cor da fonte ***/
text-align: center;
}


✧ Personalização com texto:

01. Faça todo o tutorial normalmente e após pesquisar por </body> cole o código abaixo acima dele:
<div id='footer-wrapper'>Designer por WHO | Tecnologia do <a href="http://blogger.com">Blogger</a> | Todos os direitos reservados © 2013</div>
02 -  Agora pesquise por  ]]></b:skin> e cole acima dele o seguinte código do quote abaixo:
#footer-wrapper {
background: #COR ; /*** cor de fundo ***/
z-index: 1000;
height: 23px;
clear: both;
font-size: 10px; /*** tamanho da fonte ***/
color: #000; /*** cor da fonte ***/
text-shadow: 0px 1px 1px #SOMBRA; /*** Caso não queira a sombra apegue esta linha ***/
text-align: center;
}

15 comentários

  1. OBRIGADAAAAAA!!!!!!!!!!
    TE AMO <3
    ME AJUDOU DEMAIS!

    ResponderExcluir
    Respostas
    1. fala comigo pelo face ok?
      http://www.facebook.com/akirasayu

      Excluir
    2. Obrigada :333
      Falo sim, já adicionei *u*

      Excluir
  2. Adorei o tutorial *U*
    Owwn que blog lindo *3* Como não seguir?
    Esperando-te em minha pequena bagunça :3
    ~ Kissus
    -Adolescente Virtual-
    (clique no perfil)

    ResponderExcluir
  3. ótimo tutu ;)
    http://mr-kawaii.blogspot.com.br/

    ResponderExcluir
  4. Muito útil obrigada :)

    O blog já ta quase chegando a mil seguidores ce você poder colaborar eu não vou esquecer<3
    ->smileretro.blogspot.com Xoxo

    ResponderExcluir
  5. Obrigado por avisar sobre a afiliação eu já te coloquei \o/ eu pedi pra alguns amigos do facebook seguirem aqui ^^

    ResponderExcluir
    Respostas
    1. De nada *u*
      Ah, isso é muito importante para mim, obrigada mesmo ♥

      Excluir
  6. Eu sabia fazer do modo normal mas não com imagem e3e
    Adorei *---*
    Já favoritei vou usar no próximo lay :3

    http://wanted-dream.blogspot.com.br/

    ResponderExcluir
  7. Obrigada *--*
    Fica muito fofo no blog =3

    ResponderExcluir
  8. Muito legal esse tutorial, eu não sabia colocar com imagem.
    Agora eu sei graças ao The Moon Reverse *------------*

    ResponderExcluir

O blog não é mais atualizado com novas postagens. Mas fique à vontade para perguntar algo do seu interesse, seja relacionado às postagens ou dúvidas que lhe inquietam, estou algumas vezes entrando no blog e certamente verei se tiver comentários pendentes. Obrigada pela visita, leitor!