Tutorial-Rodapé personalizado
13:00Hey 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 {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.
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 - */
}
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'>Você deve alterar tudo que estiver em negrito,mas algumas considerações importantes:
<table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%;text-align:center;'>© <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>
-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****
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