Porém eram apenas 3 redes sociais, o Facebook o G+ e o Twitter além do link de Feeds para o seu blog.
Atendendo a pedidos alterei este gadget acrescentando mais duas redes sociais o Pinterest e o Instagram e deu um resultado bem legal!
Click aqui
Como colocar um Gadget das Redes Sociais no Estilo Metro
O procedimento é o mesmo do post anterior com a diferença de ter mais dois links de redes sociais.→ Vá em Layout» Escolha a Coluna que deseja colocar o Gadget » Clique em Adicionar um gadget » Escolha um gadget tipo HTML
►Cole o código abaixo no espaço reservado para isto:
<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/AVvXsEjdQqsv7WpGS6MJe4K2HObInJ1IESUtAkaE3hGDWzHkyDdRxreGlzOIaajh83JWjUVBUzY7jqZHwUTu-QU1lz3xvmKbcp6iWjC4ukZRkqXYj_fCoqmf1iNUBSy-Iz2-QWyaHFB8AaLX-_8/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
.MBD2B-social .tw2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgEoTc0OXV78rRhvVdtlaLH209H-TvuKRdS6DVOjLJ8hTYuhoA10RCvEnG5IkJcNOCYHGZBXPIizZ7zPNO77npHMHqyVoA6XI91uv42rsEOV_ov5oqiUTo0Iu5JDXrbg3YXgBL7yD8kQs/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
.MBD2B-social .gp2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJg5Md1d_C-miQuqgpbzb75_ea8d1d1zusZAxXAruOTa8oHgMc_DTOdAJos0eGKLatqZKg8WkkMPca5iDXJxwAz0lKc4Z19_D5Je8yPbHpeGyIYX5Xr-LmBP0-pjOJ-fXt43LpOtc-qQw/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/AVvXsEhZrh3yhQ_qHa6gZ5znGJWdXyyotjb_lemw3NSX42_PIFYqnXG4vIIHh1sN_-B7-JZDh6JpTV7YBBbUfylsvqAI0Ui5vz40pLlMXQ-CEmeNmSjFVjdiDqGFHQEImAaH5a0uGAOAPKBQGFE/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
.MBD2B-social .in2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcUj5je41VPcipXmkhEu9yPlCQszGw1xvPVTxLJbvKS_jVVgs-qphMiI86QrXpmlizGytdsRcQg3fihGtJyqhEaW1XsRXTZslfg9pCEIvHz735vvx2mQVJb-btBLgRG3E0f6DJ0q-0BhA/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
.MBD2B-social .pi2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjljPAHPDbB-O1KzTU2ojxEpve9krEVAr9gb2y6H1zkGZnEciPXqpGJySOatrfj6IpShLt1koVYv6bcSnMCGU0vajDqJEwIEgXSQtC8mVzWiRjuJzwfhBKQXHGQ9iKocL6y5NjQTDyqYU/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/AVvXsEj7Z8wfdaX1V7wkJR6u6r-oSWErMj4zmhwhrACTf-fkW2S4SeLhGoeFZFZRC_UBBL-EKR1M5d-yZ-dl-WZzhViUK-UYKVdWUPpTqLDnbyLSWspiNGVIvZ5F0tkBQ-1CAnqF3rX2u3h5Axg/s1600/Facebook2.png) no-repeat center center #1f69b3}
.MBD2B-social li:hover .tw2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJlyNrfKypTJEcprlGxflWDYeklij78GvW0b9MsctmVmQVgDTfSC9ErrG9G9b-1vte-J7VupnFxa0ZoRZMlNwHdGV6M7Grt8PileDSWvMKR1OUGicIeUvDZ5UZgApkQfHbs2n4TtqtcA/s1600/twitter2.png) no-repeat center center #43b3e5}
.MBD2B-social li:hover .gp2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJmi6uAIPkNaAp9cRga4K15_Ha8uw6LdhdW0zCn2c7MptEfWaYdPh5eldjviaqzRRMetdpG1-1Wt4NElDLw4Rir2-BinwKFOWZMdIWKlEf-ddd3qXnAxLwafNutGXC5zYab1aiXmlejsM/s1600/g+2.png) no-repeat center center #da4a38}
.MBD2B-social li:hover .fd2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kIsBMJXj78MlwHZFp9_sqAmdYKlVQJl0HshISaPeo_kC4Qhgwr504dkgib0apdCGLpC-6UIk9wGQRsWL2sCne5JhUpl485bnc9wwheAwQmCyVzyefU-RVtmthYsnoVEh3iPr6RC3hFk/s1600/Feed2.png) no-repeat center center #e9a01c}
.MBD2B-social li:hover .in2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgV6TO4k3vaBDxZaunmJGiIdZzZaaSFyeu04_6R-gd-Z2yrlKU4s4i8_NUoodjtqM-ueT4RMqaLbVU1DA4nI5WSVgBsd1wjrNG9NttNA9Qqn6ADyoDpkjZlf9VRMGlsyOGIL4hONU6TQ/s1600/instagram2.png) no-repeat center center #3D739C}
.MBD2B-social li:hover .pi2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-fmpDNWlDh6M9RO3L-riXePzFiHQrsqjru5Y9RX714r_Jl8RMbKj7sjACteAN1bLxzmRfOrLYKcy9joTv9FEFEAOSn0gLUovHQ5mAdKEbedAHaZxrHg6wl-nzG8MwN7_rjh6sX08Sm60/s1600/pinterest2.png) no-repeat center center #B93936}
</style>Como configurar o seu Gadget
1- Configure as URLs das Redes Sociais♦ Em URL_Facebook » Coloque o link da sua página do Facebook
♦ Em URL_Twitter » Coloque o link do seu Twitter
♦ Em URL_Google+ » Coloque o link da sua página no G+
♦ Em URL_Feedburner » Coloque o link dos Feeds do seu Blog
♦ Em URL_Instagram » Coloque o link do seu Instagram
♦ Em URL_Pinterest » Coloque o link do seu perfil no Pinterest
2- Se você quiser hospedar as imagens do Gadget em seu blog para não correr o risco ultrapassar largura de banda elas estão neste link:
» Imagens para o Gadget de Redes Sociais Estilo Metro
Baixe-as - Hospede em seu blog e substitua os links em azul no código acima.