Como colocar fundo no Rodapé do Blog e Jardim ❀

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  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