Tutorial | Rodapé Personalizado
Já mostrei para vocês alguns dos tutoriais que usei aqui no blog(veja aqui),mas sei que é sempre melhor mostrar passo a passo do que só deixar o link,já que às vezes a gente se perde ou não entende o que vai aonde e não consegue fazer o tutorial.
Hoje,eu vou ensinar como fazer o rodapé igual aqui do blog,eu peguei o tutorial da Sugoi Tutoriais,mas modifiquei algumas coisas para ficar mais fácil de fazer e usar,então vamos lá.
Vá em Modelo>Editar HTML
Quando entrar,você vai ver a tag <head> ACIMA dela cole
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
Essa é a fonte que vamos usar no tutorial,mas você também pode usar a Open Sans Condense,que é assim
É só colar isso no lugar da fonte anterior
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css' />
Depois disso aperte nos três pontinhos entre os skin e aperte Ctrl F
Procure por </b:skin> e acima disso cole o código abaixo,fazendo a modificações necessárias.
#rodape {
background: #7B68EE;
height: 120px;
padding-top: 10px;
text-align: center;
font-size: 20px;
font-family: 'Pacifico';
letter-spacing: 1px;
}
#rodape a {
text-align:left;
text-decoration: none;
color: #F0FFFF;
padding: 1px;
margin: 10px;
-webkit-transition-duration: 0.8s;
}
#rodape a:hover {
color: #F0FFFF;
background: #7B68EE;
padding: 1px;
-webkit-transition-duration: 1.0s;
}
Em background você muda a cor de fundo,em height você muda a altura do rodapé,em font-family você muda a fonte.
Em color você muda a cor da fonte.
Em a:hover é quando você clica em alguma parte do rodapé.
Se precisar use ESSA TABELA DE CORES
Para que o rodapé funcione você precisa colocá-lo no blog,entãoANTES de </body> cole isso
Em color você muda a cor da fonte.
Em a:hover é quando você clica em alguma parte do rodapé.
Se precisar use ESSA TABELA DE CORES
Para que o rodapé funcione você precisa colocá-lo no blog,entãoANTES de </body> cole isso
<div id='rodape'>
<div style='margin-left:230px;'>
<img ALIGN='left' height='120px' src='seu-logo-aqui'/>
</div>
<b> Tecnologia do </b>
<a href='http://www.blogger.com/'>Blogger</a>
<br/>
Edição e Design: <a href='http://SEULINK.COM'>Seu nome</a>| Todos os direitos reservados| © 2016
</div>
Em ALING='left' você vai decidir de que lado vai ficar seu logotipo,se não quiser colocar um é só apagar a parte <img ALIGN='left' height='120px' src='seu-logo-aqui'/>
Edite apenas a parte indicada.
E depois SALVE
Se você não havia editado seu rodapé ainda é quase certo que ainda tem o Tecnologia do Blogger no seu rodapé,como esse
Para retirá-lo é muito simples,vá em Ir para um widget>Attribution 1(ou qualquer nome que comece com Attribution)
Quando você clicar será redirecionado à parte do rodapé do seu blog,na parte locked='true' e mude para locked='false' e SALVE
Agora vá em Layout>Footer Atribuição>Editar>Clique em Excluir.
E pronto,seu novo rodapé já está instalado no blog :D
Apesar de parecer ter vários passos,esse tutorial é bem simples e funciona em qualquer blog.Espero que tenham gostado e testem.
Beijos
Em ALING='left' você vai decidir de que lado vai ficar seu logotipo,se não quiser colocar um é só apagar a parte <img ALIGN='left' height='120px' src='seu-logo-aqui'/>
Edite apenas a parte indicada.
E depois SALVE
Se você não havia editado seu rodapé ainda é quase certo que ainda tem o Tecnologia do Blogger no seu rodapé,como esse
E pronto,seu novo rodapé já está instalado no blog :D
Apesar de parecer ter vários passos,esse tutorial é bem simples e funciona em qualquer blog.Espero que tenham gostado e testem.
Beijos
4 comentários
Já disse né que amo esses seus posts?!
ResponderExcluirEssa dica mesmo eu não sabia, mas vou tentar fazer aqui no meu rs.
Beijo
Obrigada Cami ♥
ExcluirAprendi esse quando estava pesquisando para mudar o layout :)
Testa sim,vai ficar lindo♥
Beijos ^.^
Adorei essa dica, não sabia como funcionava.
ResponderExcluirParabéns pelo blog, já estou seguindo para poder acompanhar as novidades <3
www.papomoleca.com.br
E é super fácil né?! Obrigada ♥
ExcluirVou visitar o seu viu :D
Beijos ^.^
Obrigada por ter lido a postagem
Conte-me o que achou *--*
Deixe seu link nos comentários para que eu possa retribuir a visita <3
Se preferir para deixar seu link use
Esse código para comentar