Gadget menu vertical de ícones sociais para Blogger (Blogspot)

Dar destaque aos seus links de redes sociais é importante para aumentar o alcance de seu blog e ter outros canais de contato com seu público. Um lugar bem visível para exibir seus links e banners é junto ao texto do post, pois é onde está a atenção do seu visitante. Vou mostrar como montar um menu vertical, ocupando pouco espaço com ícones de redes sociais.

O modelo que vou ensinar é como na imagem ao lado e que você pode ver funcionando no meu blog de testes, clicando no seguinte link: Testando Blogger – Artigo de teste.

Até já ensinei outros tipos de menu com ícones sociais aqui mesmo. Todos se baseiam na idéia de alinhas os ícones preferidos com seus links e adicionar onde você preferir, veja:

• Gadget menu de ícones sociais para Blog
• Barra de ícones para redes-sociais e Feed no rodapé dos posts – Blogger
• Como criar menu com ícone de Redes Sociais e outras opções

Segue o tutorial que ensina a colocar esse menu alinhado ao texto de todos os posts de seu blog. Os 4 ícones de redes sociais são: Youtube, Twitter, Flickr e FaceBook. Mas você pode criar algo diferente mudando a imagem dos ícones para outras redes.

Passo 1.

A primeira coisa a fazer é adicionar o CSS que define a posição dos ícones e o plano de fundo. Então abra o painel do Blogger, clique no menu "Layout" (Design) ~> "Editar HTML", lembrando de marcar o "Expandir modelos de widgets".

Então procure pela seguinte linha "]]></b:skin>" e imediatamente ANTES dela, cole esse trecho:

.redes_sociais ul {padding: 20px 3px 10px 7px; background: url(https://ferramentasblog.com.br/imagens/bg_redes_socias.gif) no-repeat; height: 200px; float:left; width:40px;}
.redes_sociais ul li {LIST-STYLE-TYPE: none; DISPLAY: inline; LIST-STYLE-IMAGE: none}
.redes_sociais ul li a {WIDTH: 35px; DISPLAY: block; MARGIN-BOTTOM: 10px}

Passo 2.

Agora, ainda na caixa do código-fonte do seu blog, procure pela seguinte linha (ou algo bem semelhante a isso):

<div class=’post-header-line-1′>

Localizada, vá logo ABAIXO dela e cole o trecho só modificando o que está indicado de vermelho:

<!– Menu vertical inicio –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div style="float:right;padding:4px;">
<div class="redes_sociais">
  <ul>
     <li><a href="URL_CANAL_VIDEO_YOUTUBE" target="_blank"><img src="https://ferramentasblog.com.br/imagens/bg_icon_youtube.gif" alt="Youtube" /></a></li>
     <li><a href="http://twitter.com/SEU_NICKNAME" target="_blank"><img src="https://ferramentasblog.com.br/imagens/bg_icon_twitter.gif" alt="Twitter" /></a></li>
     <li><a href="URL_ALBUM_FLICKR" target="_blank"><img src="https://ferramentasblog.com.br/imagens/bg_icon_flickr.gif" alt="Flickr" /></a></li>
     <li><a href="URL_PERFIL_FACEBOOK" target="_blank"><img src="https://ferramentasblog.com.br/imagens/bg_icon_facebook.gif" alt="Facebook" /></a></li>
  </ul>
</div>
</div>
</b:if>
<!– Menu vertical final –>

Onde está escrito "right" é o que define a posição do alinhamento, no caso à direita do primeiro parágrafo. Se você mudar para "left", então ficará alinhado à esquerda.

As outras linhas destacadas de vermelho são os links de suas redes-sociais.

Outros gadgets interessantes:

• Topsy Twitter – Botão de Retweet para artigos de seu Blog
• Menu com ícones e contadores de artigos, feed, Twitter e comentários para Blogger
• Lista de artigos mais comentados para Blogger Blogspot