Widget - Redes sociais estilo Metro Windows 8

  Dúvidas SEM, o Windows 8 FOI UM dos Sistemas Operacionais MAIS esperados dos Últimos tempos, TALVEZ POR tamanha Qualidade e aceitação dos Usuários de Seu antecessor, o Windows 7 A Microsoft inovou e conseguiu agradar UMA grande Parte de SEUS Usuários. E a Maior das Inovações E o ESTILO COM OS botoes metro quadrados de SUA Tela inicial.

O Widget que IREI compartilhar Hoje, FOI CRIADO Pelo blogueiro Bishal Biswas e TEM ESSE Estilo com quadrados de algumas das principais Redes Sociais do Momento. Sendo ASSIM, Vamos AO Código.

1 ° Passo:  Acesse o  Painel do Blogger , escolha o blogue de que voce deseja Instalar, selecione a Opção "Layout" e clique los 'adicionar hum Gadget ".

2 ° Passo:  Agora copie o Código abaixo SEM Widget Seu:

<Style>

.seconds {

text-align: right;

color: # 000;

font-size: 10px;

}

.supportive um: {posição ativa: relative; top: 1px}

 .widget-item-Controlar a {display: none;}

    .widget-item-Controlar a {display: none;}

    #supportive {width: 300px;

    float: left; margin-top: 10px;}

    li #supportive {position: relative; cursor: pointer; padding: 0 suma importância;}

    #supportive .facebook, .googleplus, .rss, .twitter {

    position: relative;

    -moz-Transição: all 0.4s ease-in-out;

    webkit-transition: all 0.4s ease-in-out;

    -o-Transição: all 0.4s ease-in-out;

    Transição: all 0.4s ease-in-out;

    z-index: 5;

    display: block;

    float: left;

    margin: 1px;}

    .Icon #supportive {}

    #supportive .facebook {width: 147px;

    height: 150px;

    background: rgba (59,89,152,1) no-repeat center;}

    #supportive .twitter {width: 148px;

    height: 74px;

    background: rgba (59,89,152,1) url ("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBBIjjOgz4IBX7IM-rt_BkExmQeQ6ykDo2bJMJY-m_-HeZQTiiUo5S4GslTKqZpdC-oVtQgb_uuxzAmPVqjvzE3vBzCcFXp-Mgl81TYeYWWRqIwW3FuP4VYJBBRLpRh8yG-aRPKLsGJxE/s1600/Twitter.png") no-repeat center;}

    #supportive .googleplus {width: 148px;

    height: 74px;

    background: rgba (59,89,152,1) no-repeat center;}

    #supportive .rss {width: 299px;

    height: 74px;

    background: rgba (59,89,152,1) url ("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPyaARUZVoJcYBoizvN4bzaJIh4X0ZE_ok9RxOB5IF94raHOJjxQIg0TXWYXuvdpE6GG4BvsiJbTnDES64zYibSbRf_kHF8is7jgU-26f6KQ5LkwOPLg5wnvJazOfyUa6VUi7kEBb6xmiV/s1600/rss.png") no-repeat center;}

    li #supportive: hover {color background-.facebook: # 3468B6; -moz-Transição: all 0.1s ease-in-out;

webkit-transform: rotate (-10deg);

     -moz-transform: rotate (-10deg);

       -o-transform: rotate (-10deg);

      -ms-transform: rotate (-10deg);

          transform: rotate (-10deg);

    webkit-transition: all out facilidade em-0.1s;}

    li #supportive: hover {background: .twitter centro rgba (64,153,255,1) no-repeat; -moz-Transição: all 0.1s ease-in-out;

    webkit-transition: all out facilidade em-0.1s;}

    li #supportive: hover {background .googleplus: rgba (228,69,36,1) Centro de no-repeat; -moz-Transição: all 0.1s ease-in-out;

    webkit-transition: all out facilidade em-0.1s;}

    li #supportive: hover {background: rgba .rss (255,102,0,1) Centro de no-repeat; -moz-Transição: all 0.1s ease-in-out;

    webkit-transition: all out facilidade em-0.1s;}

</ Style>

<Ul id = 'Apoio'>

<Li> <a class='icon facebook' href='https://www.facebook.com/pages/Mundo-In4mal/152646818114428'/> </a> </ li>

<Li> <a class='icon twitter' href='http://twitter.com/Mundo_Informal'/> </a> </ li>

<Li> <a class='icon googleplus' href='https://plus.google.com/100562857635513562536/'/> </a> </ li>

<Li> <a class='icon rss' href='http://feeds.feedburner.com/in4mal'/> </a> </ li>

<div class = "segundos">

Compartilhando-widget.html"> <a href="http://www.mundoinformal.com/2013/02/add-metro-estilo-sociais Instale o Seu </a>

</ Div>

</ Ul>

4 ° Passo: Agora o Como o Faça seguintes alterações no Código com o ENDEREÇO ​​de SUAS Redes Sociais: 
(Use o Comando  Ctrl + F  Paragrafo facilitar ESSA Tarefa)

Para Alterar o ENDEREÇO ​​that PERFIL SEM  Facebook , Altere: 
https://www.facebook.com/pages/Mundo-In4mal/152646818114428

Para Alterar o ENDEREÇO ​​that PERFIL SEM  Twitter , Altere:
http://twitter.com/Mundo_Informal

Para Alterar o ENDEREÇO ​​that PERFIL None  Google Plus , Altere:
https://plus.google.com/100562857635513562536

Para Alterar o ENDEREÇO ​​that PERFIL Localidade: Não  Feedburner , Altere:
http://feeds.feedburner.com/in4mal