Gadgets de redes sociais "estilo metro" para Blog


Hoje eu vou ensinar como colocar um gadget de redes sociais estilo Metro no seu blog ou site. Ele é muito simples de instalar e personalizar e o melhor não precisa ser colocado no HTML do seu templete. 
O estilo deles é a imagem ao lado ←
Gostou? Então siga-me...




TUTORIAL

1º - Acesse o seu blog. Vá em "Layout" e clique em adicionar "Adicionar um Gadget".

2º - Selecione "HTML/Javascript",  cole o código:

Código do Gadget


Personalizando

• Onde está escrito "LINK_DO_XXX", será onde você colocará o endereço correspondente de cada um.
Exemplo:
<li><a class="fb" href="LINK_DO_FACEBOOK" target="_blank" rel="nofollow"></a></li>
será
<li><a class="fb" href="https://www.facebook.com/Quero.Dicas" target="_blank" rel="nofollow"></a></li>

• Eu deixei ao lado de cada código, para que seja mais fácil onde você poderá alterar a mudança de largura e cor.

Exemplos:
.fb{background:url(http://4.bp.blogspot.com/-0A1QMUBu-Pw/UvADehN8mdI/AAAAAAAANX0/_xzNMdnGtNE/s1600/fb%601.png) no-repeat center center #1f69b3;width:138px;height:142px} /* largura do FaceBook */

Atenção!
Este código está para a largura de sidebar com 270 px. Caso a sua sidebar seja mais larga ou menor é só alterá-la onde eu deixei escrito ao lado.

Vá alterando até ficar corretamente na lateral do seu blog.
Caso tenha alguma dúvida, deixe seu comentário! =D

Beijinhos

Os créditos são do blog prodeveloper
Apenas fiz algumas alterações =D
COMPARTILHE :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.