Gadget para menu de ícones sociais para Blogger e WordPress

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

É sempre bom manter no layout do seu blog alguns menus e ícones sociais para que seus visitantes saibam como acompanhar seu blog para além de suas páginas. Toda forma de contato com seu público é garantia de fidelização, fazendo-os voltar sempre para ver as novidades. Montei esse pequeno menu com alguns ícones sociais, fácil de inserir e customizar para suas necessidades.

Já ensinei outros modelos de botões para compartilhar seu blog nas redes sociais e recomendo que dê uma olhada neles também:

menu-icones-sociais-basico

A imagem acima serve para ilustrar a proposta desse menu que é facilmente modificável pelo CSS e com alguns testes você pode inserir seus ícones e links preferidos.

Vou mostrar aqui como montar o menu exatamente como está na imagem e que você pode ver funcionando nesse template do Blogger para modelo: ver modelo funcionando no Blogger. Funciona da mesma forma tanto para o Blogger quanto para o WordPress.org.

Use sempre um blog de testes e faça backups antes de modificar qualquer código no seu blog principal:

1. Para colocar no Blogger

O primeiro passo para inserir esse gadget na barra lateral (sidebar) do seu template no Blogger é escolher o lugar que vai aparecer. Vá ao menu “Design” ~> “Elementos da página” e clique em “Adicionar um Gadget” como você já faz normalmente.

adicionar-gadget-blogger-menu

Na janela que abrir você deve procurar pelo elemento “HTML/JavaScript”.

gadget-html-javascript

Dentro da janela que abrir você irá inserir as primeiras linhas de código como descrevo abaixo, só modificando o que está indicado:

<div id="social-widget" class="widget">
<ul class="social">
<li><a href="Endereço_do_FEED"><img src="https://ferramentasblog.com.br/imagens/rss01.png" alt="RSS Feed" />RSS Feed<span>Assine agora!</span></a></li>
<li><a href="URL_página_Contato"><img src="https://ferramentasblog.com.br/imagens/contato01.png" alt=" " />Contato<span>Entre em contato</span></a></li>
<li><a href="URL_do_Twitter"><img src="https://ferramentasblog.com.br/imagens/twitter01.png" alt=" " />Twitter<span>Síga-nos!</span></a></li>
<li><a href="URL_página_Facebook"><img src="https://ferramentasblog.com.br/imagens/facebook01.png" alt=" " />Facebook<span>Curtiu?</span></a></li>
<li><a href="URL_album_Flickr"><img src="https://ferramentasblog.com.br/imagens/flickr01.png" alt=" " />Flickr<span>Nossas Fotos</span></a></li>
<li><a href="URL_canal_Youtube"><img src="https://ferramentasblog.com.br/imagens/youtube01.png" alt=" " />YouTube<span>Assista-nos</span></a></li>
</ul>
<div class="cleaner">&nbsp;</div>
</div>

A linha destacada em negrito indica tudo o que é preciso para exibir a imagem, o link e o texto. Se retirada ou adicionada, servirá para determinar quais elementos você quer exibir em seu gadget. Indicado de vermelho é o lugar onde você deve colocar os endereços dos links para cada ícone.

Salve. Mas ainda não estará totalmente pronto. Falta ainda adicionar o código CSS dentro do código fonte do seu template para que o menu funcione e seja exibido corretamente.

Ainda no menu “Design”, clique no menu “Designer do Modelo”:

design-designer-modelo-blogger

Vai abrir a janela de editar e customizar templates do Blogger. Não mexa em nada. Vá direto ao menu “Avançado” e procure pela opção “Adicionar CSS”. Aí então, como na imagem abaixo, adicione o código CSS para fazer tudo funcionar:

designer-modelo-avancado-CSS-blogger

É nesse espaço que você irá colar o seguinte trecho de CSS sem modificar nada:

.widget { float: left; clear: both; line-height: 1.7; margin-bottom: 15px; width: 100%; }
.widget a { color: #1d4479; }
.widget ul { clear: both; margin: 5px 0; line-height: 1.7; }
.widget ul li { list-style-type: square; padding-left: 10px; }
.widget ul ul { margin: 0; padding: 0; border-top: none; }
.widget ul ul li { border: none; }
.widget .social li { display: inline; width: 47%; float: left; background: repeat-x bottom; padding: 10px 0; margin-right: 7px; line-height: 1.2; }
.widget .social li a { color: #1d4479; font-size: 16px; }
.widget .social li a span { color: #242323; font-size: 12px; display: block; font-style: italic; }
.widget .social img { float: left; margin-right: 7px; }

Salve para ver funcionando em seu Blog o novo menu com todas as características indicadas aqui.

2. Para colocar no WordPress.org

Se você tem um blog no WordPress.org (com domínio e Host próprios), o procedimento é bem simples. Os códigos são os indicados abaixo.

O que irá na barra lateral (sidebar) como um Widget é o código HTML. Só modifique o que está indicado de vermelho. Você pode colar isso direto no arquivo que gera a sidebar ou num widget do tipo “Texto”:

<div id="social-widget" class="widget">
<ul class="social">
<li><a href="Endereço_do_FEED"><img src="https://ferramentasblog.com.br/imagens/rss01.png" alt="RSS Feed" />RSS Feed<span>Assine agora!</span></a></li>
<li><a href="URL_página_Contato"><img src="https://ferramentasblog.com.br/imagens/contato01.png" alt=" " />Contato<span>Entre em contato</span></a></li>
<li><a href="URL_do_Twitter"><img src="https://ferramentasblog.com.br/imagens/twitter01.png" alt=" " />Twitter<span>Síga-nos!</span></a></li>
<li><a href="URL_página_Facebook"><img src="https://ferramentasblog.com.br/imagens/facebook01.png" alt=" " />Facebook<span>Curtiu?</span></a></li>
<li><a href="URL_album_Flickr"><img src="https://ferramentasblog.com.br/imagens/flickr01.png" alt=" " />Flickr<span>Nossas Fotos</span></a></li>
<li><a href="URL_canal_Youtube"><img src="https://ferramentasblog.com.br/imagens/youtube01.png" alt=" " />YouTube<span>Assista-nos</span></a></li>
</ul>
<div class="cleaner">&nbsp;</div>
</div>

Salve. Mas ainda não está pronto. Indicado de negrito é a linha para cada parte do gadget, onde contém a imagem, link e texto. Onde está marcado de vermelho, basta adicionar as URLs para cada serviço.

Agora falta só adicionar o CSS na sua página de estilos. Só modifique se souber o que está fazendo:

.widget { float: left; clear: both; line-height: 1.7; margin-bottom: 15px; width: 100%; }
.widget a { color: #1d4479; }
.widget ul { clear: both; margin: 5px 0; line-height: 1.7; }
.widget ul li { list-style-type: square; padding-left: 10px; }
.widget ul ul { margin: 0; padding: 0; border-top: none; }
.widget ul ul li { border: none; }
.widget .social li { display: inline; width: 47%; float: left; background: repeat-x bottom; padding: 10px 0; margin-right: 7px; line-height: 1.2; }
.widget .social li a { color: #1d4479; font-size: 16px; }
.widget .social li a span { color: #242323; font-size: 12px; display: block; font-style: italic; }
.widget .social img { float: left; margin-right: 7px; }

Salvando você já verá funcionando em seu blog normalmente.

Outros gadgets e menus para Blog:

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

19 Comentários

  1. Marcos,
    será possível apresentar uma lista dos artigos mais populares, tendo em conta a quantidade de cliques em “gosto” (curtir)?

    abraço e obrigado

    Responder

  2. Mas um vez venho aqui comentar dizer que graças a mas um post seu tutorial eu conseguir deixa meu template mas agradavel e com um menu de icones muito bom valeu ferramentas blog.

    Responder

  3. vlw estou construindo meu site no wordpress e esta sua dica me foi muito util para criar um menu de navegação rápida valeu emsmo gostei

    Responder

  4. Adicionei, mas ele não se adaptou à barra lateral como mostrado no exemplo (ficaram na vertical). Além de modificar a visualização das abas das páginas e criar uma divisória entre entre o nicho de postagens e da barra lateral que chegou até à imagem do cabeçalho… :/ tive que excluir mais por causa disso….

    Responder

  5. Já vasculhei várias dicas de menu para as redes sociais e quase sempre me deparo com o botão do twitter desatualizado (“t”). A política de botões do site oferece um modelo padrão e muitos esquecem de verificar isso. Para quem já pegou as manhas desses códigos é só salvar o botão correto e hospedá-lo para trocar no lugar indicado. Mas acho que seria bom para os que prestam ajuda aos blogueiros deixarem isso atualizado, até para não entrar em conflito com a política dessa rede social. No mais, deixa aproveitar para dizer que gosto muito do FERRAMENTASblog, já me quebrou alguns galhos, hehehehe.

    Responder

Deixe um comentário

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