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 Transparente para Opaco

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.

<style type="text/css">
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {opacity:0.2;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
div.sidebar-social-gadget img:hover {opacity:1;}
</style>
<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 e clique no botão Salvar.

Instalando o gadget de redes sociais Opaco para Transparente

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.

<style type="text/css">
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {opacity:1;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
div.sidebar-social-gadget img:hover {opacity:0.2;}
</style>
<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 e clique no botão Salvar.

Pronto, agora basta acessar a página inicial do seu blog e verificar como ficou o gadget. 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.