Mini PopUp de seguir no Twitter com cookies para Blogger

by Matheus mota 18:26 0 Comments

Hoje, voltei com mais um tutorial e estou lançando a Mini PopUp de seguir no Twitter. 

Essa Mini PopUp ficou bem mais simples e ela não é cheia de elementos com fotos desnecessárias para quem segue. Essa versão ainda traz um conceito de trazer o último tweet publicado no perfil e é muito leve e simples. Além disso, o botão de Seguir não usa aqueles aplicativos desnecessários e que são relevantes, em que primeiro você precisa autorizar um aplicativo, para depois seguir. 
Como instalar a Mini PopUp em seu blog Blogger:
Acesse o painel do seu blog e clique na guia design> Editar html > segure as teclas CTRL+F e procure por:</head>
E, acima dele, cole o seguinte código:<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){$('#fanback').delay(100).fadeIn('medium');$('#fanclose,#fan-exit').click(function(){$('#fanback').stop().fadeOut('medium')})}$.cookie('popup_user_login','yes',{path:'/',expires:7})});
</script>
Em seguida, segure novamente as teclas CTRL+F e procure por:]]></b:skin>
E, acima dele, cole o seguinte código:#fanback {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#fan-exit {width:100%;height:100%}
#fanbox {background: white;width: 420px;height: 214px;position: absolute;top: 50%;left: 50%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -150px 0 0 -200px;}
#boxertwttr {width: 380px;margin: 0 auto;height: 84px;border-bottom: 1px solid #CCC;padding-top: 17px;}
.imgboxer img {width: 70px;float: left;-webkit-border-radius: 4px;border-radius: 4px;}
.boxboxer {float: left;width: 292px;overflow: hidden;}
.boxboxer span {display: block;text-align: left;margin-left: 8px;font-size: 16px;font-family: Arial,sans-serif;font-weight: bold;margin-top: 8px;}
#boxertwttr iframe {margin-top: 5px;float: left;margin-left: 8px;}
#boxerupdate {font-family: Arial,sans-serif;text-align: left;height: 50px;width: 380px;margin: 0 auto;margin-top: 13px;}
#boxerupdate span {font-weight: bold;font-size: 16px;margin-bottom: 5px;display: block;background: url(http://4.bp.blogspot.com/-NcbcaAGmoFc/T6m3eN0ERdI/AAAAAAAAAfY/cQR-XNU5oUQ/s1600/iconatualizacao.png) no-repeat;padding-top: 3px;padding-bottom: 1px;padding-left: 30px;}
#boxerupdate div {font-style: italic;}
#fanclose {float: right;cursor: pointer;background: url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}
E, pela última vez, segure as teclas CTRL+F e procure por:<body>
E, abaixo dele cole o seguinte código:<div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/>
<div id='boxertwttr'><div class='imgboxer'>
<img class='avatar size128' src='ENDEREÇO-DA-IMAGEM-DO-PERFIL-NO TWITTER'/>
</div><div class='boxboxer'><span>Acompanhe-nos no Twitter!</span>
<iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1336512514185&amp;id=twitter-widget-2&amp;lang=pt&amp;screen_name=NOME-DE-USUARIO&amp;show_count=true&amp;show_screen_name=true&amp;size=l' style='width: 259px; height: 28px; ' title='Twitter Follow Button'/></div></div>
<div id='boxerupdate'><script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script type='text/javascript'> $('document').ready(function() {$.getJSON('http://twitter.com/statuses/user_timeline/NOME-DE-USUARIO.json?callback=?', function(data) {$('#tweet').html(data[0].text);});});</script><span>Última Atualização:</span><div id='tweet'/></div></div></div>

Atenção: Lembre-se que ao mexer a barra de rolagem horizontalmente, há DOIS textos negritados em brevemo, onde você irá substituí-lo pelo seu nome de usuário do Twitter, não se esqueça!
Atenção: Lembre-se de alterar também a parte negritada em azul pelo endereço da imagem do seu perfil no Twitter.
E, finalmente, clique em Salvar Modelo!

O que você achou desta versão da Mini PopUp? Comenta!

0 Comentários