Adicione um Mini Pop-up com redes sociais no rodapé de seu blog

Como já citei na anteriormente na artigo 7 maneiras de obter mais tráfego para seu site/blog novo, as redes sociais exercem um imenso poder de ajuda na divulgação e consequentemente gera muito tráfego (visitas) para os blogs.

E nesse post, vou ensinar como colocar um Mini slide Pop-up no rodapé do seu blog, com ícones das redes sociais do qual seu blog faz parte. O efeito desse widget é bastante estiloso, pois ele só aparece quando o leitor rola até o rodapé da sua página.

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Layout".


2°passo: Agora clique em Adicionar um Gadget, e em seguida, selecione a opção "Html/Javascript".

3° passo: Cole o código abaixo no gadget, mas ainda não salve, espere o 4° passo.

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></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> <br /><div id="mbsocial" style="display: none;"><a href="javascript:void(0);" onclick="return closeMBsocial();" style="color: #555555; font-size: 10px; font-weight: bold; position: absolute; right: 10px; top: 14px;">(X)</a> <span style="color: #555555; font-family: Verdana; font-size: 15px; font-weight: bold; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Acompanhe-nos nas redes sociais!</span><br /> <a href="http://www.blogger.com/LINK-PAGINA-FACEBOOK" target="_blank"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2pFMlyS95GkZfMYYjZRQkaNh89puyowdhvk1qdWyewnldoIzJY-Ot_ry2DSj1Eoz1ww9onSv324Q6514xrWpnCRfwUybXLehSxtAcMCmIt4CE6ioEaBHzw2cdZDgjNOwe_KdK6LbWhfT/s1600/Facebook.png" /></a> <a href="http://www.blogger.com/LINK-DO-TWITTER" target="_blank"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjVO2IFHREjuKxV2k-yw8WMOIloNbzHORazNuAV-Z9dxgvS_hYauAKmU5i9ScV1gu0Y6lVDVeiWA9KuwLkhh35MEbUiLFfD8CZOhveV4V2UA5quh_-u9r_HcsCaz3yF9TkWZ6duvHqvb9R/s1600/Twitter.png" /></a> <a href="http://www.blogger.com/LINK-DO-GOOGLEPLUS" target="_blank"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1TteEqjbyikdddG1OJJK5gHpcT-sqYTlc4VYzgE28pqEfXurzpdYWK8Q_qNZvrFt0E1SyRarwunkiJdu7Z2K_rLneMvyOBRT2AM1F4y-tIAyJ50c-9ZR6HONT0t8Dj4ZRLErOjZaHLbM/s1600/Google+Plus.png" /></a> <a href="http://www.blogger.com/LINK-DO-LINKEDIN" target="_blank"><img height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqAZO1vKBhfp5AFy2Of5RHlmHjpmTLdgt64pBtDk6M81y5QC-l4M6fvQ3W3vc5a3Z4fxqTOdDUZoPSr5vOh8cS_0Dzuj6MXIFdNqBq9ijk8M990MFjetJo_HqryVLW1Fw6MRU9bEV2EPEt/s1600/LinkedIn.png" /></a> <br /><div class="getmore"> <a href="http://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>

4° passo: Altere os seguintes trechos com os links de seus perfis nas redes sociais.

Para alterar o link do Facebook localize: LINK-PAGINA-FACEBOOK
Para alterar o link do Google + localize: LINK-DO-GOOGLEPLUS
Para alterar o link do Twitter localize: LINK-DO-TWITTER
Para alterar o link do Linkedin localize: LINK-DO-LINKEDIN

Recomendamos que salve no seu computador, as imagens que foram utilizadas no widget, e hospede-as em seu blog, para evitar que futuros problemas de hospedagem façam com que seu widget pare de funiconar.
Após hospedar os ícones, basta substituir os endereços das imagens referentes a cada ícone.

Este tutorial foi previamente postado no Mundo Blogger, todos os créditos a blogueira Vanessa.

Espero que tenham gostado! Comentem e nos ajudem a melhorar!

Share This :