Gadgets de redes sociais "estilo metro" para Blog e sites | Quero Dicas | Tutoriais para seu blogs


Gadgets de redes sociais "estilo metro" para Blog e sites


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" e cole o código abaixo da imagem,


Código do Gadget
 
<div class='metro-social'>
<li><a class="fb" href="LINK_DO_FACEBOOK" target="_blank" rel="nofollow"></a></li>
<li><a class="tw" href="LINK_DO_TWITTER" target="_blank" rel="nofollow"></a></li>
<li><a class="gp" href="LINK_DO_GOOGLE" target="_blank" rel="nofollow"></a></li>
<li><a class="yt" href="LINK_DO_YOURYOUTUBE" target="_blank" rel="nofollow"></a></li>
<li><a class="it" href="LINK_DO_INSTAGRAM" target="_blank" rel="nofollow"></a></li>
<li><a class="fd" href="LINK_DO_RSS" target="_blank" rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:270px} /* largura da sidebar */
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}

.metro-social .fb,.tw,.gp,.it,.yt,.fd{z-index:6;float:left;margin:1.3px;position:relative;display:block}

.metro-social .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 */

.metro-social .tw{background:url(http://3.bp.blogspot.com/-EvcnRY3Pskc/UvAEIYOjtCI/AAAAAAAANX8/r0JREVKU01A/s1600/tw1.png) no-repeat center center #43b3e5;width:69px;height:70px} /* largura do Twitter */

.metro-social .gp{width:69px;height:70px;background:url(http://3.bp.blogspot.com/-go5PVIk0jH4/UvAEVzsRU_I/AAAAAAAANYE/E31yyYUjepQ/s1600/g+1.png) no-repeat center center #da4a38} /* largura do Google Plus */

.metro-social .yt{background:url(http://3.bp.blogspot.com/-KBVp5hxYiPk/UvAE80VicuI/AAAAAAAANYc/TRb8ZbcXoVA/s1600/YT1.png) no-repeat center center #e64a41;width:138px;height:70px} /* largura do You Tube */

.metro-social .it{background:url(http://4.bp.blogspot.com/-o8uLjcKTJaY/VBu27c20j9I/AAAAAAAAGwY/P9khQR7ZrDU/s1600/instagram101.png) no-repeat center center #4169E1;width:70px;height:69px} /* largura do instagran */

.metro-social .fd{background:url(http://4.bp.blogspot.com/-aS2ZxT861N0/UvAFHo9Nw9I/AAAAAAAANYk/mIVTg9K96DM/s1600/feed1.png) no-repeat center center #e9a01c;width:210px;height:69px} /* largura do RSS */

.metro-social li:hover .fb{background:url(http://3.bp.blogspot.com/-kFGbmHoDcDo/UvAF_QUMQuI/AAAAAAAANYw/GlTC6yIaH0M/s1600/fb2.png) no-repeat center center #1f69b3; }

.metro-social li:hover .tw{background:url(http://2.bp.blogspot.com/-Bm-vdbgf404/UvAGNVipFcI/AAAAAAAANY4/9E8R_FajJx0/s1600/tw2.png) no-repeat center center #43b3e5}

.metro-social li:hover .gp{background:url(http://2.bp.blogspot.com/-1M5XBUgIvwk/UvAGY7T1Z0I/AAAAAAAANZA/SsMbyHHj11s/s1600/g+2.png) no-repeat center center #da4a38}</style>

 

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

Espero que tenham gostado e ajudado. Beijinhos

Os créditos são do blog prodeveloper. Apenas fiz algumas alterações =D Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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