Gadget menu de ícones sociais para Blog

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

Nunca é demais pensar em formas de disponibilizar seus contatos em redes-sociais para ajudar na fidelização de seu público leitor. Os ícones em forma de menu são importantes para compor o layout do blog, são visualmente agradáveis e as pessoas os reconhecem facilmente. Vou mostrar como montar um menu bem simples e prático para qualquer blog, um gadget muito elegante.

 

botoes-icones-sociais

 

A imagem é só pra ilustrar, mas você pode ver funcionando no meu blog de testes, Testando Blogger (clique aqui), no topo da barra lateral. O legal desse menu é que passando o mouse sobre ele, destaca-se o elemento. Eu vi funcionando em algum blog e peguei no código fonte, mas não sei qual. Se alguém souber, me avise.

 

Funciona bem no Blogger (Blogspot), mas acho que deve funcionar no WordPress.org sem problemas, mas não testei. Se alguém testar, me avise.

 

Como adicionar o Gadget em seu blog.

 

Parte 1: Adicionando o CSS.

A primeira coisa a fazer é instalar o código que faz tudo funcionar. Para isso, abra o painel do Blogger, clique no menu "Layout" (Design) ~> "Editar HTML" e procure pela seguinte linha no código fonte:

 

]]></b:skin>

 

Imediatamente ANTES disso, cole o seguinte trecho, sem mudar nada:

 

/* subscribe widget */

.subscribe_icons {
    width:286px;
    height:auto;
    margin:0px auto;
}
.subscribe_icons li {
    display:inline;
    float:left;
    margin:0px 2px 5px 2px;
    width:52px;
    text-align:center;
    font-size:11px;
}
.subscribe_icons a {
    display:block;
    padding:40px 0px 2px;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    color:#444 !important;
}
.subscribe_icons a:hover {
    color:#369 !important;
    text-decoration:none;
    -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);
    -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);
}
.subscribe_icons .subscribe_buzz a {
    background:url(https://ferramentasblog.com.br/imagens/icon-buzz.png) center top no-repeat;
}
.subscribe_icons .subscribe_twitter a {
    background:url(https://ferramentasblog.com.br/imagens/icon-twitter.png) center top no-repeat;
}
.subscribe_icons .subscribe_facebook a {
    background:url(https://ferramentasblog.com.br/imagens/icon-facebook.png) center top no-repeat;
}
.subscribe_icons .subscribe_rss a {
    background:url(https://ferramentasblog.com.br/imagens/icon-rss.png) center top no-repeat;
}
.subscribe_icons .subscribe_email a {
    background:url(https://ferramentasblog.com.br/imagens/icon-email.png) center top no-repeat;
}

 

Salve o modelo.

Isso não mudará nada em seu blog e não afetará nada. Serve para serem chamados pelo código HTML do menu que vamos criar. Então esse é o próximo passo.

 

Passo 2: Adicionando o Gadget na Sidebar.

agora vamos adicionar o gadget na barra lateral do seu blog. Do mesmo modo que você adiciona qualquer outro é assim que faremos aqui. Abra o menu "Layout" (Design) ~> "Elementos da página" e clique em "Adicionar uma gadget". Então escolha a opção "HTML/Javascript". Se não sabe todo esse passo, veja o seguinte tutorial: Onde colar código HTML no Blogger.

 

Dentro desse elemento cole o seguinte trecho fazendo apenas as mudanças indicadas:

 

<div>
<ul class="subscribe_icons">
   <li class="subscribe_buzz"><a href="LINK_PERFIL_GOOGLE_BUZZ" rel="nofollow" target="_blank">Buzz</a></li>
   <li class="subscribe_twitter"><a href="http://twitter.com/SEU_NICK" rel="nofollow" target="_blank">Twitter</a></li>
   <li class="subscribe_facebook"><a href="LINK_PERFIL_FACEBOOK" rel="nofollow" target="_blank">Facebook</a></li>
   <li class="subscribe_rss"><a href="URL_ASSINAR_FEED" rel="nofollow" target="_blank">FEED</a></li>
   <li class="subscribe_email"><a href="URL_PAGINA_CONTATO_do_BLOG" rel="nofollow" target="_blank">Contato</a></li>
</ul>
</div>

 

Onde está marcado de vermelho, coloque suas informações para o funcionamento dos links. Salve e mova o gadget para onde for mais conveniente. Recomendo o início da sidebar, perto do mecanismo de pesquisa do seu blog.

 

Depois disso é só abrir seu blog e ver funcionando.

 

Outros Gadgets para seu 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ê.

12 Comentários

  1. Muito bom os ícones, gostei muito, até iria usar ele, mas felizmente fiz outro dia um no fotoshop, mas este é muito bom de verdade, mas ele não cabe na barra lateral, vou tentar arrumar, um abraço, parabéns pelo ótimo post!

    Responder

  2. Muito bom!Mesmo eu,que comecei (a tentar…)fazer um blog essa semana,consegui por o menu no lugar certo,e só sofri durante uma meia hora,apesar de ser um noob completo!

    Responder

  3. Marcos,

    Mais uma dica excelente!
    Achei bem bacana mesmo. Há dias queria colocar o Buzz.
    A única dificuldade que estou enfrentando é que não estou conseguindo tirar uns pontinhos que aparecem antes de cada ícone, o que faz com que o último ícone fique abaixo dos outros. Além de ficar feio.
    Estou fuçando no HTML para ver se resolvo isso. Esses pontinhos aparecem antes das listas de links também, só que nelas tenho a possibilidade de retirar.
    De qualquer forma, valeu pela dica!

    Abraços

    Responder

  4. Marcos, tem como você disponibilizar o código da caixa para receber o artigos por email? ja procurei por todo lado e so achei uma em pop-up.

    Responder

  5. Sempre que procuro alguma ferramenta para o meu Blog o Ferramentas Blog é o primeiro blog que vem a minha mente. Parabéns. Mais sucesso e saúde.

    Responder

  6. Olá, Marcos.
    Eu gostei muito desse gadget e gostaria muito de usá-lo no meu blog, então o coloquei lá e tirei a parte do Twitter e Google Buzz porque eu não uso. O problema é que aparece tudo ok, mas ele fica cortado na parte de contato. Acho que é o template que uso. [Link Suprimido]
    Já tentei comentar lá, mas não consigo. Como é que eu faço para ultilizar esse gadget sem que ele seja cortado pela minha sidebar? Muito Obrigado.

    Responder

    • Sua sidebar não tem largura suficiente, por isso corta um pedaço do ícone. Só cabem 2 ícones por linha. Ou vc muda a largura da sidebar ou coloca só 2 ícones.

      Responder

      • Aumentei o tamnho da sidebar e deu certo. Esse gadget é muito bonito e… ah! eu tenho uma sugestão para ele: que ele tenha link para Newsletter, com a imagem de um arroba (@) para diferenciar da do contato, mas que o design continue o mesmo porque ele é muito bonito assim, então é só acrescentar o Newsletter nesse gadget. Ficaria melhor porque ele seria um gadget mais completo.
        Obrigado!

        Responder

Deixe um comentário

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