Gadget das Redes Sociais em Estilo Metro - Versão 2
Autor: Aurea R C | Publicado: 2015-01-26T21:52:00-02:00

Já publiquei um post aqui explicando o que é o Estilo Metro e como colocar um Gadget das Redes Sociais em Estilo Metro&nbsp;como mostra a figura abaixo.




Porém eram apenas 3 redes sociais, o Facebook o G+ e o Twitter além&nbsp;do link de Feeds para o seu blog.

Atendendo a pedidos alterei este gadget acrescentando mais duas redes sociais o Pinterest e o Instagram e deu um resultado bem legal!






  
  Demonstração
  Click aqui


Como colocar um Gadget das Redes Sociais no Estilo Metro

O procedimento é o mesmo do post anterior com a diferença de ter mais dois links de redes sociais.
→ Vá em Layout» Escolha a Coluna que deseja colocar o Gadget » Clique em Adicionar um gadget » Escolha um gadget tipo HTML

►Cole o código abaixo no espaço reservado para isto:


&lt;div class="MBD2B-social"&gt;
&lt;li&gt;&lt;a class="fb2" href="URL_Facebook" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="tw2" href="URL_Twitter" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="gp2" href="URL_Google+" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="fd2" href="URL_Feedburner" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="in2" href="URL_Instagram" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="pi2" href="URL_Pinterest" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/div&gt;

&lt;style type='text/css'&gt;
.MBD2B-social {width: 285px}
 .MBD2B-social li { position: relative; cursor: pointer; padding: 0; list-style: none }
 .MBD2B-social .fb2,.tw2,.gp2,.fd2,.in2,.pi2 { z-index: 7; float: left; margin: 1px; position: relative; display: block }
 .MBD2B-social .fb2 { background: url(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g+1.png) no-repeat center center #da4a38; width: 140px; height: 133px }
 .MBD2B-social .fd2 { background: url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(http://1.bp.blogspot.com/-Px9UJWkw78U/VMZ2DQatmbI/AAAAAAAAAKc/aRBQVEofjkA/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(http://4.bp.blogspot.com/-rCIENnwBn8w/VMZ2DWDuwxI/AAAAAAAAAKY/PMP0M8K-Ge8/s1600/pinterest1.png) no-repeat center center #B93936; width: 282px; height: 70px }
 .MBD2B-social li:hover .fb2 {background: url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(http://3.bp.blogspot.com/--uW6lsaYNec/VMZ2DWfl3dI/AAAAAAAAAKU/NprNulN_rXM/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(http://2.bp.blogspot.com/-dGrSXW4khX4/VMZ2Dw05orI/AAAAAAAAAKk/6bui6BSulHA/s1600/pinterest2.png) no-repeat center center #B93936}
&lt;/style&gt;


Como configurar o seu Gadget
1- Configure as URLs das Redes Sociais
♦ Em URL_Facebook » Coloque o link da sua página do Facebook 
♦ Em URL_Twitter » Coloque o link do seu Twitter 
♦ Em URL_Google+ » Coloque o link da sua página no G+
♦ Em URL_Feedburner » Coloque o link dos Feeds do seu Blog
♦ Em URL_Instagram » Coloque o link do seu Instagram
♦ Em URL_Pinterest » Coloque o link do seu perfil no Pinterest


Obs: Se você ainda não ativou os Feeds para o seu blog » Leia este artigo: O que são feeds e entenda a importância de ter feeds para o seu blog.

2- Se você quiser hospedar as imagens do Gadget em seu blog para não correr o risco ultrapassar largura de banda elas estão neste link:
» Imagens para o Gadget de Redes Sociais Estilo Metro
Baixe-as - Hospede em seu blog e substitua os links em azul no código acima.