Gadget das Redes Sociais em Estilo Metro UI - Versão 1

Vocês já viram na web vários sites com ícones grandes de estilo limpo(clean), cores vivas, parecidos com o visual do windows 8.0.

Esta é uma tendência da Web2.0: O Estilo Metro

Esta tendência começou com o Windows e tem tomado conta dos estilos dos sites na web.
Encontrei 2 definições deste estilo que podem resumir o que é o Estilo Metro (ou em inglês Metro Web Design).

O que é o Estilo Metro?

Desde que a Microsoft lançou o projeto Metro UI no Windows Phone 7, o web design metro tem sido bem utilizado para todos os produtos da Microsoft e aplicações Windows. Muitos desenvolvedores da web estão seguindo o design estilo Metro e Metro UI por sua simplicidade e elegância que ele traz visando o conteúdo do web site.

Fonte: http://www.magazinehive.com/2013/09/metro-web-design-inspiration/

Metro é um estilo de design e linguagem desenvolvida pela Microsoft. Produtos como o Zune, Windows Phone, Xbox e Windows 8 seguem o estilo de design Metro. O principal objetivo deste estilo de design é para remover qualquer decoração extra e permitir que os usuários interajam diretamente com o conteúdo. É tudo sobre o conteúdo e a beleza da simplicidade.

Fonte: http://www.blinkux.com/metro/

As características básicas do Estilo Metro são:

• O conteúdo como foco principal (Visão global);
• Rapidez e Fluidez;
• Mais atenção à tipografia;
• Texto é a principal forma de navegação;
• Cores brilhantes e vivas.
• Uso de cubos coloridos e peças quadradas como elementos de navegação;
• Grandes títulos de página;
• Faça mais com Menos (Minimalista).

Neste artigo vou ensinar como colocar um Gadget com os links das principais Redes Sociais do momento no estilo Metro. Ou seja, limpo, bonito e fácil.

Demonstração Click aqui

Como colocar um Gadget das Redes Sociais no Estilo Metro

Para ajudar fiz este Vídeo tutorial que ensina como adicionar um Gadget tipo HTML/Javascript no seu blog.


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

<div class="MBD2B-social">
<li><a class="fb" href="URL_Facebook" target="_blank"></a></li>
<li><a class="tw" href="URL_Twitter" target="_blank"></a></li>
<li><a class="gp" href="URL_Google+" target="_blank"></a></li>
<li><a class="fd" href="URL_Feedberner" target="_blank"></a></li>
</div>
<style>
.MBD2B-social{width:285px}
.MBD2B-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.MBD2B-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.MBD2B-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSa3C0ZqtnK6A4-4j_3tRlWDc0wUho02eoMJRu-SmwAOFffdm5YBqq789OETzBWy39ZusCzUxUDI8CgPlq-7TyvlMbnPy4WXveWQRZukhJEKP1Jrv7Y1t7bamzQCtH730Np3TAVr760ZY/s1600/Facebook1.png) no-repeat center center #1f69b3;width:140px;height:141px}
.MBD2B-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQINVZKLrKoNoQOQVzRhVRBVYcP_nubEez6ugg_tAxbT74HhyIsWxSrf-qYMat6KpRjcBl809kXAc57WaNkoSpdtmVswA_EymmT5u8nCxxgFBB5NffVqKI1tA5En171mBGasScsAzEJw/s1600/twitter1.png) no-repeat center center #43b3e5;width:140px;height:70px}
.MBD2B-social .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyuSOchSLHcXox242WZ8Mjod9c4OI85_FPxSw9gSiJJIjqPaZmLqAliyLRMCYUA8P1vdKJ3wQpJAjG8F7IFPaDIB3Lvqrp9tL2HTOjEmAIyHKgc_-Sru1xlZdwhLs2NCcNjWsqzauSBz8/s1600/g+1.png) no-repeat center center #da4a38;width:140px;height:69px}
.MBD2B-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CtSIpe1Inw6Jq95Us_GymSviVntNEwGoNzcbznysU0krx9O5ypCbhr7OI5rZRdtgGq0xhWi6PxRLGk_O8CI_bX-FBRD69e_bYyAtdOOBItMucK9eNPp0MfAXhrsLNfNm9n2t09iJnDw/s1600/Feed1.png) no-repeat center center #e9a01c;width:282px;height:69px}
.MBD2B-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp-cnrzaqqmrndwoklnhgpOxOXjxpqsBvqqSDDRszXb_nCMlDOL-FUNjNVBZvRxli2pAEnRf_kleM1UQDH-PZteSppjOP3HusXgdNRKyM0FLDdSOIVbw3xTqEaRA59yoK4jE5WObucmiU/s1600/Facebook2.png) no-repeat center center #1f69b3}
.MBD2B-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9MFV-wGRUatSOy2WcSz6vDV6mxqY4feCqB2FobKsuCugF0dPuoJP7Fu6PD9RBuNcsE6SaVMs-bNXZ-fCfbH8EPcgj15CXvqBdh8Au1tTptQAVafNXEe91h5lksQLjtV1XpMKC303q7Q/s1600/twitter2.png) no-repeat center center #43b3e5}
.MBD2B-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88cafneTGpf1iiALu1y0U3kTOv-VtK9p0LIYIFQOCLXfXcEco6k2NgKdnqgpumLhX_0ZZGqF2wkh2muVTv-N1RwARVXK4G5y3Ep8SH-cUbJQmUVaf2woUCFblgEfa4ikqKNitBnBDhlA/s1600/g+2.png) no-repeat center center #da4a38}
.MBD2B-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXROwRtHaaRzV7yO_niM4chmWC-tBqcO2191qmYvJjUe9GX0E0a6k37woH2fA5kcLdNckoSExBDFT2mLYA7WDbCVlxdhATiD6fmS4CYry0h8sVlaNv6MZgm-Mt7lFJTjBBYxLyYPiaRU/s1600/Feed2.png) no-repeat center center #e9a01c}
</style>

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_Feedberner » Coloque o link do seu Feed

O que? Ainda não ativou os Feeds para o seu blog?
Então 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.

Você já conhece a Versão 2 deste Gadget?

Então clique nesta imagem da versão 2 e coloque em seu blog.

Observação Importante:

Nos links dos botões das redes sociais eu acrescentei o  target="_blank" que indica que a página irá abrir em outra aba. Caso queira que as páginas das redes sociais abram sobre o seu blog é só tirar.
Agradeço ao leitor Nami por comentar esta dúvida quando fiz a alteração no código.

Fontes:
Tradução e adaptação do post:
http://fbgadgets.blogspot.com.br/2013/08/sharing-post-widget.html 
Para saber mais Sobre Estilo Metro:
http://designwebkit.com/web-and-trends/metro-style-website-templates-secret-side-latest-design-trend/
http://code52.org/metro.css/
http://metro-webdesign.info/
http://en.wikipedia.org/wiki/Metro_(design_language)
http://www.101webdesigns.com/2013/03/metro-style-designs/
http://designm.ag/inspiration/34-flat-layouts-design-inspiration/
http://www.magazinehive.com/2013/09/metro-web-design-inspiration/
http://win81dicas.blogspot.com.br/2013/07/criando-icones-estilo-metro.html