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 novoas 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/AVvXsEijEOdHiMb93bEFE6B7u6gGOef8HriBWv-nfaHIKPdeHcaYLJtf_t6_fd0sz8Qphao8VPcgVHzN0KsvgBqivWrIDKtDmCWV6U1R862WO1q_izfLEibcOAikL_uZBaZOrmBvR_FBohYNVT-J/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/AVvXsEgsaBY3J_753DWUzhhxyp7VoWckJlxPzZ1QD0f5HvtzhqnTZrv6Mli3cRpKDrhSG2mHVyJY-_jgEa5c5ttmNdh7QDvgXBAAWnNlku39g51KAirwvYuu8D-3_wGCruFTaGVs7v2vSXOGglcQ/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/AVvXsEjRPpa13U_tZs5akH9OczZXMb3TuunKZDaR7N4e8zXDnHVaDVGBwS3JSsN_SKEu0eSbLJY2CrAg4vrXMY2_0rZZTu9WqIcudECxqLKcZheZq20HP-bzXSjjdWr8hCyjd5mgx8DsN_E9NNc3/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/AVvXsEjCgsBIPKTg4VKpCN2fWp1qk_9kQ7Zo-h-wan2o7-3qNnSEbVMds3ANJwUpMvhg__vEUU43UBvn25PEJYZLUPTTRvWWcjpCJm2rZOBkLgJVDpkeUcMXD8XrnbFmHUZcMY1VKru1Ikh4Syg3/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.

Nenhum comentário:

Postar um comentário


Restaurar um blog excluido

Se você acidentalmente excluiu seu blog e quer tê-lo de volta, pode recuperá-lo durante um breve período após a exclusão. Para desfaz...