1 de novembro de 2013

17

Rodapé do Blog Personalizado com créditos, contador de visitas e redes sociais




Olá caro leitor!

Vamos aí com mais uma nova dica de personalização, desta vez vou ensinar como criar o seu próprio roda-pé personalizado com créditos, botões de redes sociais (Facebook, Twitter, Google+, You Tube) e com um contador de usuários online. É bem fácil de colocá-lo no blog e não tem complicação, o legal é, que vai dar pra tirar aquela aparência neutra sem criatividade da parte inferior do seu blog deixando-a mais aparente e com cores exclusiva da sua preferência...

Veja uma demonstração do Rodapé personalizado no meu Blog de teste (DEMONSTRAÇÃO)

Bom galera! Essa dica é bastante útil para aqueles que utilizam Template padrão modelo simples do blogger, pois os mesmos não possuem Rodapé personalizado, e é por isso que vou ensinar a criar o seu próprio rodapé.

Como criar seu próprio rodapé personalizado 

Primeiramente acesse o Painel de edição do seu Blog.
Vá em Modelos >> Editar HTML.

2º Passo: Estando no HTML do seu Blog, clique nessa seguinte linha: "<b:skin>...</b:skin>" que fica logo no começo do código para poder expandi-la, veja o exemplo na imagem logo abaixo:
3º Passo: Depois de Expandir o código, clique em qualquer parte do código e logo em seguida pressione as teclas de atalho: (Ctrl+F) no seu teclado para pesquisar e encontrar essa seguinte Tag: 
]]></b:skin>
  • Após encontrar a Tag "]]></b:skin>", acima dela você vai acrescente (Colar) esse Código CSS:
/*----- Rodape do Blog-----*/

#credit{width: 960px;} /*--- Largura do rodapé ---*/
#credit{background-color: #1C1C1C; /*--- Cor de Fundo ---*/
border-top:1px solid #0E0E0E; color: #FFFFFF; /*--- cor da letra ---*/
overflow:hidden;margin:0 auto;clear:both;padding:10px 0;line-height:20px;}
#credit .left{float:left;text-align:left;margin-left:20px}
#credit .right{float:right;text-align:right;margin-right:20px;}
#credit a{color: #1E90FF;text-decoration:none;} /*--- Cor do Link ---*/
#credit a:hover{color: #fc0 ;text-decoration:none} /*--- Cor do segundo link ---*/

.social-profiles-widget img{margin:0px 4px 0 0}
.social-profiles-widget img:hover{opacity:0.8}
#top-social-profiles{margin-top:5px; height:32px;text-align:right}
#top-social-profiles img{margin:0 0 0 6px !important}
#top-social-profiles img:hover{opacity:0.8}
#top-social-profiles .widget-container{background:none;padding:10;border:0}


4º Passo: Já inserimos o código CSS, agora, vamos colocar o Script do rodapé, para isso você tem que localizar essa outra Tag: "</body>" e quando encontrá-la acrescente esse segundo código logo Acima da mesma:

<div class='clear'/>
      <div id='credit'>
               <div class='left'>         
          Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script>
          <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
            <data:blog.title/>
          </a> |
<script id="_wauofa">var _wau = _wau || []; _wau.push(["small", "pu4co6cgz64f", "ofa"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

<br/>
          Design by <a href='#1' target='_blank'>SEU NOME</a> | Tecnologia do <a href='http://blogger.com'>Blogger</a> 

        </div>
               <div class='right'>
          <div id='top-social-profiles'>
            <ul class='widget-container'>
              <div id='social-profiles-widget'>
                <a href='#2' target='_blank'><img alt='Twitter' src='http://3.bp.blogspot.com/-yP7ftAwMFaA/UepeDtMxrvI/AAAAAAAAEpE/YmnMeNDKyd8/s1600/twitter.png' title='Twitter'/></a>
                <a href='#3' target='_blank'><img alt='Facebook' src='http://4.bp.blogspot.com/-vDpBc3eIbjw/UepeC-q49KI/AAAAAAAAEos/pHyjZwQiFHw/s1600/facebook.png' title='Facebook'/></a>
                <a href='#4' target='_blank'><img alt='Google +' src='http://1.bp.blogspot.com/-QZgL0wk7tzQ/UepfotYsscI/AAAAAAAAEp0/0P7asx7vlOA/s1600/googleplus.png' title='Google +'/></a>
                <a href='#5' target='_blank'><img alt='YouTube' src='http://3.bp.blogspot.com/-dDqRZD4jYcE/UepeEiMFbZI/AAAAAAAAEpY/rSGtCSP88Jw/s1600/youtube.png' title='YouTube'/></a>
              </div>
            </ul>
          </div>
        </div>
      </div>
    
   

Prontinho pessoal, após inserir o segundo código o seu novo rodapé já estará presente no seu blog, só clicar em Visualizar Modelo e vê como ficou.

Observe:
O rodapé poderá não ficar de acordo com a Largura do seu Template, isso ocorre pois cada template tem uma Largura diferente de outros, então, será preciso você ajustar a largura do rodapé para ficar igual ao do seu template, para fazer isso basta seguir as instruções logo abaixo:

Editando o Rodapé do Blog

Bom! Você percebeu que eu deixei o primeiro código CSS e o segundo código Script destacado em cores diferentes, isso é para facilitar a explicação e sua compreensão, as partes destacadas é o necessário que você pode editar, e as demais não será preciso alterar, então vamos lá:

Vou começar com o primeiro código (CSS)
  • Para alterar a "Largura do Rodapé", basta alterar o seguinte valor destacado em cor Azul "960px;" para mais ou menos de 960px, que vai de acordo com o tamanho do seu template.
  • Para alterar a cor do "Fundo", basta alterar a parte destacada em cor de Rosa "#1C1C1C" por uma outra cor em código HTML.
  • Alterar a cor da "Letra", só trocar a parte que está destacado em cor Preto em Negrito "#FFFFFF" por uma outra cor em código HTML.
  • Mudar a cor do link, só trocar o código que está destacado em cor Roxa "#1E90FF", e para mudar a cor do segundo link, aquele que aparece quando passamos o cursor do mouse, basta trocar a parte que esta destacado em cor Verde "#fc0" por uma outra cor.
Alterando o segundo código (Script)
  • Como você vê, a parte que está destacada em cor Preto Negrito "SEU NOME" é para o você colocar o seu nome.
  • Essa parte do código "#1" é para você colocar uma URL, pode ser o endereço de uma página do seu blog que fala sobre você ou o endereço do seu perfil do Blog, mas se preferir pode deixar sem nem um endereço, basta alterar o valor "#1" para "#".
  • Nessa parte "#2" você vai colocar o endereço do seu perfil no Twitter.
  • #3: Coloque o endereço da sua Página no Facebook.
  • #4: Coloque o endereço do seu perfil do Google+.
  • #5: Coloque o endereço do seu Canal no You Tube, se não tiver altere esta parte para  "#".


Então é só isso pessoal, espero que gostem. Obrigado
_Deixem comentário.



Recomendo este poste:

Como excluir o Attribution do rodapé do Blog



17 comentários:

  1. Kelven, adorei a dica!! Mas se no lugar de colocar apenas uma cor de fundo eu quiser colocar uma imagem como eu posso fazer?????? Estarei acompanhando e aguardando sua resposta. Como sempre esse blog é perfeito!! Abração!!

    ResponderExcluir
    Respostas
    1. Olá Flávia Cristina!
      Peço desculpa em demorar a responder seu Comentário.
      Para "colocar uma imagem de fundo" é facil.
      1º Passo: No começo do código CSS do Rodapé, tem um trecho igual es este:
      #credit{background-color: #1C1C1C; /*--- Cor de Fundo ---*/

      Você vai "substituir" esse trecho por este aqui:
      #credit{background: url(" URL "); /*--- Cor de Fundo ---*/

      2º passo: agora substitua a "URL" pelo endereço da sua imagem.

      Observe: A imagem deve ter o mesmo tamanho e altura do background do rodapé...
      Obrigado!!!

      Excluir
  2. Olá, sou blogger, sou de Angola-Luanda (África) visito sempre o teu site quando tenho umas duvidas, a alguns dias que no meu blog está aparecer uma caixa de autenticação automática, procurei solução na google e pediram que eu procura-se pelo googlecode no meu HTML e que apagase esse infame, mais não encontro nada de googlecode e nenhum infame relacionado com essa caixa ai que apareceu do nada no meu blog, será que podes me ajudar? Agradeceria imenso se conseguisses me ajudar. Obrigado.

    ResponderExcluir
  3. Boa tarde brother !! Mais uma vez as suas dicas são nota 10 !! continua sempre assim !! Um abraço e até mais .....

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Fala ae brother..
    Po no meu modelo não tem o (...)
    Tem como me ajudar?
    Abraço!

    ResponderExcluir
  6. to tentando escrever isso aqui no post de cima (b:skin /b:skin>)
    Obs: escrevi o código assim pq o blog da bloqueando a postagem..

    ResponderExcluir
  7. Meu camarada, depois das devidas customizações, o rodapé ficou uma beleza!!

    Muito obrigado e valeu pela ótima dica!

    ResponderExcluir
  8. Este Blog é sensacional parabém pela as dicas e pelo este grande projeto

    ResponderExcluir
  9. Nossa brigado vey seu blog tem me ajudado muito valeu
    posta coisa bacana ai continue assim

    ResponderExcluir
  10. Por acaso, você tem o link para colocar a logo de Feed RSS no mesmo padrão que o ícone das outras mídias?

    ResponderExcluir
  11. outra og, como faço rpa colcoar um icone animando no "Favicon", já tentei de tudo, com imagens .gif de 16x26 animadas, mas não vai de jeito nenhum??...vlw

    ResponderExcluir
  12. como faço rpa colocar a palavra "contato" com e-mal embutido no próprio rodapé?
    obg!

    ResponderExcluir
  13. olá o neu rodapé ficou no canto não ficou centralizado, porem o tamanha esta certo 1000px;
    pode me ajudar?

    ResponderExcluir
  14. Kelven, preciso de um help, os links não estão direcionando direto pro site em questão, estão ficando assim: http://rainhadosdownloads.blogspot.com.br/www.facebook.com/......
    Você pode me ajudar?

    Obrigada.

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook