Tutorial:  Pop-up com rede sociais no rodapé do blog
Autor: Wendy Chan | Publicado: 2017-08-06T00:13:00-03:00






Ohayoooo bunnie's? Hoje venho trazer um Widget pop-up com rede sociais no rodapé do blog, uffa nome longo... é isso ai. Quando o leitor rolar a pagina um pouco abaixo, ele vai aparecer no canto do blog, no intuito da pessoa seguir o blog nas redes sociais. Nessa postagem é possível ver o resultado rolando um pouco abaixo. Ele é muito fácil de aplicar; pode editar os ícones e cores do pop-up;

Para adicionar o Widget, vá em Layout, abra um novo Gadget Java/Script &nbsp;e dentro cole:


&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;$(window).scroll(function(){if($(document).scrollTop()&gt;=$(document).height()/4)$("#mbsocial").show("slow");else $("#mbsocial").hide("slow");});function closeMBsocial(){$('#mbsocial').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}&lt;/script&gt;
&lt;style&gt; #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;}&lt;/style&gt; &nbsp; &lt;div style="display: none;" id="mbsocial"&gt; &lt;a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBsocial();"&gt;(X)&lt;/a&gt; &lt;span style="font-family: Verdana; font-size: 15px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;font-weight:bold;color:#555;"&gt;Acompanhe-nos nas redes sociais!&lt;/span&gt;&lt;br /&gt;
&nbsp;&lt;a href="LINK-PAGINA-FACEBOOK" target="_blank"&gt;&lt;img src="http://1.bp.blogspot.com/-FXL0E6RnH08/UQminUAsaGI/AAAAAAAAAN8/j4gToU0zdFo/s1600/Facebook.png" height="72" /&gt;&lt;/a&gt;
&lt;a href="LINK-DO-TWITTER" target="_blank"&gt;&lt;img src="http://3.bp.blogspot.com/-pxKhNAQi0EQ/UQmin2KcESI/AAAAAAAAAOI/GzwWqcLfoQI/s1600/Twitter.png" height="72" /&gt;&lt;/a&gt;
&lt;a href="LINK-DO-GOOGLEPLUS" target="_blank"&gt;&lt;img src="http://4.bp.blogspot.com/-Kwl0hnNDjws/UQmioQGP4_I/AAAAAAAAAOU/DExWUDguX_0/s1600/Google%2BPlus.png" height="72" /&gt;&lt;/a&gt;
&lt;a href="LINK-DO-LINKEDIN" target="_blank"&gt;&lt;img src="http://2.bp.blogspot.com/-Amr9foLL3Z0/UQmkRUPpCbI/AAAAAAAAAOg/wMNUe5Ey1uw/s1600/LinkedIn.png" height="72" /&gt;&lt;/a&gt; &lt;div class="getmore"&gt; &lt;a href="http://www.mundoblogger.com.br/2013/01/widget-mini-popup-slide-com-redes-sociais-no-rodape-do-blog.html" target="_blank"&gt;Instale este gadget&lt;/a&gt; &lt;/div&gt; &lt;/div&gt;
&nbsp;&lt;div class='clear'&gt;&lt;/div&gt;

Salve e veja o resultado. =) Viu super fácil!
 $(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"});} 
 #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;}   

(X) Acompanhe-nos nas redes sociais!
 


 

Instale este gadget