Redes Sociais em Estilo Metro nos Gadgets

Yo! Yo! Hoje venho trazer mais um widget para vocês, mas dessa vez para redes sociais, o widget vem no estilo Metro, empilhados organizadamente, o que chama bastante a atenção de seus visitantes. É possível mudar suas cores somente com CSS, o que facilita muito nosso trabalho na edição. Os créditos se encontram no final da postagem, então se usarem creditem. 

1) Aplicar esses gadgets é muito! Muito fácil! Basta ir em Layout abrir um novo Gadget Java/Script  e dentro colar o código de um dos modelos abaixo:

Versão 1

Esse modelo é ótimo para quem quer algo que tome menos espaço, possui espaço para quatro ícones, pode personalizar em cores sortidas, e ate mudar a imagem se desejarem, eu amo usar ele no topo dos gadgets, e aplicar um estilo hover.

Códigos

<div class="MBD2B-social">
<li><a class="fb" href="URL_Facebook" target="_blank"></a></li>
<li><a class="tw" href="URL_Twitter" target="_blank"></a></li>
<li><a class="gp" href="URL_Google+" target="_blank"></a></li>
<li><a class="fd" href="URL_Feedberner" target="_blank"></a></li>
</div>
<style>
.MBD2B-social{width:285px}
.MBD2B-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.MBD2B-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.MBD2B-social .fb{background:url(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png) no-repeat center center #1f69b3;width:140px;height:141px}
.MBD2B-social .tw{background:url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png) no-repeat center center #43b3e5;width:140px;height:70px}
.MBD2B-social .gp{background:url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g+1.png) no-repeat center center #da4a38;width:140px;height:69px}
.MBD2B-social .fd{background:url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png) no-repeat center center #e9a01c;width:282px;height:69px}
.MBD2B-social li:hover .fb{background:url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png) no-repeat center center #1f69b3}
.MBD2B-social li:hover .tw{background:url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png) no-repeat center center #43b3e5}
.MBD2B-social li:hover .gp{background:url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g+2.png) no-repeat center center #da4a38}
.MBD2B-social li:hover .fd{background:url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png) no-repeat center center #e9a01c}
</style>

Versão 2

Diferente da versão 1, esse possui espaço para mais três ícones para rede social. Nele também é possível colocar cores sortidas nele. Esse modelo é ótimo para ficar em sidebar limpas, devido ao seu tamanho, claro que também pode personalizar o tamanho dos ícones, porém vai precisar de um pouquinho de atenção e paciência para fazer isso. 

Códigos

<div class="MBD2B-social">
<li><a class="fb2" href="URL_Facebook" target="_blank"></a></li>
<li><a class="tw2" href="URL_Twitter" target="_blank"></a></li>
<li><a class="gp2" href="URL_Google+" target="_blank"></a></li>
<li><a class="fd2" href="URL_Feedburner" target="_blank"></a></li>
<li><a class="in2" href="URL_Instagram" target="_blank"></a></li>
<li><a class="pi2" href="URL_Pinterest" target="_blank"></a></li>
</div>
<style type='text/css'>
.MBD2B-social {width: 285px}
 .MBD2B-social li { position: relative; cursor: pointer; padding: 0; list-style: none }
 .MBD2B-social .fb2,.tw2,.gp2,.fd2,.in2,.pi2 { z-index: 7; float: left; margin: 1px; position: relative; display: block }
 .MBD2B-social .fb2 { background: url(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g+1.png) no-repeat center center #da4a38; width: 140px; height: 133px }
 .MBD2B-social .fd2 { background: url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(http://1.bp.blogspot.com/-Px9UJWkw78U/VMZ2DQatmbI/AAAAAAAAAKc/aRBQVEofjkA/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(http://4.bp.blogspot.com/-rCIENnwBn8w/VMZ2DWDuwxI/AAAAAAAAAKY/PMP0M8K-Ge8/s1600/pinterest1.png) no-repeat center center #B93936; width: 282px; height: 70px }
 .MBD2B-social li:hover .fb2 {background: url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(http://3.bp.blogspot.com/--uW6lsaYNec/VMZ2DWfl3dI/AAAAAAAAAKU/NprNulN_rXM/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(http://2.bp.blogspot.com/-dGrSXW4khX4/VMZ2Dw05orI/AAAAAAAAAKk/6bui6BSulHA/s1600/pinterest2.png) no-repeat center center #B93936}
</style>

Créditos: Templates para você