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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-m0BRBzB7Ua-_OJOoXQtRwIZffT9YYI_xXaSPmGXd9ejcTuJ-3zl67G8qXHlaH_VYgJZ-r8wG18jRdVwZsgyITREoSDL0tJXXSd-khhdbbLEOakXepUmK03BOiDmT8_jjdjkV2rIdu-Q/h120/facebook.png") no-repeat center center;} #supportive .twitter{width: 148px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-BBV_ksRA_efVgEwtJ-_ZaB8_SzxDJyyV14g63y1qPOQ49x1kSzbmq2DXEN9OvhWCheq9q2B1Ba8GZ6Y7B9SKOnVoeqevIsfY5IfKwciAkiWD4yFMnaMr6BdfgE9sbIRQ_KwTiYF9jk0/s1600/Twitter.png") no-repeat center center;} #supportive .googleplus{width: 148px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq2MmcM5m64hEGmnFGQX6q_ZV4VJAV9biCWBdlGUVhn5cg1a-7Yl7pcQnfg5N4rqGSYcAgtRif8Ck232tFOOOWTZxgMKzBerJxlcExvdtH_wvLmT8oNOe6_3QyNJrdL2UEHnYKMm34hDTP/s1600/google+plus.png") no-repeat center center;} #supportive .rss{ width: 299px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqLJwAHxXsTxB9qrpZT6hOCR2BYEWIjYJzpYS7XwqM75LXjNYpHsmJCyfbWuUD_XzSLO0Y2R1aOKhPk2BADO5ykhRkA3DkjF3tYZH1x35fCyyuzpG_jc8hJ8s9g2Yz8hgo4vSDAjpZghX/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Kj_tL08WJYU4W8ALDq5cuvZmA7Ni5Gys72RQ_nvU3VtU141aaK-0JC5S09HHJub7uN0V9nFeVPxm6r3e7E-GjK3Ur4upzEMZFIOj-wpg4XPc0xxNMYf6tSzwMCaW5AIjLywP9rkB3eU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0tYLsvPKfNyxQmNANjYnJk4eSYYi55WTpV6PH_I_exf4IBdv22MYr6EH46KzEBLUUSOhlnnu8V4uqZaQ6TfzsYJU9KvlazdjEXNVGvlNS_znHpxUNe8J_iHKfyAa-g7yWDm0wYPMsk8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4MJyuqM2m8uWJvqA1jDOnOeO8mlSooaxLLzu684dMhn4RlH-brVCmPXIZ0EgXRB-UpDtmIMXAvea6xKlhlIPrtDB1jIykkX7Z3hyvKhdyPicRw3MpYAIhlQlgWzkiCxVt2cLVL1R7MAI/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 :