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.
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.
Vanessa S.
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.
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.
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.
OI Vanessa, sabe aquele coração de likes (ou amaram) nos posts dos blogs? Como eu coloco?
Obrigada!!
Rebeca
Clau,estou levando.
Obrigada,bjs
obrigado por deus certo caiu muito bem em meu blog, muito obrigado Vanessa. no total tenho 12 blogs
Abraço!
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.
Gostei muito, espero que dê certo! Obrigada por compartilhar, estareilendo mais artigos =)
Gostaria de icone do youtube
Vanessa estou levando.
Se eu não gostar volto para pegar os botões fixos canto da página.
Obrigada por partilhar.bjs
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
É o link do seu perfil no Linkedin e do seu perfil no Google+
bom dia Vanessa, você pode me ajudar ??, o slide de postagem do meu blog travou (como posso entrar em contato ?)
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..
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.
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
Se puder enviar, eu agradeço sim.
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!
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
Oi, Vanessa. Você poderia me ajudar criando um código para Facebook, Twitter, Google + e Youtube? Grato
Eu já ando testando alguma coisa…assim que der certo, eu publico.
Porque está aparecendo Instale esse gadget ?
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”
Tem como fazer ele aparecer antes da metade da página?
Muito legal o Widget, caiu muito bem em meu blog, muito obrigado Vanessa.
Abraço!
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
Gostei bastante, um belo widget que ajuda e muito o site/blog. Agradeço por compartilhar o gadget conosco.
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.
Sim, é verdade, alguns scripts entram em conflito entre si. E qdo ocorre, só resta escolher qual recurso é mais essencial. 🙂