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.


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
Gadget das Redes Sociais em Estilo Metro UI - Versão 1 Gadget das Redes Sociais em Estilo Metro UI - Versão 1 Reviewed by Aurea on 12/08/2013 Rating: 5

12 comentários:

  1. Aurea,gostei.
    Meu computador é Windows 8,estou apanhando com ele desde maio o meu antigo queimou o HD,perdi 90/% dos meus arquivos.
    Parabéns pela postagem,beijos

    ResponderExcluir
  2. Olá Graça,
    Acredito que agora fica mais fácil utilizar o seu windows 8 depois de entender o porque da estrutura dele ser da forma que é!
    Quando a gente entende, aceita mais fácil aí fica bem melhor!
    Bjks

    ResponderExcluir
  3. Bom dia, há anos iniciava um blog e abandonava. Agora estou conseguindo administrar e criar um com a minha cara. E fico muito grata por suas publicações que muito me ajudam, principalmente por eu ser leiga muita coisa ainda nem fazia idéia. Lógico que ainda tenho muito que aprender, mas é sempre bom saber que temos um lugarzinho pra procurar o socorro!!!
    Mônica Reis – http://topdapromocao.blogspot.com.br

    ResponderExcluir
  4. Adorei.. Tem o HTML da imagem do instagram?

    ResponderExcluir
  5. Aurea adorei a dica! Mais tem como alterar alguma pelo o icone do Instagram?

    ResponderExcluir
    Respostas
    1. Olá Davy,
      Já comecei um post com esta opção, mas, como sempre, ainda não consegui terminar. Prometo publicá-lo logo!
      Seja sempre bem vindo ao TPV!

      Excluir
  6. como eu faço pra abrir em nova guia e não na mesma?

    ResponderExcluir
    Respostas
    1. Olá Nami,
      Respondi sua dúvida no próprio post e corrigi para abrir em nova aba os links.
      Obrigada por sua dúvida e seja sempre bem vindo no TPV.

      Excluir
  7. Olá gostaria de saber como coloco um gadget de para membros com login e senha no http://coalisaoapostolicaunida.blogspot.com.br/ .
    e além disso aonde no cod html eu consigo reduzir o tamanho do gadget pois ficou grande demais para a página que criei.

    A graça e a paz do Senhor Jesus Cristo.

    ResponderExcluir
  8. Muito bom. parabéns. como faço para mudar. tirar um icone e colocar outro. tipo instagram

    ResponderExcluir
    Respostas
    1. Para qual ícone você gostaria de mudar?
      Tem como sim. Basta alterar a imagem do ícone em branco com as mesmas dimensões da anterior e alterar a url.

      Excluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.