Gadget das Redes Sociais em Estilo Metro

Já publiquei um post aqui explicando o que é o Estilo Metro e como colocar um Gadget das Redes Sociais em Estilo Metro como mostra a figura abaixo.

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 Instagrame deu um resultado bem legal!

Demonstração 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/AVvXsEhxlIrZd-eitrjEUHFatOZ8_GvVi2wQ2DRsT6QSbRZwwtOMr3kUm7GZKRzVeSR78CZ5Tl6BkJc9K0-75EtYNbqhOkdmJ6AxRkqOHX6dd8BeJYk90JYXJ7cIPE6kj8BSV-uc7eob6pSfWuQ/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Tt3tTnauCFaSA9ohVioOwxIYmnvv48W6S7G8zGdDV8uLnHwwogF-IbNGI-yFiKqpep39jMI927eVmc8BfuUkNHGUG879lVPYMgOjFGH_uqNor_ygLpNZOvOB3cEqSAP6d0ncr1FfvaQ/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmoxXrFCb9cPvxzTK29xmMLzG_lxOTEW83DtCVcBm3IBeLn-qu9V4BbJf53s4TXiEihuHgSY7Eq9U0Ik312mJgqSd5yn3VM5xy0thDxYa33Fl4oELlhuNaDgP_mw1Ds07mKx4HRCkRCUQ/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/AVvXsEhwMkb3iG8pPkMfhatnj9o_XEiP9mlD_CmpUh2rnp93r6K3eazBmgTRpdF7LsqkcrXxTenQSCgWLgO2-OhzL7RMlGWEwYtgIloel5QHpRSowOd77-xE_VAVFpb1P_VA9Ym3yfkUfAMcwkw/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio65itSPDt8734t2Kvj-m9BCv8qOTvBXc24-W29b_69P6OAs973Xt_sDw2WPZSqPa-1qJdBBNF5t2u6MWeJthh7mX1TnFnExYqrcFatPMZ44zRiYsxgEW9UCqhzCzuQv4eXB5uli1_7jI/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqy0UJPYtp_NqVr45UHrfE1kSeGxZB5wWFNArZt8gEEAcbOcIjoK6YGHKc81JRS8Znur6zZ_Ndb-xPWU5qGMFlZ1hKC6ci97ANoiHb-nI5JzknPPMvBV0wh33YHyHfbP_2j_4dtXEjHRQ/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/AVvXsEjXGiaqexTkpWhEySeYbJYpoKLlrlEb7bwOciikJlEF23IRhBUXih_jwzVANohAFLRBzgsL9a_k4sXOE4za_GGQF8nLa-w9MwMphHL_kZftjKUS6tqa9TAdv8PoIpeFfKjRnyg7hGCKcac/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsN0VnFvqeQLxjfYpYlloGP1WqNqd8TFfRkraRqkD-ODFMeYcC3Lnf5LOmVxhzBxqWh9OBBwTUtT3e6XPK3yYxjvQTdSrAx_sQ8arANmGmW6B_5Y4hgBl2vQHd6yYvijbimoKrsMVKf0/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAa7P6pCaoxIv652KubUHhfZbgjArfxAQ4HkBgPVf_D7aB9cYpD7BwWBCW12z5-tEcoFyCAsDgiXURRzEOlA81aCbgXXyupq7ZfRVajQxN6srvNfM50UW4BHyICAWjKKnjT4-SbsdngJ4/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHMdwevtDrJ11t1DlNcrEQl_79i9tSCpU3kLOUTrs3TMshS-9eFuTpQbE2k_5bpL53ZisIUVXHqUCjvJ7JaXQwRN4FoKk9sy3Q_bCyA0HISdY-5bRl_KXlunBrw6G_ogsrCwAr3P8Tj4/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6mNYP8FGFHH_geXeQDCS3buM-rNgz2arcV1RO5ii9R7CNfI1b-5zt02sLkxZ9EmfYV7clYsexak0NIFNBghGocJ-gSMhjGwSF5kQgS3BjUN3TfipwMQO3aFdphJO84utfs6JWwYXdZm0/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0G9fTMlzUG87i7dZgRpZW52dr2OQdP9VD8eaARL35Xc5WGyv9eaa-B7-v11OXMtVX6CJd9Q5p7R8HvJTj6BY2-14SWHMrohTlRNVRHG9FYfMgJacDSeVCuAnX8z2OkNPBdyW5FnyfLqA/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

Obs: Se você ainda não ativou os Feeds para o seu blog » Leia este artigo: O que são feeds e entenda a importância de ter feeds para o seu blog.

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.