06/04/2015

Tutorial: Rodapé Personalizado



Oi galera, tudo bom?
Hoje eu trago uma coisa um tanto diferente rsrs. Quero dizer, não é diferente, mas é a primeira vez que eu trago um tutorial.
Se você quer saber como fazer um rodapé personalizado é só clicar em leia mais!




Cliquem na imagem para ver em tamanho melhor.

Eu sei, é estranho eu trazer tutorial para o blog, mas eu realmente estou no tédio então decidi trazer este tuto para vocês rsrs.

O blog que vocês veem na imagem logo no início do post Doces Sonhos é um blog que eu fiz pois estava totalmente sem nada para fazer, e a partir de agora, é tipo um blog preview, vou tirar print de partes do layout, e explicar sobre a parte.

Vamos logo ao tuto? Vaamooos!

Para começar, vá em ModeloEditar HTML → Dê Ctrl+F para abrir a caixa de pesquisa e procure por]]></b:skin>.


Assim que você achar o código, ANTES dele cole:

#rodape-creditos {
font:normal bold 13px Arial;   /* - Fonte do rodapé - */
color:#FFFFFF;   /* - Cor da fonte - */
background:#b8c9e6;   /* - Cor de Fundo do Rodapé - */
border-top:4px solid #b8c9e6;     /* - 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:#f062a0;   /* - Cor dos Links do Rodapé - */
text-decoration:italic;  /* - Decorações do Link - */
outline:0px solid #FFFFFF;  /* - Não é necessário editar - */
}
#rodape-creditos a:visited {
color:#ffffff;    /* - Cor dos Links Visitados - */
text-decoration:italic;   /* - Decoração dos Links Visitados - */
outline:0px solid #FFFFFF;   /* - Não é necessário editar - */
}
#rodape-creditos a:hover {
color:#ffc4ef;   /* - 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 editar - */
}


O código já está explicado. Mas, se você quiser colocar uma imagem ao invés de cor ao fundo do rodapé é só substituir a linha que está na cor vermelha por:

background: url(URL DA IMAGEM);


Veja se está tudo certo e salve.

Agora procure por: </body> e antes do código achado cole:




<table border='0' cellpadding='5' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%;text-align:left;'>&#169; <a href='LINK DO BLOG'>NOME DO BLOG</a> - 2012. Todos os direitos reservados.<br/>Criado por: <a href='URL DO AUTOR DO BLOG' rel='nofollow' target='_blank'>NOME DO AUTOR DO BLOG</a>.<br/>Tecnologia do <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>
<td style='width:28%;text-align:center;'><a href='LINK DO BLOG'><img alt='imagem-logo' border='0' id='logo-footer' oncontextmenu='return false' ondragstart='return false' src='LINK DA LOGO DO BLOG'/></a><br/></td>


</tr>

</table>
</div>



<div id='rodape-creditos'>


Este código também está editado, mas por via das dúvidas vou explicar duas coisas. Primeira coisa: NÃO RETIRE A LINHA VERMELHA, se retirar, receberá punições do Google. Segunda coisa: se você não quiser colocar a logo do blog por motivos óbvios, como não ter é só você tirar o que esta em azul.


Verifique se esta tudo certo e salve. Quando você visualizar, vai ver que acima do cabeçalho personalizado ainda vai ter Tecnologia do Blogger e para tira-lo já que no próprio rodapé esta linha já é existente você vai procurar por: <b:widget id='Attribution1' locked='true' title='' type='Attribution'>. Substitua 'true' por 'false', salve, vá em Layout e exclua o gadget 'Atribuição' que fica lá em baixo.


Proontinho galerinha!

Espero que tenham gostado do tuto ^.^  comentem ^.^
Agora vou indo, beijão.






Nenhum comentário:

Postar um comentário