Tutorial-Rodapé personalizado

Hey galerinha,hoje vim ensinar vocês como fazer um rodapé personalizado como o que tem aqui na página,espero que gostem e seja fácil para vocês,acompanhem comigo.


Peguei o tutorial do Blog da Nah,mas a personalização do que está escrito,ano e cores foi feito por mim.
O resultado é esse:



Antes de mais nada,você precisa aprender a tirar os créditos próprios do Blogger,então vou fazer um passo a passo bem fácil e depois mostro o tutorial.
Vá em Modelo>Editar HTML
E clique em Ir para um widget>Attribution

Depois de achar procure por locked=true e mude para false,salve.
Agora vá em Layout>Procure pelo último gadget do seu blog com o nome Attribution>Clique em Editar>Excluir e Salve.


Agora você vai ver que o seu rodapé original desapareceu,então vamos fazer o nosso próprio.
Para começar abra o seu blog,vá em Modelo>Editar HTML
Clique dentro da caixinha de códigos e aperte Ctrl+F e procure por <b:skin> ,depois de encontrar,clique nos três pontinhos para expandir.
Aí procure por ]]></b:skin>
E antes dele cole o código a seguir

#rodape-creditos {
font:normal bold 13px Arial;   /* - Fonte do rodapé - */
color:#FFFFFF;   /* - Cor da fonte - */
background:#1E90FF;   /* - Cor de Fundo do Rodapé - */
border-top:4px solid #D8BFD8;     /* - Edite a borda - */ Retire essa linha se não quiser borda
margin:0px 0px 0px;     /* - Não é necessário editar - */
}
#rodape-creditos a:link {
color:#000000;   /* - 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:#FF69B4;    /* - 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 - */
}
 Tudo que está em negrito você pode alterar,são as cores principais do seu rodapé,se não quiser editar nada ficará da mesma cor que o meu,tudo igualzinho,se preferir use as cores que mais combinam com o seu layout.
Aqui está uma tabela de cores que você pode usar



Depois disso procure por </body> e acima dele cole o código a seguir

<div id='rodape-creditos'>
<table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%;text-align:center;'>&#169; <a href='http://www.littlewonderscrm.blogspot.com.br/'>Little Wonders</a> - 2015. Todos os direitos reservados.Criado por: <a href='https://plus.google.com/113951990581784984439/posts' rel='nofollow' target='_blank'>Jennyfer Aguillar</a>.Tecnologia do <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>
  </tr>
</table>
</div>
 Você deve alterar tudo que estiver em negrito,mas algumas considerações importantes:
-O primeiro negrito "center" é para indicar onde vai ficar a parte escrita do seu rodapé,no caso ficaria no centro,mas se você preferir pode mudar.

-Os links em negrito você altera o primeiro para o link do seu blog e o segundo para o link de alguma rede social sua.
-Os dois nomes em negrito vão ser alterados para o nome do seu blog e o seu nome respectivamente.
-Não mude nada do que está em vermelho,essa é a parte exclusiva do blogger.
Salve e está pronto.


Espero que tenham conseguido,qualquer dúvida estou a disposição.
Beijos doces ^.^


****Para ver mais tutoriais feitos no blog clique aqui****

CONFIRA TAMBÉM ⬇

0 comentários

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