Mini PopUp de Seguidores no Twitter Para Blogger
Recentemente está é uma das dicas que as pessoas mais procuram, por que geralmente está mini PopUp só é encontrada em sites profisssionais e quase nunca em bloggers.
Por este motivo vou mostrar aqui no DicasHot como colocar em seu blog uma caixa como está chamada de "Mini PopUp" para que o usuário do seu blog possa te encontrar no twitter e assim te seguir.
Siga-nos no twitter:
Seguir @DicashotBlogger
Recomende esta postagem no Google:
1° passo: Entre no painel do seu blogger e clique em "Design";
2° passo: Entre em Editar HTML;
3° passo: Clique em Espandir Modelos de Widigets;
4° passo: Pressione a tecla Ctrl+F e procure pela tag: </head>
2° passo: Entre em Editar HTML;
3° passo: Clique em Espandir Modelos de Widigets;
4° passo: Pressione a tecla Ctrl+F e procure pela tag: </head>
5° passo: ACIMA desta tag 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>6° passo: Segure novamente Ctrl+F e procure or esta tag:
]]></b:skin>
7° passo: Cole ACIMA dela este 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoHB1Sp4gvcL4NIaBxAVFtHqDtNQsZWP6lFLqi8jyGI7x7Jf-ZIe3WiT3aPUdz1SK6DfDqiUo9T4P2mpSYOlfs-iWp2l8f18pEHpx9pasPdYMmXuA6MDpXLjhdbGqGuYymIqRda5GPMZM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0ckcXP3CBZqEyPC7UB7IymzKzWfKLzru7XwQzqGvRGc1_9Seaq8YQnA1_s4EzKA4BRY13umhOwmoRIrP-kwABHOT6io2Q3QzBaxI2woxQGZIFtt8DjfRR7RdIyS7LPBHXq-9xsCZw8JP/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}8° passo: Agora, procure pela tag: <body>
Se não encontrar, procure assim </body>
Se ainda não encontrar, procure assim <body
ACIMA desta tag 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&id=twitter-widget-2&lang=pt&screen_name=NOME-DE-USUARIO&show_count=true&show_screen_name=true&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>Não se esqueça de fazer as alterações no código.
Feito isto, clique em salvar modelo!!!
Se inscreva e receba nossas atualizações por e-mail:
