27 março 2013

Rodapé do blog personalizado


Dias atrás eu fiz uma perguntinha na fanpage do blog sobre o que vocês gostariam de ver por aqui. Então aqui estou eu para atender o pedido do Luiz Antico , que é como fazer o rodapé de créditos igual ao que eu uso aqui no blog.
Vamos aprender então?

No HTML do seu blog procure por:
: ]]></b:skin>

Cole ANTES dele o código abaixo:
#rodape-creditos {
font:normal bold 13px Arial;   /* - Fonte do rodapé - */
color:#FFFFFF;   /* - Cor da fonte - */
background:#303030;   /* - Cor de Fundo do Rodapé - */
border-top:4px solid #3F4C6B;     /* - 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:#A8B5C4;   /* - 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:#A8B5C4;    /* - 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 - */
}
Agora procure por:
 </body>

ANTES dele cole:

<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: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>
Agora vamos personalizar mais um pouquinho. Como vocês devem ter percebido, eu destaquei algumas partes nos códigos. 
A seleção em azul corresponde ao fundo do rodapé, que pode ser uma cor ou uma imagem, como eu uso aqui no blog. Para usar uma imagem substitua a linha selecionada por:
background: url(URL DA IMAGEM);
A seleção em amarelo é muito importante e não deve ser retirada. Isso evitará futuras punições do Google à você e ao seu blog.

O restante você pode personalizar a seu gosto. Boa sorte pra vocês.

Créditos: Categoria Blogger

17 comentários:

  1. Muito bom ! :)

    ResponderExcluir
  2. Adorei o tutorial, Nah! Parabéns.
    Você poderia me dizer o nome da fonte usada na primeira foto? Tô atrás dela há muito tempooooo ahahahah
    Beijo e obrigada! :)

    ResponderExcluir
  3. awnn tava atrás desse tuto quando tava mudando meu lay e não achei e agora eu acho kkkk qualquer dia eu uso ele, fica muito bonitinho o resultado.
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Usa sim Dayane, vai ficar lindo no seu blog.

      Bjus

      Excluir
  4. Respostas
    1. De nada Luiz, quando precisar é só pedir.

      Excluir
  5. Olá Nah! Adoro os seus tutoriais. Mas estou com um probleminha com esse, no meu o texto não fica na mesma linha e a logo não aparece. O que eu faço?
    Beijos e aguardo respostas.

    mirandapamela32@gmail.com

    ResponderExcluir
  6. Também estou com o mesmo problema que a Pâmela :(

    ResponderExcluir
  7. Ah, já consegui arrumar ^^ Mas se quisermos colocar uma imagem, como no seu, que largura você recomenda? Já que varia de monitor pra monitor as dimensões, sei lá :x Obrigada!

    ResponderExcluir
  8. Nao tenho onde pesquisar o : ]]> o que eu faço?
    obg

    ResponderExcluir
    Respostas
    1. Digite cotrl+F
      Vai aparecer uma janelinha de busca, basta inserir o que procura. Tente sem os dois pontos ":"

      Excluir
  9. Todos os layouts que fiz tem esse tutorial nele, adorei demais *-*

    ~ Menina Linda

    ResponderExcluir
  10. No meu disse um erro que é assim:: div should not appear inside of head ='' div não deve aparecer dentro da cabeça''

    ResponderExcluir
  11. eu não intendi mais ajente procura onde??

    ResponderExcluir
  12. eu queria deixar os nomes em uma só uma linha como no seu rodápe, como faz?

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo