Widget para WordPress.org: menu vertical de ícones sociais

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

Widgets de redes sociais e seus ícones e links são muito importantes para a integração de seu blog com seu público alvo e ampliar sua divulgação. Mas muitos deles ocupam espaço importante. Vou ensinar um modelo bem simples com 4 ícones de redes-sociais que ocupa pouco espaço e tem muito destaque junto ao texto do blog.

 

icones-menu-vertical O modelo que vou ensinar você pode ver funcionando no meu blog de testes para WordPress, no seguinte artigo: Teste WordPress: Novo post do Novo Autor.

Fica alinhado à direita do primeiro parágrafo do artigo.

 

O resultado é como está na imagem que colei aqui ao lado e já até ensinei como fazer para o Blogger (Blogspot) também – Menu vertical de ícones para Blogger. a vantagem é que fica junto ao corpo do artigo, local muito visível para o leitor, o que amplia as chances de receber um clique.

 

A primeira coisa a fazer é abrir o editor dos arquivos e funções de seu blog. Basta seguir os passos abaixo e tudo dará certo:

 

(somente p/ WordPress.org com hospedagem e domínio próprio)

 

 

Passo 1.

Abra o painel do seu blog no WordPress e clique no menu "Aparência" ~> "Editor" e procure pelo arquivo "Folha de estilos (style.css)".

 

aparencia-editor-wordpress

 

Vá à última linha do código e cole o seguinte trecho, sem modificar nada:

 

.redes_sociais ul {padding: 20px 3px 10px 7px; background: url(https://ferramentasblog.com.br/imagens/bg_redes_socias.gif) no-repeat; height: 200px; float:right; 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}

 

Salve clicando em "Atualizar arquivo".

 

Passo 2.

Ainda no mesmo menu, agora procure pelo arquivo "Post único (single.php)". Esse é o arquivo que determina tudo o que aparece quando um post (artigo) do seu blog é aberto individualmente. Então é aqui que vamos determinar onde o menu será exibido, junto ao corpo do texto.

 

Procure pela linha que indica o local do título do post. O trecho de código que vamos adicionar precisa ser colocado abaixo da linha do título, mas para cada Theme (layout) é diferente, então você terá que fazer testes.

 

Cole onde for conveniente dentro do código do "Post único (single.php)" o trecho abaixo:

 

<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>

 

Só altere o que está indicado de vermelho colocando o endereço, a URL das suas redes sociais. Então salve o arquivo para que tudo seja aplicado em seu blog.

 

Outros assuntos e Widgets para WordPress:

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ê.

2 Comentários

  1. Marcos,
    obrigado me ajudou muito com esse código, fiz algumas alterações e ficou perfeito para um cliente que estou terminando de reformular o site,
    abraço e sucesso!

    Responder

  2. Pingback: Gadget flutuande de ícones para Redes-sociais no Blog | [ Ferramentas Blog ]

Deixe um comentário

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