Aurea

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



.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(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png<\/span>) no-repeat center center #1f69b3;width:140px;height:141px}
.MBD2B-social .tw{background:url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png<\/span>) no-repeat center center #43b3e5;width:140px;height:70px}
.MBD2B-social .gp{background:url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g 1.png<\/span>) no-repeat center center #da4a38;width:140px;height:69px}
.MBD2B-social .fd{background:url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png<\/span>) no-repeat center center #e9a01c;width:282px;height:69px}
.MBD2B-social li:hover .fb{background:url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png<\/span>) no-repeat center center #1f69b3}
.MBD2B-social li:hover .tw{background:url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png<\/span>) no-repeat center center #43b3e5}
.MBD2B-social li:hover .gp{background:url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g 2.png<\/span>) no-repeat center center #da4a38}
.MBD2B-social li:hover .fd{background:url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png<\/span>) no-repeat center center #e9a01c}


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:






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
©2014 Templates para Você Aproveite que você assina o nosso Feed e nos acompanhe no Facebook e no G ;)
  • Love
  • Save
    Add a blog to Bloglovin’
    Enter the full blog address (e.g. https://www.fashionsquad.com)
    We're working on your request. This will take just a minute...