» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

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(http://3.bp.blogspot.com/-5uDzuzPa4ao/UqOnGZYpiKI/AAAAAAAAAEo/8CyoMUABc3U/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px }
 .MBD2B-social .tw2 { background: url(http://3.bp.blogspot.com/-vopcCiP-PjM/UqOnHTMd-2I/AAAAAAAAAFM/eG9JJ2MY6qM/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px }
 .MBD2B-social .gp2 { background: url(http://4.bp.blogspot.com/-A13Rw_xfZag/UqOnG6-bqBI/AAAAAAAAAFE/hhmC9iKB9LQ/s1600/g+1.png) no-repeat center center #da4a38; width: 140px; height: 133px }
 .MBD2B-social .fd2 { background: url(http://1.bp.blogspot.com/-cVOxJstBcBg/UqOnGdwpRsI/AAAAAAAAAEs/Yy_SbDLWwFA/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px }
 .MBD2B-social .in2 { background: url(http://1.bp.blogspot.com/-Px9UJWkw78U/VMZ2DQatmbI/AAAAAAAAAKc/aRBQVEofjkA/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px }
 .MBD2B-social .pi2 { background: url(http://4.bp.blogspot.com/-rCIENnwBn8w/VMZ2DWDuwxI/AAAAAAAAAKY/PMP0M8K-Ge8/s1600/pinterest1.png) no-repeat center center #B93936; width: 282px; height: 70px }
 .MBD2B-social li:hover .fb2 {background: url(http://4.bp.blogspot.com/-JwHnPN5lgb4/UqOnGYRa93I/AAAAAAAAAEw/Fjw0lBlnOmk/s1600/Facebook2.png) no-repeat center center #1f69b3}
 .MBD2B-social li:hover .tw2 {background: url(http://1.bp.blogspot.com/-osuN0bVZ80o/UqOnH8ldX9I/AAAAAAAAAFU/FZ40AYwTUTA/s1600/twitter2.png) no-repeat center center #43b3e5}
 .MBD2B-social li:hover .gp2 {background: url(http://3.bp.blogspot.com/-4fYQ1zi5K8o/UqOnHMOQqyI/AAAAAAAAAE8/CiF2XMqeYjo/s1600/g+2.png) no-repeat center center #da4a38}
 .MBD2B-social li:hover .fd2 {background: url(http://2.bp.blogspot.com/-HEQHhVN6PIw/UqOnG9F_HiI/AAAAAAAAAFc/idsaUJrCaN8/s1600/Feed2.png) no-repeat center center #e9a01c}
 .MBD2B-social li:hover .in2 {background: url(http://3.bp.blogspot.com/--uW6lsaYNec/VMZ2DWfl3dI/AAAAAAAAAKU/NprNulN_rXM/s1600/instagram2.png) no-repeat center center #3D739C}
 .MBD2B-social li:hover .pi2 {background: url(http://2.bp.blogspot.com/-dGrSXW4khX4/VMZ2Dw05orI/AAAAAAAAAKk/6bui6BSulHA/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 R C 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.