16/11/2014

Como Colocar Rodapé Personalizado no Blog

Boa tarde fofuchos! hoje vou ensinar como colocar o rodapé personalizado aqui no blog Áurea Feminina. Para começar eu não sabia que tinha como colocar, mas estava visitando o blog Um pouco de mim e vi que tem uma imagem no rodapé, então pesquisei e achei vários blogs que ensinam, mas o que mais me ajudou foi o Blog da Nah que tem um rodapé bem bonito, e o blog Garotas Cupcakes ensina como tirar o Attribuition que já tem no blog para que o rodapé fique melhor visto. Bom vamos começar né?!

Vá em modelo editar HTML dê Ctrl+F e na caixa que aparecer cole o código abaixo:

 
]]></b:skin>

Cole ANTES dele o código abaixo:



#rodape-creditos {
    font:normal bold 13px Arial;   /* - Fonte do rodapé - */
    color:#000000;   /* - 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 #000000;  /* - 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 - */
    }
-----------------------

Para colocar imagem no rodapé basta substituir a linha em azul do código por está:
    background: url(URL DA IMAGEM);


E colocar a URL da imagem entre parênteses.

Agora procure por:

   
</body>

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

Não apague o que está escrito em amarelo para não sofrer punições futuras pelo Google.

Faça as alterações que quiser como colocar o nome do blog e o seu nome, você também pode colocar uma logo do seu blog fica muito legal. Há se quiser que a escrita fique no centro é só substituir 
left' por 'center' e se quiser tudo em uma única linha como no meu, é só tirar todos os <br/>do código, coloquei em vermelho para facilitar na hora de alterar.

Bejus >.<

4 comentários:

  1. Ai que legal ! Voce pode me responder uma coisa Tem que colocar uma largura certa??
    http://docebunny.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Não! >.< mas se vc quiser pode por a largura da sua imagem.

      Excluir
    2. Ok obrigada! beijos, vou continuar acompanhando! Vou tentar o tuto valeu amiga.

      Excluir
    3. Espero que fique perfeito no seu blog! >.<

      Excluir