[Blogger - Gadgets] - Colocando suas redes sociais na barra lateral do blog no Blogger

Neste artigo, atendendo a uma sugestão que me fizeram, eu vou mostrar como colocar um gadget de redes sociais com efeito de opacidade na sidebar (barra lateral) do blog, como o que eu usava aqui. Você verá como adicionar dois modelos desse gadget, ambos com a mesma finalidade, mas com efeito de opacidade diferente. O primeiro (Transparente para Opaco) ficará transparente por padrão e, ao passar o mouse por cima, ficará opaco; o segundo (Opaco para Transparente) ficará opaco por padrão e, ao passar o mouse por cima, ficará transparente.


Colocar este gadget de redes sociais no seu blog, é uma ótima opção para divulgar aos seus leitores as redes sociais que você participa, assim eles poderão te adicionar/seguir e ficar sempre por dentro das suas novidades. Você pode ver um exemplo dos dois efeitos na sidebar (barra lateral) do nosso blog de testes.

Instalando o gadget de redes sociais no blog


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois clique no menu Layout > Adicionar um Gadget > HTML/JavaScript, como ilustra a imagem abaixo.


2. Cole o código mostrado abaixo dentro do campo de conteúdo do gadget.

COLE O CÓDIGO CSS AQUI
<div class="sidebar-social-gadget">
<a title="Entre em contato conosco" href="link-da-página-de-contato"><img src="link-da-imagem-de-email" border="0" alt="E-mail" /></a>

<a title="Assine o Feed" href="link-do-seu-feed" target="_blank"><img src="link-da-imagem-do-feed" border="0" alt="Feed" /></a>

<a title="Siga-me no Twitter" href="link-do-seu-perfil-no-twitter" target="_blank"><img src="link-da-imagem-do-twitter" border="0" alt="Twitter" /></a>

<a title="Me adicione no Facebook" href="link-do-seu-perfil-no-facebook" target="_blank"><img src="link-da-imagem-do-facebook" border="0" alt="Facebook" /></a>
</div>


3. Substitua o que está destacado em vermelho pelo que é pedido. Note que no topo do código há uma parte destacada em azul, você deverá substituir essa frase pelo código CSS do efeito que você quer. Se você quiser o efeito de Transparente para Opaco, deverá colar o código referente à ele nesse local; se você quiser o efeito Opaco para Transparente, deverá substituir a frase pelo respectivo código. Para obter o código basta clicar nos botões abaixo.

Transparente para Opaco - Código CSS
Opaco para Transparente - Código CSS

4. Após ter feito todas as substituições, clique no botão Salvar para finalizar a instalação do gadget.

Pronto, agora basta acessar a página inicial do seu blog e verificar como ficaram suas redes sociais. Caso você queira adicionar outras redes sociais é muito simples, basta adicionar o código mostrado abaixo, ao código do gadget para cada nova rede social.

<a title="Título" href="Link da rede social" target="_blank"><img src="Imagem da rede social" border="0" alt="Nome da rede social" /></a>

  • Título: esse título aparecerá quando o leitor deixar o mouse sobre a imagem por alguns segundos. Exemplo: "Me adicione no Facebook";
  • Link da rede social: link do seu perfil na rede social. Exemplo: o link do seu perfil do Facebook;
  • Imagem da rede social: link da imagem da rede social. Exemplo: o logotipo do Facebook;
  • Nome da rede social: nome da rede social, que será mostrado caso o navegador tenha problemas para carregar a imagem. Exemplo: "Facebook".

ATENÇÃO: lembre-se que quanto mais redes sociais você adicionar, menores deverão ser as imagens para que fiquem lado a lado, caso contrário elas poderão aparecer desalinhadas.

Atualização — 19.08.2011 às 10h30
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, e para adicionar um efeito suave de transição criado com CSS3.

Atualização — 22.06.2013 às 20h45
O artigo foi atualizado para simplificar os passos de instalação. E, pelo fato do gadget ser disponibilizado gratuitamente, foi adicionada uma página de publicidade no botão de obtenção do código CSS. Após clicar no botão você verá uma publicidade, devendo esperar cerca de 5 segundos para poder fecha-la. Após esse tempo você deverá clicar no botão "Fechar Propaganda" que aparecerá no canto superior direito da página, podendo, enfim, visualizar e copiar o código necessário para o efeito.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 22 anos, é paulistano e atualmente cursa o 6° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 38 comentários neste artigo!

  1. Fiz bom uso da sua dica!! Abração e valeu!!

    ResponderExcluir
  2. Cabeça: que bom que a dica foi útil!
    Eu que agradeço a visita e o comentário!

    Forte abraço.

    ResponderExcluir
  3. Igor? Queria saber se ele é quem tá blogando aqui, queria poder adicionar ele no MSN ou coisa parecida pra gente conversar, já que ele tá sempre no meu blog.
    Se quiser meu twitter é @lariscamara
    Beijos!

    ResponderExcluir
  4. Larissa: oi, sou o Igor sim, rs, o mesmo que passa lá no seu blog.
    Já estou seguindo você no twitter!
    Valeu a visita!
    Beijos.

    ResponderExcluir
  5. Puxa Igor, BRIGADÃO pelo tutorial cara! Há tempos que estou tentando colocar os icones dos links pr redes sovciais no meu blog mas minha noobice não deixava. Graças a sua dica consegui!^^

    ResponderExcluir
  6. Muito boa a dica, só não entendi o que vc tem que colocar para aparecer a imagem da rede social...
    Wlw!

    ResponderExcluir
  7. JC: fico feliz que tenha conseguido!
    Forte abraço.

    Teks: você deve substituir a frase: “IMAGEM-DE-EMAIL”, pelo link da imagem do e-mail. Substituir a frase: “IMAGEM-DO-FEED”, pelo link da imagem de Feed.

    E assim por diante, até substituir tudo o que foi destacado em vermelho no código do passo 7.

    Qualquer dúvida, só comentar novamente!
    Forte abraço.

    ResponderExcluir
  8. Igor, estamos tentando colocar essa sua dica em nosso blog, mas nao funcionou :O
    Nosso twitter eh ->@expertcheats

    Agradecemos a atenção!

    ResponderExcluir
  9. Olá Equipe Expert-Cheats: revisei o tutorial e está tudo certo, tenha certeza de que está adicionando o código do passo 4 acima do código do passo 3.

    E tome cuidado para não apagar nenhuma parte do código do passo 7. Depois basta substituir a parte em vermelho pelo link das imagens e o endereço das redes sociais!

    Se preferir, você pode adicionar nosso widget, clicando no botão "instalar" que há dentro do post, e você só precisará mudar o link das imagens e o endereço das redes sociais.

    Mas, adicionando nosso widget, não é permitido remover os créditos!

    Qualquer problema ou dúvida, entre em contato novamente.

    ResponderExcluir
  10. Igor, agradecemos o seu esclarecimento e pela sua atenção!

    Tentamos novamente e não deu certo. Porém, pensamos no seguinte, temos programadores na equipe e fomos la trocamos o ID "redes-sociais" para "redes". Então, trocamos no widget também, e funcionou!

    Gostamos muito da dicas! E nos desculpe pelo antigo transtorno :/

    ResponderExcluir
  11. Equipe Expert-Cheats: eu que agradeço as visitas!

    Realmente, eu não havia pensado nisso.

    Como a maioria dos templates não contêm botões de redes sociais, achei que colocando o nome da classe como “redes-sociais” não iria conflitar com outros elementos do blog.

    Mas para evitar futuros problemas semelhantes à este, irei alterar o artigo.

    Obrigado por comentar!
    Abraços.

    ResponderExcluir
  12. Muito massa sua dica , coloquei e deu certo.
    Voce disse que tem colocar uma imagem em baixo da outra , como faço isso , vlw.

    ResponderExcluir
  13. Victor: atualizei o artigo; para deixar as imagens uma em baixo da outra, basta apagar todas as partes que foram destacadas em negrito no código do passo 7. Agradeço a visita e o comentário. Volte sempre!

    ResponderExcluir
  14. Como alinhar no centro?
    e qual o tamanho das imagens?

    ResponderExcluir
  15. Isongchannel: por padrão as imagens já aparecerão alinhadas no centro! Quanto ao tamanho das imagens, eu utilizei no blog de teste imagens com 48x48 pixels.

    ResponderExcluir
  16. Brigadão por compartilhar. Já usei e achei ótimo.

    ResponderExcluir
  17. oie com as minhas outras redes sociais( twitter, facebook) ta dando certo , mas com o orkut , não consigo , por pra ir direto para meu perfil .Obrigada

    ResponderExcluir
  18. Espera! que tô pensando: para pegar o link direto do seu perfil do Orkut, basta você acessá-lo e clicar com o botão direito do mouse sobre a foto do seu perfil (tanto na versão nova, quanto na antiga do orkut) e depois clicar na opção “Copiar link”. Em seguida é só você adicionar o link no widget que as pessoas serão direcionadas direto para o seu perfil. Espero que isso lhe ajude, qualquer dúvida entre em contato novamente.

    ResponderExcluir
  19. não consegui que ficassem na barra lateral, eles ficam onde fica o gadget. olhei seu código, e realmente os atributos que usa define a opacidade, mas não a localização no blog. como faço para que fiquem fixos na barra lateral? de forma que quando movimentar o blog eles continuem visíveis no mesmo lugar? aguardo

    ResponderExcluir
  20. A andarilha: o código é justamente para adicionar as redes sociais à sidebar, como se fosse um gadget. Eu não tenho nenhum artigo que mostre como adicionar um gadget fixo na lateral do blog, mas em breve pensarei em algo e postarei aqui no blog, caso queira ser avisada quando eu postar o artigo, increva-se em nossa newsletter gratuitamente. Volte sempre.

    ResponderExcluir
  21. IGOR VC NAO É FRACO NÃO , EXCELENTESSSSSSSSSSSSSSSS ARTIGOS, QUE NOS AJUDA DEMAIS. OBRIGADA. ESTOU APRENDENDO DEMAIS.

    ResponderExcluir
  22. Ola td bom? Agradeço muito pela dica, me foi muito util. So uma coisa - no botão do entre em contato conosco, como faço para direcionar para o meu email? Agradeço desde ja

    ResponderExcluir
  23. Olá Natália, fico feliz em saber que o artigo foi útil para você. Quanto à sua dúvida, o link para a página de contato, seria o link de uma página no seu blog, onde há um formulário que possibilite seus leitores de entrarem em contato contigo, assim como a minha página de contato. Se quiser saber como criar uma formulário para seu blog, leia este artigo.

    Mas, se você quiser que ao clicar na imagem de contato, seja aberto no computador do leitor o programa que ele usa para gerenciar seus e-maisl (geralmente outlook), basta você substituir a frase: link-da-página-de-contato, pelo código: maito:seu-email@exemplo.com. Seu código ficaria da seguinte maneira:

    <a title="Entre em contato conosco" href="mailto:seu-email@exemplo.com"><img src="link-da-imagem-de-email" border="0" alt="E-mail" /></a>

    Espero que isso te ajude, volte sempre.

    ResponderExcluir
  24. Cinthia Dias Santana1 de outubro de 2011 17:55

    O meu não ficou certo pq?

    endereço do blog: cdiasblog.blogspot.com

    ResponderExcluir
  25. Cinthia, eu visitei seu blog e pude ver que a barra de redes sociais está instalada, porém, ao olhar seu código-fonte, eu não encontrei o código CSS que foi citado no artigo, e algumas partes do código estão diferentes das que eu forneci no tutorial.

    Portando, tenha certeza de copiar, um dos dois códigos que foram citados no passo 2, exatamente como estão e colá-los sem alterar nada, modifique somente o que está destacado em vermelho! Isso deve resolver o problema. Qualquer dúvida, entre em contato novamente.

    ResponderExcluir
  26. Cinthia Dias Santana8 de outubro de 2011 16:18

    Valeu Igor, antes eu tinha feito o mesmo processo e não deu certo mais agora deu. Obrigada mesmo!

    ResponderExcluir
  27. Faço tudo direitinho e o link funciona, mas as imagens não aprarecem.

    ResponderExcluir
  28. Gi, se o problema ainda persiste, informe o endereço do seu blog para que eu possa dar uma olhada.

    ResponderExcluir
  29. Como eu consigo o link da imagem das redes sociais??? Pleaseeeeeeeee!!!

    ResponderExcluir
  30. Lucia, você deve procurar por imagens que lhe agrade e depois hospedá-las em algum lugar, como por exemplo: Photobucket, PicasaWeb, etc. Depois é só clicar nas imagens com o botão direito e escolher a opção Copiar URL da imagem. Espero que isso ajude. Volte sempre.

    ResponderExcluir
  31. Olá !!

    Amei o tutorial, super bem explicado e fácil de aplicar !! Meus botões estavam sem graça, mas agora deu um Up com suas dicas !!

    Obrigadíssimo !! Grande abraço e sucesso !

    ResponderExcluir
  32. Muito bom, só tava meio perdido na hora de achar imagens do tamanho certo e pegar o link delas, mas daí li o que você explicou para a Lucia e ficou tudo 100% e exatamente do jeito que eu queria.

    Muito obrigado por compartilhar.

    Abçs.

    ResponderExcluir
  33. Nossa cara vc não faz idéia o quanto eu estava quebrando a cabeça para colocar os botões de redes social no meu blog.
    Eu tenho 9 redes diferente e estava loka pra colocar no meu blog.
    OBRIGADA!!!

    ResponderExcluir
  34. Adorei a postagem me ajudou muito, obrigada!

    ResponderExcluir
  35. Cara brigadão ficou show, só uma dúvida, como aumento o espaço entre as umagens?

    ResponderExcluir
    Respostas
    1. Android NTA, fico feliz que tenha gostado dos efeitos! Quanto a sua dúvida, há diversas formas de fazer isso, tudo dependerá dos seus conhecimentos. A maneira mais simples seria a utilização de códigos CSS, altere o código dos seus botões da seguinte maneira:

      div.sidebar-social-gadget img {padding-right: 10px;opacity:1;...}

      Note que eu adicionei o código: padding-right: 10px;, você deverá adicionar essa parte ao seu código também, em seguida basta você alterar o valor 10 para mais ou para menos, para estipular a distância do afastamento. Qualquer dúvida entre em contato novamente. Abraços.

      Excluir
  36. Igor,até que enfim encontrei os ícones.
    Estou levando para meu blog.
    Obrigada por partilhar.
    Sucesso para você.

    ResponderExcluir