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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc682qCg_rFD11J_sqNXTr7JcSe271BKknenfEKkidQVqPiO_CtA19n1Z6rJ2ZUHUnNY-0J-vWLfaF8Z-QjfzdPRXb3om0a-Oqg2C6Vq2r_JfESuUi3KFzgFgf8mBVMK0Gam_H_c1NGfk/s1600/Facebook1.png) no-repeat center center #1f69b3;width:140px;height:141px}
.MBD2B-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2k9zR8Qp5_x0SDgh2WJ3OAzNS2s8TCWWusbGYh4njyrAkY2-zkdjj2DU3-D78C4fRXwmPzlBkaocdm8eX7Eei52NloC71tjzDROewzRsmrkFXGgklp_r8EY0ZTnukrRsa77DYpr9gy2M/s1600/twitter1.png) no-repeat center center #43b3e5;width:140px;height:70px}
.MBD2B-social .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZpRwcqEhO9En9DMTQXyM0QK_VaPkFuCvm3Ih6FFRja6OhxTx9wbFtZEZdGNxFBdDvdAaYABEVqFXqcKwruvl8f0juvBSJPys-l2rzHDCeN8I8w24YVeMX7Yp-zngDdL_R_U3W82-EO0/s1600/g+1.png) no-repeat center center #da4a38;width:140px;height:69px}
.MBD2B-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Kg0LTQoc_rvPY8ZUlazILBhRjEB92hhGlctUqk6bRALfn_Ajr-ne4YahHJ1XtjDeuGoczw5xZnp1JfXMCkxRGZ-vroWNWH3gLAMVMCPl2L_-s35Qml8XUOWUX_M5YTK2X1UXYtaLPmc/s1600/Feed1.png) no-repeat center center #e9a01c;width:282px;height:69px}
.MBD2B-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Osr_BjfgjEMlf4Ti563-7BIS4V_uvR2w_rkDy6vWYhTt2dumWaFvXRPpW7gN33t1eLQ7ZG6Js8GnO3RwBZCW9-w97n37ahiaMibspiCCCS229ISFoz3EqhA1qNIE08QC-1SHe46HCS8/s1600/Facebook2.png) no-repeat center center #1f69b3}
.MBD2B-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAPOWPzMaazFjnmxuDtrwwjJkJfzJTy1SlDOYocsNE4qh5Dfc5wdu4ItbOe5OHN2K2dG8wQ9i2bPtpIPZ2V3a6o9AIfsPNibUuxhpc56vjw4PTeNx0iOZy50zVG5uvBqNNkUdsLeCOiiE/s1600/twitter2.png) no-repeat center center #43b3e5}
.MBD2B-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3u0TUyO4Yv30fs6AD-StrgX_DVdazbmmad7ah45-7pmAAOlixa4S40C52IMd3FptLLYTR-2tJ0hH13gwG-H1j-RV46BPEG9Cz9lt8Kjrzq6TEtT41VcUwPyHs9CQOLZeJcyEhpHFwX4/s1600/g+2.png) no-repeat center center #da4a38}
.MBD2B-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8N462yPjXb4_wS9Lio6snZpnVEIsOb-NwBcTVgZJGFOpSwWdsQiI9xLm3_uw8dNjR2zirnguNJ9vhoEwDcr-oY9v8EC6vvgWgU410fLMrNjNP3MaadAFxNH82VkxSq0U5hZBn4HNsJ28/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc682qCg_rFD11J_sqNXTr7JcSe271BKknenfEKkidQVqPiO_CtA19n1Z6rJ2ZUHUnNY-0J-vWLfaF8Z-QjfzdPRXb3om0a-Oqg2C6Vq2r_JfESuUi3KFzgFgf8mBVMK0Gam_H_c1NGfk/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2k9zR8Qp5_x0SDgh2WJ3OAzNS2s8TCWWusbGYh4njyrAkY2-zkdjj2DU3-D78C4fRXwmPzlBkaocdm8eX7Eei52NloC71tjzDROewzRsmrkFXGgklp_r8EY0ZTnukrRsa77DYpr9gy2M/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZpRwcqEhO9En9DMTQXyM0QK_VaPkFuCvm3Ih6FFRja6OhxTx9wbFtZEZdGNxFBdDvdAaYABEVqFXqcKwruvl8f0juvBSJPys-l2rzHDCeN8I8w24YVeMX7Yp-zngDdL_R_U3W82-EO0/s1600/g+1.png) no-repeat center center #da4a38; width: 140px; height: 133px }
 .MBD2B-social .fd2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Kg0LTQoc_rvPY8ZUlazILBhRjEB92hhGlctUqk6bRALfn_Ajr-ne4YahHJ1XtjDeuGoczw5xZnp1JfXMCkxRGZ-vroWNWH3gLAMVMCPl2L_-s35Qml8XUOWUX_M5YTK2X1UXYtaLPmc/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_ajOJ64QZ7IyS4whmukglYOSyttu_KtDJw2hbdZJPA_ZscwBKITr0TpioOJfNNhKDI52QNAw3hsiAIOKFLPKfPZybDs-S8ypdJ0DT7yyItaMoWenlJL6lPvhXGtjmbzHKAklOvL2iC4/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX1LnrNChw_izejqXGa0FhsSpaRLSherLAZPga9IcF9NZJ6DofHR93DRfUnhA48KKCINwYgRvztfx-NgFlOu5rnL_PANmnTyWoxUCZzwcsF5zG33Xut13I5o8jp1Amuti8mMVDr5ZLx4Q/s1600/pinterest1.png) no-repeat center center #B93936; width: 282px; height: 70px }
 .MBD2B-social li:hover .fb2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Osr_BjfgjEMlf4Ti563-7BIS4V_uvR2w_rkDy6vWYhTt2dumWaFvXRPpW7gN33t1eLQ7ZG6Js8GnO3RwBZCW9-w97n37ahiaMibspiCCCS229ISFoz3EqhA1qNIE08QC-1SHe46HCS8/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAPOWPzMaazFjnmxuDtrwwjJkJfzJTy1SlDOYocsNE4qh5Dfc5wdu4ItbOe5OHN2K2dG8wQ9i2bPtpIPZ2V3a6o9AIfsPNibUuxhpc56vjw4PTeNx0iOZy50zVG5uvBqNNkUdsLeCOiiE/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3u0TUyO4Yv30fs6AD-StrgX_DVdazbmmad7ah45-7pmAAOlixa4S40C52IMd3FptLLYTR-2tJ0hH13gwG-H1j-RV46BPEG9Cz9lt8Kjrzq6TEtT41VcUwPyHs9CQOLZeJcyEhpHFwX4/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8N462yPjXb4_wS9Lio6snZpnVEIsOb-NwBcTVgZJGFOpSwWdsQiI9xLm3_uw8dNjR2zirnguNJ9vhoEwDcr-oY9v8EC6vvgWgU410fLMrNjNP3MaadAFxNH82VkxSq0U5hZBn4HNsJ28/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilU5aTgRoXPTlsRKyVZWG2uybuGJRvis0PJH6zS0AXgqHU8vH_SgbV1cNvtNV7WKDG5UkjNjOySIbExC_kS4LEz2C2_pptFXfka1GY-hy0283BIGur3i8DGPu9UFipoNNNdGVDs2j1p1Y/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8K_UYhSz4sgp3VzC5qdaQiYuIsz_YRje36nn_aXCNgjLYUXPS7wFyhVtjey8KMDCpOgEWx0Uve66Wtwlh2ipeDPROXZ48u2V1HhqMBM_BArhIXxecSlpQktI7v4XwGA6vkH9W5n0QyFA/s1600/pinterest2.png) no-repeat center center #B93936}
</style>

Créditos: Templates para você