Como colocar fundo no Rodapé do Blog e Jardim ❀

dezembro 11, 2016


Konnichiwa fadinhas & elfos! Como estão? Eu estou bem. Hoje vim mostrar uma maneira de personalizar o seu rodapé, deixando bem harmônico e delicado. Gosta de flores? O que acha de ter um jardim no final do seu blog? Bem legal né? Então let's go!



Todo rodapé fica no final do blog ou site. Onde muitas vezes tem ''todos os direitos reservados'' o autor do blog e o nome, em alguns casos, tendo mais informações que o autor pode colocar. Acho muito legal quando essa parte é de outra cor ou tem alguma personalização.
No meu layout passado eu usava um rodapé com fundo de flores em aguarela, quem lembra? haha

Então meus queridos, hoje vou ensinar como faze-lo e disponibilizar alguns que fiz para vocês! Espero que gostem Imagem relacionada Vamos lá! 


Como colocar fundo no rodapé do blog (novo método)


Primeiro vamos colocar as informações que precisam permanecer no rodapé antes da modificação.
Vá em Modelo + Editar HTML + Ctrl F e procure por:

  </body> 

E ANTES dele cole:

 <div id='rodape-creditos'><table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%; padding-top: 380px; text-align:left;'>&#169; <a href='LINK DO BLOG/'>NOME DO BLOG</a> - 2017. Todos os direitos reservados. .<br/> Criado por: <a href='LINK DO SEU PERFIL' rel='nofollow' target='_blank'>SEU NOME</a>. .<br/> Tecnologia do <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>
<td style='width:28%;text-align:center; padding-top: 210px'><a href='LINK DO BLOG'><img alt='imagem-logo' border='0' id='logo-footer' oncontextmenu='return false' ondragstart='return false' src='ÍCONE DO BLOG'/></a><br/></td></tr></table></div>


Faça as alterações necessárias, colocando autor, nome, link do blog e etc. 
Agora vamos colocar o fundo! Procure por:

]]></b:skin>

E ACIMA dele cole esse código:

/* Footer
----------------------------------------------- */

#rodape-creditos {
font:normal bold 13px Arial;   /* - Fonte do rodapé - */
color:#A8B5C4;   /* - Cor da fonte - */
background: url(URL DA IMAGEM); /*imagem do fundo */
background-repeat: repeat;
z-index: 1000;
height: 430px; /*altura da imagem*/

#rodape-creditos a:link {
color:#a8c3c4;   /* - Cor dos Links do Rodapé - */
text-decoration:none;  /* - Decorações do Link - */
outline:0px solid #FFFFFF;  /* - Não é necessário editar - */
}
#rodape-creditos a:visited {
color:#A8B5C4;    /* - Cor dos Links Visitados - */
text-decoration:none;   /* - Decoração dos Links Visitados - */
outline:0px solid #FFFFFF;   /* - Não é necessário edittar - */
}
#rodape-creditos a:hover {
color:#A8B5C4;   /* - Cor do Link com o Mouse em cima - */
text-decoration:underline;    /* - Decoração do Link com o mouse em cima - */
outline:0px solid #FFFFFF;    /* - Não é necessário edittar - */
}

O que está de Rosa é para alterar a altura, mas se utilizar os jardins que disponibilizei no final do post em PNG, não é preciso. O que está em Roxo é a URL da imagem , 
OBS: Foquei no jardim mas pode ser qualquer fundo que quiser ok? Só colar o endereço da imagem.

URL de Jardins para Rodapé


Jardim Realista
 (http://imgur.com/Phpgy01.png)
Jardim Vintage
 (http://imgur.com/RgPkIiW.png
Jardim Pequeno e Fofo
(http://imgur.com/emZAdgf.png
Jardim Pequeno Colorido
(http://imgur.com/E5mXFAe.png)
Jardim Realista Azul
(http://imgur.com/5BNOzai.png)
Jardim Artístico
(http://imgur.com/xFbQqOE.png)
Jardim Romântico
 (http://imgur.com/Kyx90bc.png)

Visualize e pronto!
Caso tenha dado algo errado, como ter ficado muito espaço encima e seu rodapé transparente ainda esteja lá. Procure por: footer-inner { e apague ou substitue o que tiver abaixo dele por: margin: -100px; } . Esse numero é o espaço entre o conteúdo do blog e o rodapé.

Então gostaram do post?! Qualquer duvida só perguntar nos comentários. 
Por hoje é só! ~ Kissus 
Follow my blog with Bloglovin

Leia também:

4 comentários

  1. Olá!
    Eu adoro o seu blog, sério, gosto de entrar aqui, é tudo tão fofinhu (~*-*)~
    Eu nunca vi essa de colocar flores (ou qualquer outra coisa) no rodape do blog, e achei super massa *u* Principalmente pq eu gosto de fotos e desenhos de flores (sei lá pq ><)
    Bjs

    Skull Minds |Twitter |Tumblr | Snap: maisaindia

    ResponderExcluir
    Respostas
    1. Oláá!
      Awn fico muito feliz em saber que você gosta daqui! Obrigada mesmo por acompanhar <3 saber disso até me anima mais a postar *-*
      Que bom que conheceu por aqui ^.^ Da pra personalizar nao só com flores mas outros fundos que quiser também, só colocar a url da imagem. Serio que gosta? Deve ser pq é meigo né? xD Também adoro, tudo que tem galaxia e flores hehe ^.^

      Obrigada pela visita! Kissus

      Excluir
  2. Estou pensando seriamente em usar um desses jardins (. ♥ ‿ ♥). (tenho que me controlar para meu blog não virar um carnaval de enfeites kkkk, mas afinal, o carnaval vai cair no mesmo dia do meu aniver, 28 de fevereiro xDD então vale)
    E falando sério, amiga, vc tem futuro como web designer (。’▽’。)♡

    http://shyandbrave.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. KKK, fico feliz que tenha gostado ♥
      Verdade, pode acabar ficando muita coisa, mas pode fazer um temporário de primavera e usar entoon *-*
      Fico muito feliz em ler isso! Comecei Web Designer agora a pouco no curso, sempre melhorar o/ heh

      Obriga pela visita! ~Kissus

      Excluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers