Gadget das Redes Sociais em Estilo Metro UI - Versão 2

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!

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/AVvXsEiJxAwwS5CizT9VzqMr3C2iSl5HoXbWmVDAQiyuj__3vESQY6Es43-u7dZemGAZmPD1P8mSrcAtQUQ3taK9QYjlBOiwe_21Ur136tx49hDrg4d5v9gpdNua7pFuNhDR0Dsp0hzekbwXTjs/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuvkJBkq0kDAv2GhQgBTvqlQIJuwrg1Lfj7DPEEicqkXUFv9UJab6-s2w1FluZAWgJwKdMrSKEPu1t_oIJ_MGZdQV9NYxUxW5SJhN6oBnLruFg5DZNxQ1y6Ec2y-2LQiTcwP_sKDVtHiY/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4oPrLXTt46FzKF9RJ5PdA5o-VWP34ys7LCM3_z21a2Tha28uVVPDYPlldYnriCezF-0WCcpc8iq63lcO8R3RB1VgMZTADtEwVZzMr16TzzaCqImWhsAK0ZQrgrxuHRn7mViHkoPNFmGQ/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/AVvXsEgQ8IF_AijuIgadT7ujdkERpw2YFW9BswilMIzJyzLMnQfsTk6t729x5ig_XHbb7i36sHygZvFglguTZxWn32-HKvT4vxtkbrcseT5Ewr8lmkm2VA6cUHYsX9bYGHB3FkfzaGyLjaQArBU/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg8GbqRpYNe-1GLDnJ-3oE-T_roe-sGIgL0k3cpt_46Qc5JGnUkUjC2oh6y8w_VGmIYm3aw1sht1gabMpVhVXihyphenhyphen6QsA2rStctnR4ES0wEekJjd12PKv1Kl-E50oGOfaPdF6VRwWGcrXg/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMgYiuzE7v8Isf_Rhx2Id6wV7Rt39wJELwBPfzNM8jUXHgpgrCq8UcmqE3R5Q6zhTmjc9mA7oIwsGcdLvMqJr2VQ2W6kxXw9zDMyzezK75zonwhxXPMeIPSNmcSj9lWTfzXZuewljZbk/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/AVvXsEhymNqqzBXphyphenhyphenQDtIvtQk9kOKkU02d03aeCSlTUvDWqHaJisThMWsCtap27tpyWOkeyVjwSqQ1Klz3wPdL65RlTjmcv8W9PcdshIrJjAQpmeRJviLl1vsF0ZRM5UDgoG9hB19lPXiEZ7yM/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMpvrf9XHO7y7wkdidIRw0IrRc-dZPQxqviXf9gRc-Bq8E_-cmI8NDa3hpzS0aehyphenhyphenEMUT8hS54K8eHAS1v8LvtKyE5p6vS59-wg5l8EIn8sPTfJtogYM8egLnSKquQfwUgBWZrQ1PToJs/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxVDw-yJ13hufleD3SILEtNbgHhfyiZACQJaitowPxnvREBp1ApEf-hYiDUD3cfUwMVHAFf6DQ0DQQFrpKQHsuwks8dAQdyL6FF0QQ5uaJL4eMEcv24nWNrnXegX2-XZSOKDMX-OIVnEE/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgKj0daZMDZaDxkTDxKbzhyVJp1Je9Uo6jsqnqtqApcr4dTUlE6GlrH2ocjBOOem5vrXctj8IVnfXg8JkuUeRahDL_0m-M1fKfM_2buOwBVEZWc-mJsg775HgwNvUPxn-3atpt2b0QgA/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVsE-FfeiCJVG__ZlApEKWxDV406qba06FdTQNiFDQMpfzg-r41WXncfEIMwEkgVn_-5aC6bOdH4S77SKsrJAMp7I-9rmhYIRPVVLsaohnbiUXkE9J5bAxQGVzdreIiLFScYowLDC4IY/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqwL7CZM01WTICKXw_XibdkKTiOu55WTYzMfhRs0ZNrwIY6b7vvbMTofkSzhZ63rFAecRp-iHsPL6S0BzSGxJJaX9TVNMv9CRWwuwL9MQObdxJCPGyZM-w44GdYRWSS7YyxTffqfPnkvQ/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.