Little Wonders: rodapé personalizado

Tutorial | Rodapé Personalizado

blogs 10:00

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

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

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

</div>

<b> Tecnologia do </b>

<a href='http://www.blogger.com/'>Blogger</a>

<br/>

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