Janela(Pop-Up) Flutuante com Caixa Like-Box(Facebook)

Colocar uma janela Flutuante Like Box do Facebook, é uma das melhores forma no Blogger para aumentar as curtições da pagina de seu Blog, logo transformar seu Blog mais conhecido e falado no Facebook, e essa janela é um pouco mais simples, melhorando a aceitação de seus leitores, pois ela é menor e não ocupa muito espaço ao abrir seu Blog e com o botão de fechar bem visualizado.

Se desejar ter sucesso na instalação dispensando todo esse tutorial, veja o vídeo de um Youtuber fazendo a instalação da Pop Up, assistir agora.

Nesse código você não precisará editar nenhum trecho do código de seu Template, simplesmente você copiará o código abaixo e adicionará um Gadget > JavaScript no layout de seu Blogger.

Não se preocupe, se não estiver vendo o lado direito do código é por causa do tamanho do corpo da postagem.

<style> #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #cboxOverlay{background:#000;opacity:0.5 !important;} #colorbox{ box-shadow:0 0 15px rgba(0,0,0,0.4); -moz-box-shadow:0 0 15px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); } #cboxTopLeft{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-E9dVofW8BBY/T42WBJ5M22I/AAAAAAAAD_w/w7AL0l9gVKk/s40/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-ibVOtcbbUyU/T42WNcii6_I/AAAAAAAAEAE/Mrplo9QsPks/s32/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} #subscribe { font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; } #subscribe a, #subscribe a:hover, #subscribe a:visited { text-decoration:none; } .box-title { color: #3B5998; font-size: 20px !important; font-weight: bold; margin: 10px 0; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; line-height:25px; font-family:arial !important; } .box-tagline { color: #999; margin: 0; text-align: center; } #subs-container { padding: 35px 0 30px 0; position: relative; } a:link, a:visited { border:none; } .demo { display:none; } </style> <script src='http://yourjavascript.com/1029251148/jquery.min.js'></script> <script src="http://yourjavascript.com/1141272178/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"350px", inline:true, href:"#subscribe"}); } }); </script> <!-- This contains the hidden content for inline calls --> <div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FnomePaginaBlog&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe> </center> </div> </div>

Na parte destacada de vermelho você irá colocar o nome que fica logo depois da barra do link de sua página, como exemplo: http://www.facebook.com/Phablo-Projetos. Já nos tamanhos em azul da janela, recomendo que não mude, mas se você já tem noção de personalização, poderá fazer suas mudanças, mas se lembre que muito grande essa janela irá incomodar o seu visitante e leitor.

Veja também:

1. Barra com variedades sociais no seu blog
2. Comentários do facebook no blogger
3. Criar, Personalizar e Publicar Página do Facebook
4. Cópie os seus dados do facebook
5. Evitando e-mails do facebook
6. RSS Graffiti: Publicar Postagens automaticamente no Facebook

ADM: Gostou? Compartilha esse post e não esqueci de comentar!

Gostou? Compartilhe:

Tweet