Widget Popup com redes sociais - Como instalar

Widget Popup com redes sociais - Como instalar

Esse código é extremamente simples de instalar e requer poucas implementações.

Veja como fica.

Em primeiro lugar você deve copiar o código abaixo para um bloco de notas.

-------------------------------------------------------------------------------------

<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:310px;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/AVvXsEjfoq4hlK4gBzhaGkiFLYvTPyu8OeJN9UDOFbsPc4PmYHZ_djIjYBugRBu8aRFYVcVtL0aElkHl7QKotsVMYflQMm9HhpNsEB9OBW4ungT4eoSlCtBecVvrf-6egC7pArldcclUfyFS1BI/s0/facebook_128.png" height="72" /></a>
<a href="LINK-DO-TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0XA4yKudkj8qdXgsSOzLZc8jvFEJxngl2QuX86Zmk7td0HRMd2EL4-wZfwqYoo-ErQD2XFCeyYo22lOmG4BupSgBncrsr3s7ARq2-xjZMWjJmgI5-TX5XfP1IDWbuJ2CVBnN55btumDg/s0/twitter_128.png" height="72" /></a>
<a href="LINK-DO-BLOGGER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFczT90iNK82HQVlkn4EAZDCKibdyy9EzH9dtJJ1_edXN1q7LLlggurXwDofC11hSQALMZQFV_SNjTs3sCF6j8-xJfHmijCYUiKuInfQk8YvjVtmGmMzElEKj3zpVwUA7fekSIq3RfLyc/s16000/blogger_128.png" height="72" /></a>
<a href="LINK-DO-LINKEDIN" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetRWi4ICzexc5Jksk5tIItREybM6gIhr-h8CeYLvQNwbXc-0yqjsXX8mnYsMZdPS6blKTZeEtmf4wpWmAuVSE_7-DpfvdEJ9BRv8565RZtiZ4VS8rdAwK9sEgvjYbd0X0W9bYCayvYJs/s0/linkedin_128.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>

-------------------------------------------------------------------------------------

Em seguida substitua os endereços de suas redes sociais nas áreas marcadas em vermelho.

Agora vem a parte um pouco mais trabalhosa. Você deve, por medida de segurança, salvar todas as imagens dos ícones em seu computador e depois hospedar para qualquer lugar de sua preferência. Até mesmo no próprio blog.

Porque isso? Simples! Se você usar os endereços que estão no código, se eu cismar de retirar meu popup do blog, seus ícones simplesmente desaparecerão.

Salvando seus ícones você poderá usar mesmo que eu acabe com o meu popup.

Depois disso é só acessar o painel do blogger e, no menu “layout”, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole seu código.

Um abraço.