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

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.

 

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)

 

• Como criar um Blog no WordPress.org – Começando e instalando

 

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)".

 

 

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:

• Biografia do autor do Blog no rodapé dos posts para WordPress
• Qual a diferença entre Tags e Categorias no WordPress
• Criar lista de posts mais comentados no WordPress.org