Widget - Redes sociais estilo Metro Windows 8

Sem dúvidas, 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 é o estilo metro com os botões 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 blog que você deseja instalar, selecione a opção "Layout" e clique em "Adicionar um Gadget".

2°passo: Agora copie o código abaixo no seu widget:


<style>.seconds{ text-align:right; color:#000; font-size:10px; } .supportive a:active{position:relative;top:1px} .widget-item-control a{display:none;} .widget-item-control a{display:none;} #supportive{width: 300px; float: left;margin-top: 10px;} #supportive li{position:relative; cursor:pointer; padding: 0 !important;} #supportive .facebook, .googleplus, .rss, .twitter{ position: relative; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 5; display: block; float: left; margin: 1px;} #supportive .icon{} #supportive .facebook{width: 147px; height: 150px; background: rgba(59,89,152,1) url("https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png") no-repeat center center;} #supportive .twitter{width: 148px; height: 74px; background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;} #supportive .googleplus{width: 148px; height: 74px; background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;} #supportive .rss{ width: 299px; height: 74px; background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s1600/rss.png") no-repeat center center;} #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: 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 0.1s ease-in-out;} #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} </style><ul id='supportive'><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="seconds"><a href="http://www.mundoinformal.com/2013/02/add-metro-style-social-sharing-widget.html">Instale o seu</a></div></ul>

4° passo:  Agora faça as seguintes alterações no código com o endereço de suas redes sociais: 
(Use o comando Ctrl + F para facilitar essa tarefa)

Para alterar o endereço do perfil no Facebook, altere: 
https://www.facebook.com/pages/Mundo-In4mal/152646818114428

Para alterar o endereço do perfil no Twitter, altere:
http://twitter.com/Mundo_Informal

Para alterar o endereço do perfil no Google Plus, altere:
https://plus.google.com/100562857635513562536

Para alterar o endereço do perfil no Feedburner, altere:
http://feeds.feedburner.com/in4mal

Espero que tenham gostado! Comentem e digam o que acharam!

Share This :