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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-ad8_6JTaXXIz4pZIOHo3Df8cRadFQTDDdrbzFItvGuTu9vb1kLHH_Crvwksqa1OruDOJBo51uglEXVA9BQgf97tzx2kVf5zAkfq2vv82kBT-DOfvFNcRq1gN02-qsNL3N4qKHmzjdet/s1600/twitter.png' title='Twitter'/></a>

                <a href='#3' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKuvwyeq7Dqi6bLwLKe0c8DYKutn99M12wmA_tzrqJ-rFoFOL6K05nM2DwqaIMhXz6M3wc-jWdJWHvZEmxwChhZOrGz0gAm1WJsyApCbdUDo_vJupdG0NN-Fw8Jar_0Fv_b04OhKQXt8vO/s1600/facebook.png' title='Facebook'/></a>

                <a href='#4' target='_blank'><img alt='Google +' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKj5xBuhCNmEC9fI2C0C8zExFGjeAmC1XIFF3alZqM2udG37GBGIUvZBAZjJZmVuhlEOn0vy0cftlCrsQvFstYIoZHxMxyj7IiGLW0wdSXUHGZa46tDVJ6kgkD7wutGuRe1psB_UCz7Jex/s1600/googleplus.png' title='Google +'/></a>

                <a href='#5' target='_blank'><img alt='YouTube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOw8ptFUjTPP5AUebtzohpfWLZWcy9JynSoO7FX3jz1zMqYnQAlO6bQn8s4e_plCfdDxrTHFGJDOaaJslZSBS6SYn6HinaLouB1YkEwKC6xVDQSunKn2KMEBjjLr1KiPnt8bZtYERhRiS/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