Widget Mini Popup Slide com redes sociais

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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGUTR2kcku4PZ_qw5SzLFeUB6vTk2AF0s_KR9D4s8hZR9liqTPGiOK4AJFEaoS8xy2VCGfCrXY3jWsOC2dwav1ev5doZeu8tDmf9Oj0Worvjaj6j3N-SC7CP2yE2tUxMMUQgPuKH9uBEOG/s1600/Facebook.png" height="72" /></a> 
<a href="LINK-DO-TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglon_jrmvGLESWPXelrgJkRvqxNxtyIYj8s19Kw77_cZRt7TWqVWOK8NsYycieDjPZd5t9SKIQxOLVT1CbkeGGq9vfZHI-XHyj61asbadGleyP0JGcAxq2lbnXnot4FfRfyYlquPNiLGPn/s1600/Twitter.png" height="72" /></a>
<a href="LINK-DO-GOOGLEPLUS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3rWgUy2Kz5ilw0gNlRs2HeXAfoCHQxBzAnAM3s3VULREf-GzATM_Ypij3Zd46hJc6btcdFcHWAUH5csGAaIDDBbNDsvngVuGTB0skJGub_HdcnWiszKFpNMnFtcCF0OkXEtjykpzHi5dp/s1600/Google+Plus.png" height="72" /></a>
<a href="LINK-DO-LINKEDIN" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2QIW374gVLlBcc3ALinAx16pB3zNt6ZxpPaWG9u6WPWOdOt2VUH_GaK4rzXpSiQy2pRQ5VOhfQueSkJ5ooyy2lPxTcn8nA3JcS1AM4sxuIH39rnsaH0YUisX8JXhDwcaSUwDO7uopQyb9/s1600/LinkedIn.png" height="72" /></a> <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>

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.