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

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 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/AVvXsEiSa3C0ZqtnK6A4-4j_3tRlWDc0wUho02eoMJRu-SmwAOFffdm5YBqq789OETzBWy39ZusCzUxUDI8CgPlq-7TyvlMbnPy4WXveWQRZukhJEKP1Jrv7Y1t7bamzQCtH730Np3TAVr760ZY/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQINVZKLrKoNoQOQVzRhVRBVYcP_nubEez6ugg_tAxbT74HhyIsWxSrf-qYMat6KpRjcBl809kXAc57WaNkoSpdtmVswA_EymmT5u8nCxxgFBB5NffVqKI1tA5En171mBGasScsAzEJw/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyuSOchSLHcXox242WZ8Mjod9c4OI85_FPxSw9gSiJJIjqPaZmLqAliyLRMCYUA8P1vdKJ3wQpJAjG8F7IFPaDIB3Lvqrp9tL2HTOjEmAIyHKgc_-Sru1xlZdwhLs2NCcNjWsqzauSBz8/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/AVvXsEh1CtSIpe1Inw6Jq95Us_GymSviVntNEwGoNzcbznysU0krx9O5ypCbhr7OI5rZRdtgGq0xhWi6PxRLGk_O8CI_bX-FBRD69e_bYyAtdOOBItMucK9eNPp0MfAXhrsLNfNm9n2t09iJnDw/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jAF2JJH5h1zR45ZisYmK4e66UGxSzUDc74P55q1ghVol-P7mmotmIK45f3vDJJWRahCNFJt1V5ux3YiUl-RWcxVzww0iUvWbL1IAPkF9HBL0udeOsxoaHbdf90ZcPbIOf9MoiZiptfY/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAUSEtaFuz2CGp4LsidMsXmQMrszuhWbZUIfMUHIXByRI445B_LbFtp7ffy8j0WJLzVxIExfKMllxKpBXVks_7Z3bFX8eBY7h47GbSh0uv89C1jXbsyL7nQrIoxhdy-l-uZgFO4aXOte8/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/AVvXsEgp-cnrzaqqmrndwoklnhgpOxOXjxpqsBvqqSDDRszXb_nCMlDOL-FUNjNVBZvRxli2pAEnRf_kleM1UQDH-PZteSppjOP3HusXgdNRKyM0FLDdSOIVbw3xTqEaRA59yoK4jE5WObucmiU/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9MFV-wGRUatSOy2WcSz6vDV6mxqY4feCqB2FobKsuCugF0dPuoJP7Fu6PD9RBuNcsE6SaVMs-bNXZ-fCfbH8EPcgj15CXvqBdh8Au1tTptQAVafNXEe91h5lksQLjtV1XpMKC303q7Q/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88cafneTGpf1iiALu1y0U3kTOv-VtK9p0LIYIFQOCLXfXcEco6k2NgKdnqgpumLhX_0ZZGqF2wkh2muVTv-N1RwARVXK4G5y3Ep8SH-cUbJQmUVaf2woUCFblgEfa4ikqKNitBnBDhlA/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXROwRtHaaRzV7yO_niM4chmWC-tBqcO2191qmYvJjUe9GX0E0a6k37woH2fA5kcLdNckoSExBDFT2mLYA7WDbCVlxdhATiD6fmS4CYry0h8sVlaNv6MZgm-Mt7lFJTjBBYxLyYPiaRU/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNiSl2WFDmFNPRgksnKrN9VaMCLf1J4-uk6DyFiahwkjCBWYGh7ROoRJPnYIdrHX8t7HH74-JfflLcEfh1dm160-AKwVdX1yefnZK91vxwYNaJ73usm9yIEengkBwn9-ETKeKUNoUD4Rc/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_iXXtVc_Kje-hRgh9SteanMxeUUnsW1AafXpHbE2y1dgUBoM9u_b5MYGfgE_TViHXaYBvtbCX5hZn7pJbC3EqLskTcXJsxOvSGLQr6o4y3JzzoT1OHG53Cl8o8PXkpWvyQuj0__uN49s/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.
Gadget das Redes Sociais em Estilo Metro - Versão 2 Gadget das Redes Sociais em Estilo Metro - Versão 2 Reviewed by Aurea on 1/26/2015 Rating: 5

2 comentários:

  1. Achei....... Obrigada querida!!!
    Vou colocar lá no Blog com certeza!!!!
    Obrigada por dar este retorno.. Vou dar mais uma bisbilhotada no seu site, pq foi o unico que eu tive sucesso..
    Bjssssssssss Juju

    ResponderExcluir
  2. Please, o meu está saindo umas linhas brancas, por que sera?

    http://nihongadaisukii.blogspot.jp/

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.