Box de redes sociais para Blogger no estilo do Windows 10

Nem todos gostaram do Windows 8, o visual marcante da interface Metro deu o que falar, e está presente no dia-a-dia de milhares de pessoas.

Mesmo com tanto burburinho o novo visual não agradou tanto quanto se esperava, mas mesmo assim a Microsoft continuará apostando nas "caixinhas coloridas", na nova versão do seu produto mais importante as caixinhas estarão incluídas botão Iniciar.

Pensando em tudo isso deixarei pra você um tutorial mostrando como inserir uma caixa com as suas principais redes sociais ao estilo Windows 10.

Assim você poderá manter o seu blog atualizado com o visual do sistema operacional mais utilizado no planeta.

Mão a obra.

Antes de começar não se esqueça de acessar nossa página com mais tutoriais sobre blogs, dicas que vão deixar o seu blog mais completo e atual.

Para começar acesse a página Modelo (localizada na barra lateral à esquerda) e quando abri-la procure pelo botão Editar HTML.

No código procure pressione CTLR + F e procure por ]]></b:skin> cole o código a seguir antes disto.

.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{list-style-type:none; 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{margin-top: 2px; width: 148px;
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG3yoju4EQ591FX2PPWqgQUxuWXQRrM0M6w6SmhPz7UlzIf5TLMPJ_dXuGJwDMARhySKg3uksORfqDp6799337T8jSU-khI1KrTPgUC0v7ymFQPxP6nzC-unNGaTZKtVqgA3n77C2C8Sly/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/AVvXsEjB6x661thfBsssHoaCTPeHeGSeefKnJK0EBlPMcmgtGWVGwhKvQv1CWtjePRm-32lTa6akhoM9ctD2at5XvykYCL9uVeRZrcvjw8iE2XdzkgkiOpuM3s5UlZW9AXueCEvFplk_6MmwDX8q/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/AVvXsEj_L93lEIv3WYwecrqx80dLPCmkDlHJc2UZf50c-Wm3wwvOd9yCSs5doOU0QJUEFoNIRPXLSoWvYhIM8tdULMkOCzf084ZpOg0ncy0ND3rrSeESTrJlXCItE2lnpoTZLukTSXmn-h1QQeBQ/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;}

Agora basta salvar que o CSS será inserido no seu blog.

Dê uma olha no artigo onde mostro como acrescentar os botões de compartilhamento com inclusive com a o WhatsApp através, basta clicar aqui.

Para terminar precisamos inserir o gadget, acesse a página Layout e clique no botão Adicionar um Gadget, escolha a opção Html/JavaScript neste gadget você irá colar próximo código:

<center>
<ul id='supportive'>
<li><a href='Endereço do Facebook ou página' target="_blank" class='icon facebook'/></a></li>
<li><a href='Endereço do Twitter' target="_blank" class='icon twitter'/></a></li>
<li><a href='Endereço o Google+' target="_blank" class='icon googleplus'/></a></li>
<li><a href='Endereço do seu Feed' target="_blank" class='icon rss'/></a></li>
</ul>
</center>

Pronto agora basta alterar os links destacados em azul pelos seus.

Gostou da sua nova box de redes sociais? Deixe seu comentário e acesse nossa página com Mais tutoriais para blogs.

Obrigado e até a próxima!