.

terça-feira

Mini PopUp de Seguidores no Twitter Para Blogger

ACESSOS:
AQUI

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:

                    

Recomende esta postagem no Google:


                                         
   

Inserindo o código HTML

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>

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(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;}



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&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>


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: