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

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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.

 

icones-menu-vertical 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:

 

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:

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

4 Comentários

  1. @Malcolm Teles,

    Esse código até funciona para o WordPress.
    Basta tirar do passo 2 as 3 primeiras linhas e as 3 últimas linhas do código.

    Responder

  2. Marcos Lemos, queria lhe pedir para dar mais destaque ao wordpress, há poucos sites com atualizações frequentes sobre o assunto.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.