Widget Curta para acessar o Site/Blog para Blogger

Você está procurando uma forma de usar seu Tráfego, de modo que você pode converter seus visitantes regulares em Seguidores em suas redes Sociais? A principal intenção de usar o código é obter mais exposição em sites sociais ou seja Facebook, Twitter e Plus Google. Embora existam inumeros códigos de widgets Pop ups disponíveis na internet, a maioria deles não têm características interessantes, e nem constituem uma experiência amigável. Pensando nisso, o MyBloggerLab desenvolveu um widget de pop-up atrator de tráfego avançado que não só irá aumentar o seu tráfego social, mas tentará não dar um susto nos visitantes logo ao entrar no site.

Demonstração

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

Instando o widget no Blogger

Os passos são muito simples e não exige qualquer tipo de formação HTML ou CSS, você só tem de seguir os passos corretamente conforme mencionado abaixo. 1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl F, procure por ]]> </ b: skin> e logo acima dele cole os seguintes códigos CSS e salve o seu modelo.

/*---MyBloggerLab.com Like To Enter Advance Traffic POP ---*/ .blackout { display: none; position:fixed; _position:absolute; width: 100%; z-index:10000; background-color:#000; margin: 0px; padding: 0px; left:0; top:0; } .socialmodalOuter { display: none; font-family: arial; color: #575E6D; font-size: 14px; line-height: 20px; background: rgb(73, 73, 73); /* The Fallback */ background: rgba(0, 0, 0, 0.6); border-radius: 10px; left: 50%; padding: 7px; position: fixed; _position:absolute; top: 50%; z-index: 10001; } .socialmodal { background: none repeat scroll 0 0 #FFFFFF; border-radius: 3px 3px 3px 3px; width: 460px; } .socialmodal .title { border-bottom: 1px solid #E5E8EF; font-weight: bold; font-size: 19px; font-weight: bold; padding:16px 15px 10px 15px; text-align:center; } .socialmodal .subtitle { margin: 0px; background:#2e6886; color:#ffffff; padding:4px; text-align:center; font-weight: bold; font-size: 15px; } .socialmodal .warning { margin: 0px; background:#cb2026; color:#ffffff; padding:4px; text-align:center; } .socialmodal .content { padding: 0px 15px; margin-top: 10px; line-height: 17px; } .socialmodal .share { padding: 0px 15px; margin:20px 0px 15px 0px; text-align:center; height: 24px; } .socialmodal .close { background: url("http://1.bp.blogspot.com/-Ke5ehk-86ic/UDjNPBFGGSI/AAAAAAAAE7Q/n_T4qfGD40U/s1600/close.png") no-repeat; cursor: pointer; height: 12px; position: absolute; right: 15px; top: 15px; width: 12px; display: none; } .socialmodal .button { float: left; width: 115px; line-height: 24px; height: 24px; } .socialmodal .like { margin-left: 15px; } .socialmodal .twttr { margin-left: 30px; } .socialmodal .plus { width: 90px; margin-left: 50px; } /* // cusomize position of elements */ .socialmodal .footer { clear: both; background: none repeat scroll 0 0 #E8EAEF; border-radius: 0 0 3px 3px; border-top: 1px solid #DDE0E8; padding: 10px 0; color: #878D9C; text-shadow: 0 1px 0 #FFFFFF; text-align:center; font-size:13px; }

3°passo: Agora acesse o Layout do Blogger: Painel → layout → Adicionar um gadget → selecione a opção → Adicionar um widget HTML/JavaScript e cole o seguinte código lá.

<script src="http://code.jquery.com/jquery-latest.min.js"></script><script> !window.jQuery && document.write('<script src="js/jquery.js"><\/script>') </script><script src="http://apis.google.com/js/plusone.js" type="text/javascript" gapi_processed="true"></script><script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script><script src="http://platform.twitter.com/widgets.js"></script><script src="http://mybloggerlab.com/Scripts/Sharetoenter.js" type="text/javascript"></script><script src="http://mybloggerlab.com/Scripts/jquery.cookie.js" type="text/javascript"></script> <script language="javascript">$(function() { $('body').socialmodal({ uniqueName: 'autoloadmodal', subtitle: 'Curta e clique +1 para acessar o site', facebook: 'http://www.facebook.com/EscolaFai', plusone: 'http://www.mundoinformal.com/', count: 0, manualClose: true, }); $('body').socialmodal({ twitter: 'mundo_informal', onclick: '#download', callback: function(success) { }, }); }); </script>

Personalização: 

Para adicionar a sua página no Facebook Substitua http://www.facebook.com/EscolaFail com sua Fan Page ou qualquer URL que você deseja alcançar fãs.

Para adicionar sua conta do Twitter, altere o trecho mundo_informal do código acima com seu nome de usuário

Se você quiser alterar a mensagem de notificação "Curta e clique +1 para acessar o site" basta apagar essa notificação do codigo acima.

Para alterar Google Plus, substitua a URL http://www.mundoinformal.com/ com o URL da sua página inicial.

Tudo feito: Depois de personalizá-lo verifique o seu widget depois salve pressionando botão Salvar. Agora esperar algumas horas para testemunhar o aumento significativo no número de seus seguidores sociais.

Atualização 26/01/2013 em relação a alguns conflitos nos scripts.

Espero que tenham gostado!  Deixem seus comentários!

Fonte: Mybloggerlab.com

Share This :