- Gerar link
- Outros aplicativos
- Gerar link
- Outros aplicativos
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;'>© <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
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
Comentários
Este comentário foi removido pelo autor.
ResponderExcluirOláá!
ExcluirAwn 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
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)
ResponderExcluirE falando sério, amiga, vc tem futuro como web designer (。’▽’。)♡
http://shyandbrave.blogspot.com.br/
KKK, fico feliz que tenha gostado ♥
ExcluirVerdade, 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
oi gostei muito do seu blog , aonde posso encontrar mais temas ex: confeitaria, bolos
ResponderExcluirFico feliz que goste! Obrigadaa!
ExcluirNão entendi, temas de receitas ou sobre a parte de design?
Qualquer coisa eu posso criar as artes para vc! Só entrar em contato aqui: https://www.facebook.com/jucianeddesigner