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

.

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.