Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502920770
Vida do cache: 1502963970
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Redes Sociais Widget

Gadget ícones flutuantes para redes sociais

Com este gadget você pode incluir botões para as redes sociais que você participa, desta forma estará divulgando aos seus leitores e convidando-os a acompanhar você ou o conteúdo do seu blog nas redes sociais.
Eu já publiquei um tutorial ensinando a instalar um Icone de Feed Flutuante no blog, e agora veremos como instalar vários outros ícones flutuantes para as redes sociais.
Os ícones aparecem fixos no blog, no canto esquerdo.

Para instalar este gadget, clique no menu “Layout“, clique em “adicionar um gadget” (pode ser em qualquer lugar), escolha o modo “HTML/javascript” e cole o seguinte código:


<a href="LINK-FEED" style="position: fixed; left: 2px; top: 100px;" target="_blank">
<img border="0" heigth="48" src="ICONE-FEED" title="Assinar Feed" width="48" /></a>

<a href="LINK-TWITTER" style="position: fixed; left: 2px; top: 150px;" target="_blank">
<img border="0" heigth="48" src="ICONE-TWITTER" title="Siga-nos" width="48" /></a>

<a href="LINK-FACEBOOK" style="position: fixed; left: 2px; top: 200px;" target="_blank">
<img border="0" heigth="48" src="ICONE-FACEBOOK" title="Facebook" width="48" /></a>

<a href="LINK-GOOGLE-BUZZ" style="position: fixed; left: 2px; top: 250px;" target="_blank">
<img border="0" heigth="48" src="ICONE-GOOGLE-BUZZ" title="Google Buzz" width="48" /></a>

<a href="LINK-YOUTUBE" style="position: fixed; left: 2px; top: 300px;" target="_blank">
<img border="0" heigth="48" src="ICONE-YOUTUBE" title="Youtube" width="48" /></a>

<a href="LINK-MYSPACE" style="position: fixed; left: 2px; top: 350px;" target="_blank">
<img border="0" heigth="48" src="ICONE-MYSPACE" title="MySpace" width="48" /></a>

<a href="LINK-ORKUT" style="position: fixed; left: 2px; top: 400px;" target="_blank">
<img border="0" heigth="48" src="ICONE-ORKUT" title="Orkut" width="48" /></a>

Acrescente no código, os links e as urls dos ícones das redes sociais, nos locais indicados.
Os ícones que eu utilizei na imagem demonstrativa fazem parte do pacote de ícones – BlackColors criados por mim.
Se você quiser utiliza-los, recomendo que faça download, e hospede-os no seu site preferido (recomendo o Picasa Web ), para evitar eventuais problemas de hospedagem e os ícones saírem do ar.
Após hospedados os ícones, basta incluir os endereços das imagens referentes a cada ícone.
Se for utilizar outros ícones, utilize imagens com tamanho de 48×48.

Se você quiser retirar alguma rede social que consta no código, basta apagar o código correspondente a ela. E se quiser acrescentar mais alguma, copie o código abaixo:


<a href="LINK-AQUI" style="position: fixed; left: 2px; top: 450px;" target="_blank">
<img border="0" heigth="48" src="URL-DO-ICONE" title="NOME-DA-REDE-SOCIAL" width="48" /></a>

E acrescente-o no código logo após o código do último ícone, fazendo as edições necessárias do ícone,título, link para rede social que você está acrescentando, É muito importante que você ajuste o valor em:
top:450px; –> Distância da imagem para o topo.

Acrescente +50px a cada ícone que você for incluir.
Por exemplo:
Se for incluir mais 2 ícones:
o 1º -> “top:500px
o 2º -> “top:550px
Se você não ajustar esses valores os ícones ficarão desconfigurados e depois não adianta voltar aqui reclamar que não deu certo, ok? 😉



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

56 Comentários

  1. Bruno disse:

    Valeu Mesmo ! Muito boa explicação

  2. marcos disse:

    me ajude , nao to conseguindo deletar esse widget. como faço?

  3. Rodney disse:

    Olá, minha esposa tem o Blog acima e está querendo colocar os ícones das redes sociais abaixo de cada artigo postado, e não está conseguindo. Gostaria que você nos orientasse. Obrigado e parabéns pelo blog.

  4. Mudei de template e esse gadget que tanto amei deixou de funcionar. O que acontece é que quando passo o cursor do rato/mouse, ele não faz nada. Não deteta o link que está lá. Mas a imagem está visível. Não sei o que está errado. Fiquei desapontado por isso pois achei que seria simples a mudança e não foi.

    • olá Ismael, se a imagem da rede social está lá mas não faz nada é porque vai precisar ir no HTML do template e preencher com o o endereço da sua rede social correspondente. Não é dificil. Assim que for em modelo >> html^aperte CTRL+F e faça uma busca como face, twitter ou algo do tipo, se não achar vá com paciência procurando lentamente e insira o seu endereço da rede no local indicado. Eu teria que conhecer seu template melhor mas basicament é isso fiz isso no meu e deu certo, mudo de template sempre e consigo sempre fazendo isso!!!!

  5. Rebeka Aguiar disse:

    Olá eu gostei muito e me ajudou, mas ficou muito longe, como eu faço pra ficar um embaixo do outro? Beijos

    • Vanessa disse:

      Todos os trechos top:XXXpx se refere a distância de uma imagem para outra. Vc terá que alterar cada um, por sua própria conta e ir testando.

  6. Ramon disse:

    A imagem no meu blog não está funcionando

  7. Nenvi disse:

    Não deu conflito com a parafernalha toda que tem no meu código…
    Gostei muito!

  8. Mayara disse:

    Que legal, super explicado. Ficou lindo.

  9. Sonia Regina disse:

    Puxa os ícones são lindos mais não sei porque não aparecem em meu blog!

  10. .:: Nessa ::. disse:

    Nara:
    Com a mudança do painel do Blogger, a sessão "Design" passou a ser o menu "Layout". Já atualizei o post.

  11. Nara Nascimento disse:

    nao achei o "adicionar um gadget", na seção Design =/

  12. .:: Clau ::. disse:

    Potter
    Se existe, eu não conheço.

  13. Potter disse:

    Existe uma widget para o blogger que mostre quantos membros tem uma determinada comunidade do Orkut?

  14. .:: Clau ::. disse:

    Mauricio
    Sim, este eu não inclui créditos, pq não ia ter nem onde coloca-los..rs

  15. Maurício Ouyama disse:

    Oi..estou testando o seu código, parece que está tudo certo. Mas não aparece os créditos do seu blog (era para ficar assim mesmo?) Um abrç

  16. Marcos Paulo disse:

    Otimo Tutorial Como Sempre 😉

  17. Nany disse:

    Oi, Clau!
    Amei o post, foi muito útil!!

  18. .:: Clau ::. disse:

    Caio
    Tem o tutorial aqui neste post:
    Botões AddThis com icones personalizados.
    Obrigada pela visita 😉

  19. Caio disse:

    Olá clau;
    Estou com uma duvida, queria que você ( se poder ) me ajudar numa opção de redes sociais, eu estava lendo uma postagem sua e vi no seu blog de testes, link: http://eutestoblog.blogspot.com/
    Abaixo das postagens.. tem aquelas redes sociais.. Como faz para colocar elas..
    Se poder me responda
    Agradeço desde já.

  20. Samanta disse:

    OLá !!!

    Como sempre o seu método e a sua explicação são as mais simples, práticas e mais eficientes que acho pela Internet !!!
    Obrigada por compartilhar, coloquei e amei !! só passei pro lado direito porque tenha decoração do lado esquerdo, mas amei !!

    Um beijo e bom fim de semana !!

  21. Kellynha disse:

    Otima dica, mto legal.eu adoreiiii
    tava procurando e aqui achei tudo bem explicadinho!!
    Obrigada

  22. Erneston_gf disse:

    Como sempre: Ótima dica… Muito obrigado!

  23. agnaldo disse:

    já conseguir arrumar Clau OBRIGADO MESMO ASSIM

  24. agnaldo disse:

    clau eu coloquei tudo certinho e os icones só funcionam quanod estou no topo da página quando desço um pouco eles não uncionam mais o que pode ser isso?
    pinguinsdeverao.com olha

  25. Priscila Rodrigues disse:

    Olá,

    Eu procurei e tentei de todas as formas colocar esses ícones, e vc foi a unica que me ajudou. Ficou perfeito, obrigada..

    Parabéns pelo blog e pelas dicas…

  26. #Mateus™ disse:

    oi, é possivel add varios links??

  27. .:: Clau ::. disse:

    Verdinho
    Obrigada pela ajuda, valeu 😉

  28. Verdinho disse:

    Tem sim Samuel, e' so' editar o trecho: style="position: fixed; left e mudar a palavra LEFT para RIGHT.

    Amei esta dica. Você e' o máximo Clau. já adicionei ao meu blog.

  29. samuel hanã disse:

    tem como fazer pra eles fkarem do lado direito?

  30. Mp3 Samba e Pagode disse:

    nao teria um desses mais pra compartilhamento?…abraços

  31. Mp3 Samba e Pagode disse:

    boa noite…vc nao tem um desses flutuantes que se ja pra compartilhamento?…estou atras e nao acho de jeito algum…mt bom esses

    vlww

  32. Carol Sena disse:

    aaah, conseguir :)
    você está de parabéns…
    bjus;*

  33. Carol Sena disse:

    Oie, oh, adoreii…
    mais só uma duvida…
    no meu blog não apareceu os icones;
    podes me explicar o pke?
    http://caroliinesena.blogspot.com/

  34. Luis Marcos Leite disse:

    Parabéns. Funciona direitinho e ainda dei uma arrumada para ficar na horizontal.

  35. Blog do Netão disse:

    Ola Clau!! Muito bom sua dica!! coloquei no BLOG DO NETÂO!! Só me enrrolei um pouco quando fui tirar uma rede social e tive que mudar a distancia para os botoes ficarem proximos! Parabéns pelo blog e faz uma visita la no BLOG DO NETÂO, sera uma honra receber uma visita de uma blogueira tão ilustre!!

  36. .:: Clau ::. disse:

    Fabiano
    Obrigada pelo aviso. "Kibador" devidamente denunciado! =D

  37. mensagenspublicas disse:

    Aí está mais um tutorial super interessante.. =)

    Valeu mesmo..

    Aqui não falta de nada para o blog, se existe está aqui..hehe =)

  38. Dr. Bueno Almeida disse:

    Adorei esse post e já acrescentei esse benefício no meu blog. Muito obrigado Clau.

  39. eRike sOuza disse:

    ótimo Post . Continue assim que vão mais Longe

  40. silas disse:

    Oi tudo bem?Sempre dou uma passadinha por aqui…mais nunca tinha deixado um comentario…seus atigos são muito bons…realmente este gadget com icones flutuantes fica muito legal e é bem facil de colocar.
    Coloquei em todos meus blogs…obrigado valeu…sucesso com seu trabalho…até mais

  41. .:: Clau ::. disse:

    Mega Entretenimento,
    Maurinei

    Obrigada! Voltem sempre!

  42. Maurinei Tumenas disse:

    Acabei de conhecer seu blog e achei muito interessante e instrutivo, parabéns e obrigado pelas dicas!!

  43. Mega Entretenimento disse:

    Obrigado Clau.
    Eu estava procurando por esse "menu" a uns tempos.
    Já fiz algumas modificações e implantei no meu blog.
    Obrigado pelos tutoriais!
    Sucesso para vc.

  44. .:: Clau ::. disse:

    Kevvin,
    Annekira

    Obrigada!

  45. AnneKira disse:

    Adoro suas tutoriais Clau!
    Você está cada vez mais criativa *_*
    ;-*

  46. Kevvin Oliveira disse:

    Dica legal! A um tempinho que estava procurando isso =)

  47. .:: Clau ::. disse:

    Max
    Bem fácil mesmo,né?
    Obrigada pelo comentário querido 😉

    ???????
    Dá sim, é só usar a imaginação. =D

  48. ??????? disse:

    Ahhhhh!!! Serve tbm como um menu nee!?
    Se eu quiser colocar icones de Menu/Sobre/Contato tbm vale nee!?

  49. ??????? disse:

    Ai ai
    Nao me canso de ler esse site *—*

  50. Max Martins disse:

    Oi, Clau

    Ótima dica e simples de instalar.
    Gostei muito dos ícones também.

    Abraços

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.