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.

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.

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.

Como colocar um Gadget das Redes Sociais no Estilo Metro

→ 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/AVvXsEjdQqsv7WpGS6MJe4K2HObInJ1IESUtAkaE3hGDWzHkyDdRxreGlzOIaajh83JWjUVBUzY7jqZHwUTu-QU1lz3xvmKbcp6iWjC4ukZRkqXYj_fCoqmf1iNUBSy-Iz2-QWyaHFB8AaLX-_8/s1600/Facebook1.png) no-repeat center center #1f69b3;width:140px;height:141px}
.MBD2B-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgEoTc0OXV78rRhvVdtlaLH209H-TvuKRdS6DVOjLJ8hTYuhoA10RCvEnG5IkJcNOCYHGZBXPIizZ7zPNO77npHMHqyVoA6XI91uv42rsEOV_ov5oqiUTo0Iu5JDXrbg3YXgBL7yD8kQs/s1600/twitter1.png) no-repeat center center #43b3e5;width:140px;height:70px}
.MBD2B-social .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJg5Md1d_C-miQuqgpbzb75_ea8d1d1zusZAxXAruOTa8oHgMc_DTOdAJos0eGKLatqZKg8WkkMPca5iDXJxwAz0lKc4Z19_D5Je8yPbHpeGyIYX5Xr-LmBP0-pjOJ-fXt43LpOtc-qQw/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/AVvXsEhZrh3yhQ_qHa6gZ5znGJWdXyyotjb_lemw3NSX42_PIFYqnXG4vIIHh1sN_-B7-JZDh6JpTV7YBBbUfylsvqAI0Ui5vz40pLlMXQ-CEmeNmSjFVjdiDqGFHQEImAaH5a0uGAOAPKBQGFE/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/AVvXsEj7Z8wfdaX1V7wkJR6u6r-oSWErMj4zmhwhrACTf-fkW2S4SeLhGoeFZFZRC_UBBL-EKR1M5d-yZ-dl-WZzhViUK-UYKVdWUPpTqLDnbyLSWspiNGVIvZ5F0tkBQ-1CAnqF3rX2u3h5Axg/s1600/Facebook2.png) no-repeat center center #1f69b3}
.MBD2B-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJlyNrfKypTJEcprlGxflWDYeklij78GvW0b9MsctmVmQVgDTfSC9ErrG9G9b-1vte-J7VupnFxa0ZoRZMlNwHdGV6M7Grt8PileDSWvMKR1OUGicIeUvDZ5UZgApkQfHbs2n4TtqtcA/s1600/twitter2.png) no-repeat center center #43b3e5}
.MBD2B-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJmi6uAIPkNaAp9cRga4K15_Ha8uw6LdhdW0zCn2c7MptEfWaYdPh5eldjviaqzRRMetdpG1-1Wt4NElDLw4Rir2-BinwKFOWZMdIWKlEf-ddd3qXnAxLwafNutGXC5zYab1aiXmlejsM/s1600/g+2.png) no-repeat center center #da4a38}
.MBD2B-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kIsBMJXj78MlwHZFp9_sqAmdYKlVQJl0HshISaPeo_kC4Qhgwr504dkgib0apdCGLpC-6UIk9wGQRsWL2sCne5JhUpl485bnc9wwheAwQmCyVzyefU-RVtmthYsnoVEh3iPr6RC3hFk/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


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ó