Redes Sociais Estilo Windows 8 para Blogger

DicasHot

Neste post venho compartilhar aqui com vocês outro código bem interessante. 

O widget foi criado pelo blogueiro Bishal Biswas e tem esse estilo com quadrados de algumas das principais redes sociais do momento. E, além do widget ser muito elegante, chama muito a atenção dos leitores. 

                                                      Seguir @DicashotBlogger

Vamos ao código.

1° Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Layout" e clique em "Adicionar um Gadget" do tipo HTML/JavaScript.

2° Agora copie o código abaixo

<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/AVvXsEiUQMF8UDWV-oFBXwo1DykxKv6Q1ut11vq9XfmE30OcOqyYIoAxeCKNv-lu8bNQe1QukSB-rmImy_CXmRhextDvxAci1DmN2t68VKMK6lOjeIT5fmvUc566zMM0nbIgNBE8h0TgXkKqij4/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/AVvXsEjH3353DRX8mBTAb3Q9DJ7ctXBiRn79kiNboRqZqXtopRd1TPTyJFTJjLnsn4r3Hz-vmH5NKQS14E7pXpmCypg-01ygG7pPE6LmZKzZzSLaj5jt6idG4H9Zb4A5GL37Bxks_PvCds2f9G5w/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/AVvXsEj0845YZz7Evib8QnHP_PC4FrjQnaSWw6bDiGjUyW1mQCVjN-aX9kNoLRObjPfa8QrnrV0d5lEGlnXzuDaweYNLLE2CAmmpGne5DejBYLWBBGrGHNL-xnatVfWlcXLfF_mTDfDcwWTFd53k/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/AVvXsEic3iiK7n4IweMzN-vTolarbjquIzYQgGrgoQbmtTgvzj1ozTY0VsuSxoACKFPa7VrtqqjpA1FMISsWpApp8nwub0V8IEu2_BuYxhVIfP3K6oApVstWrtU8fzuJzHA3DETW6EPIkhds_kqq/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/AVvXsEiSqmpFMsHgcw8mXly7xaxgu0n-e9yQ-cyCu5kl0UY3WjGVZbf2VCNCWwPBWfrxMnlrboHiQNlfvlJPuRDrwvibkokw1e8gJK6a2sK0p6i4KB3xn0M4hyphenhyphenUGT8oe8lKb3wul8NNWx3ybw28/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/AVvXsEh6s9UbObq8mQKm8D2JZ3ZIpvj_Zh84xdIn4CAVQtZ1Aqw9KAZfVWh0XDc764rdyjywGbaVyYWfJiu4JOidaRTReDbFycGYko6_tIdpSnOIrFqeZd7ynxrHZqm5wH3Fer5UAwglOELM4UU/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/AVvXsEibdHdGw0b1HStYprNZkqwH1Ru3Ym1eqiFn7RZYmXHjvMtKnxz9qORXi7PPxh8DNqjNG5S1LUCL-h3eILD0dOpZkGhDw2AuwJKzmSXk-yj-FXGb_4w7rKG4G2ym6XLOAePcXcOAeDrO7jY/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} </style><br /> <ul id='supportive'> <li><a class='icon facebook' href='https://www.facebook.com/dicashot'/></a></li> <li><a class='icon twitter' href='http://twitter.com/dicashotoficial'/></a></li> <li><a class='icon googleplus' href='https://plus.google.com/u/0/111619041285849190271/'/></a></li> <li><a class='icon rss' href='http://feeds.feedburner.com/DicasHot'/></a></li> <div class="seconds"> <a href="http://dicashot.blogspot.com.br/2013/09/redes-sociais-estilo-windows-8-para.html">Instale este gadget</a> </div> </ul>

4° Altere as redes sociais no código. Use o Ctrl + F e procure por:

https://www.facebook.com/dicashot
https://twitter.com/DicashotBlogger

https://plus.google.com/u/0/111619041285849190271

http://feeds.feedburner.com/DicasHot

Após ter colocado suas redes sociais, salve e pronto.

Comente o que você achou do código.