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

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 asteclas 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:

<data:blog.title/>

</a> |

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

</ul>

</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 "#".