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

Códigos e Scripts Redes Sociais Vanessa S.

Widget mini popup slide com redes sociais no rodapé do blog

Widget mini popup slide com redes sociais. Já sabemos que as redes sociais possuem um grande poder e ajuda muito a aumentar o seu tráfego.
Hoje veremos como adicionar uma pequena popup no rodapé do blog com ícones para as redes sociais que seu blog participa.
Esse widget irá ajudar os seus visitantes a permanecer conectado com você e seu blog.

Mas antes gostaria de indicar um artigo. Aprenda tudo sobre Hotmart clicando aqui.

Widget mini popup slide com redes sociais

Demo

A instalação é bem simples. Vejamos a seguir:

Como instalar Widget mini popup slide com redes sociais

Acesse o painel do blogger e vá ao menu “layout”, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mbsocial").show("slow");else $("#mbsocial").hide("slow");});function closeMBsocial(){$('#mbsocial').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script> 
<style> #mbsocial{background:#f3f3f3;border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:100px;} .getmore a{display: inline-block;font-weight: normal;text-decoration: none;font-size:9px;color:#333!important; float:right;} .getmore a:visited{ color:#ddd;}</style>   <div style="display: none;" id="mbsocial"> <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBsocial();">(X)</a> <span style="font-family: Verdana; font-size: 15px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;font-weight:bold;color:#555;">Acompanhe-nos nas redes sociais!</span><br />

 <a href="LINK-PAGINA-FACEBOOK" target="_blank"><img src="http://1.bp.blogspot.com/-FXL0E6RnH08/UQminUAsaGI/AAAAAAAAAN8/j4gToU0zdFo/s1600/Facebook.png" height="72" /></a> 
<a href="LINK-DO-TWITTER" target="_blank"><img src="http://3.bp.blogspot.com/-pxKhNAQi0EQ/UQmin2KcESI/AAAAAAAAAOI/GzwWqcLfoQI/s1600/Twitter.png" height="72" /></a>
<a href="LINK-DO-GOOGLEPLUS" target="_blank"><img src="http://4.bp.blogspot.com/-Kwl0hnNDjws/UQmioQGP4_I/AAAAAAAAAOU/DExWUDguX_0/s1600/Google%2BPlus.png" height="72" /></a>
<a href="LINK-DO-LINKEDIN" target="_blank"><img src="http://2.bp.blogspot.com/-Amr9foLL3Z0/UQmkRUPpCbI/AAAAAAAAAOg/wMNUe5Ey1uw/s1600/LinkedIn.png" height="72" /></a> <div class="getmore"> <a href="https://www.mundoblogger.com.br/2013/01/widget-mini-popup-slide-com-redes-sociais-no-rodape-do-blog.html" target="_blank">Instale este gadget</a> </div> </div>
 <div class='clear'></div>

 
Não esqueça que você deve ALTERAR os trechos destacados, incluindo os links das suas redes sociais.
Recomendo que salve no seu pc, as imagens que utilizei neste widget, e hospede-as no seu blog, para evitar eventuais problemas de hospedagem e os ícones saírem do ar.

Após hospedar os ícones, basta substituir os endereços das imagens referentes a cada ícone.

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.

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

28 Comentários

  1. Farley disse:

    Boa noite, após instalar em meu blog os slides param de funcionar. Porque??? É possivel corrigir este erro??? Ainda estou em faze final para finalizar o blog, gostaria de uma solução. Obrigado.

  2. Paulo disse:

    Eu bloqueio todas essas porcarias no Opera e no Chrome, todos esses widgets e demais scripts. Deixam a página lenta e distraem o visitante.
    Sei que os blogueiros precisam se sustentar, mas não deveria ser desse modo, agredindo as pessoas com banners saltitantes, gigantescos e obrigando a receber um clique no X para se poder ler a página.
    Respeite pra ser respeitado(a). Enquanto isso, mantenho o bloqueio. Não ganham nem um centavo de mim.

  3. Rebeca disse:

    OI Vanessa, sabe aquele coração de likes (ou amaram) nos posts dos blogs? Como eu coloco?
    Obrigada!!
    Rebeca

  4. Clau,estou levando.
    Obrigada,bjs

  5. obrigado por deus certo caiu muito bem em meu blog, muito obrigado Vanessa. no total tenho 12 blogs
    Abraço!

  6. Felipe Bernardo disse:

    Olá vanessa,esses seus artigos estão me ajudando e muito,mas eu tenho um pedido a fazer,queria ver algum artigo explicando bem como adicionar EQUIPE no blogger,tipo,funções e etc.

  7. Janaína disse:

    Gostei muito, espero que dê certo! Obrigada por compartilhar, estareilendo mais artigos =)

  8. Christiane disse:

    Gostaria de icone do youtube

  9. Vanessa estou levando.
    Se eu não gostar volto para pegar os botões fixos canto da página.
    Obrigada por partilhar.bjs

  10. Mil Coisas disse:

    Ola vanessa, tem me ajudado imenso com o seu blog, inclusive o menu dropdown que graças a si consegui fazer o que queria no meu blog e adorei a ideia deste widget, mas gostaria que me dissesse onde vou buscar o Link no googleplus e Linkedin :/

    Obrigada

  11. Mineiro Belo Horizonte disse:

    TOtalmente funcional, mas gostaria de saber se existe algum tipo de limitacao quanto as modificacoes ja feitas no template.

    O motivo da pergunta é porque quando insiro o codigo acima ja alterado com os dados de minha rede por um gadget um outro Gadtet para de funcionar..

    O outro é apresetacao de Slides… Sabe me dizer o que pode ser???

    No caso estou tento que optar ou um ou outro..

    • Vanessa disse:

      Esse gadget se utiliza de javascript para funcionar, assim como o seu slide. Recursos que funcionam a base de arquivo javascript a sua funcionalidade pode variar de acordo com o template. Templates que possuem muitos scripts, acabam gerando “conflitos” entre si.

  12. paulo dias disse:

    Oi Vanessa.

    recentemente criei um script para mostrar os posts do mês em um calendario. Algo como postagens recentes, mas em forma de calendario.
    você pode ver um exemplo.
    se tiver interesse me avise que te mando o codigo

  13. Lucas disse:

    Muito bom o post! como dizia um amigo meu Gradei demais !! meu blog tem pouco tempo de vida! e ando pesquisando ferramentas pra melhora-lo o máximo que posso!! valeu Vanessa!

  14. Das disse:

    Oi, querida!
    Tudo bem?
    Adorei esse widget, muito fofo!
    Quando coloquei no meu blog apareceu uma segunda linha! O quarto quadrinho ficou embaixo.
    Só alterei o que era pra alterar…
    Você tem alguma ideia do que aconteceu?
    Bjinhos!
    Dani

  15. Claudio Silva disse:

    Oi, Vanessa. Você poderia me ajudar criando um código para Facebook, Twitter, Google + e Youtube? Grato

  16. Diêgo Worsh disse:

    Porque está aparecendo Instale esse gadget ?

    • Vanessa disse:

      São os créditos.Pq da mesma forma que eu disponibilizei o gadget aqui no blog para que todos possam instala-los e usa-los, eu inclui o link para o tutorial para que outras pessoas tb possam instala-lo se quiser. Achei melhor colocar assim do que colocar o famoso “By XXXX”

  17. Guilherme disse:

    Tem como fazer ele aparecer antes da metade da página?

  18. Juliano Sousa disse:

    Muito legal o Widget, caiu muito bem em meu blog, muito obrigado Vanessa.
    Abraço!

  19. Marco disse:

    Olá Vanessa,
    Teria como você disponibilizar uma pop up no estilo dessa que abre quando chega no final da página, só que com outros artigos do blog?
    Valeu

  20. Gostei bastante, um belo widget que ajuda e muito o site/blog. Agradeço por compartilhar o gadget conosco.

  21. Kratos disse:

    Ficou muito legal, achei bem bonito. Uma pena que tive que retira-lo, ele entro em conflito com meu topo em slide. Em falar nisso estou usando outra dica suas (Box com Biografia do autor) Grato pelas dicas.

    • Vanessa disse:

      Sim, é verdade, alguns scripts entram em conflito entre si. E qdo ocorre, só resta escolher qual recurso é mais essencial. 🙂

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