Pop-up Like Box do Facebook no Blogger
Autor: Cesar | Publicado: 2012-04-27T23:31:00-03:00

Saiba como criar aquela janela de fãs do Facebook que aparece logo quando o visitante chega na página, convidando-o para curtir a página no Facebook.   Esse recurso é em jQuery, baseado no Lightbox, modificado pelo Jack Moore, que chama “ColorBox”. Foi adaptado para o Blogger pelo Paul Crowe.   Pop-up do Facebook no Blogger   O código é colocado dentro de um gadget (elemento de página) padrão do Blogger, o “HTML/JavScript”, como na imagem abaixo:       Na janela do Gadget – que pode ser adicionado em qualquer parte do Blog que não afetará a estrutura), você colorá o seguinte trecho de código só modificando o que for indicado.  &lt;style&gt;   #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;    }    &lt;/style&gt;    &lt;script src='http://yourjavascript.com/1029251148/jquery.min.js'&gt;&lt;/script&gt;    &lt;script src=&quot;http://yourjavascript.com/1141272178/jquery.colorbox-min.js&quot;&gt;&lt;/script&gt;    &lt;script type=&quot;text/javascript&quot;&gt;    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 = &quot;visited=true;expires=&quot; + expires.toUTCString();    $.colorbox({width:&quot;350px&quot;, inline:true, href:&quot;#subscribe&quot;});    }    });    &lt;/script&gt;    &lt;!-- This contains the hidden content for inline calls --&gt;    &lt;div style='display:none'&gt;    &lt;div id='subscribe' style='padding:10px; background:#fff;'&gt;    &lt;center&gt;    &lt;iframe src=&quot;//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FnomePaginaBlog&amp;amp;width=300&amp;amp;colorscheme=light&amp;amp;show_faces=true&amp;amp;border_color=%23ffffff&amp;amp;stream=false&amp;amp;header=false&amp;amp;height=258&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; width:300px; height:258px;&quot; allowtransparency=&quot;true&quot;&gt;&lt;/iframe&gt;    &lt;/center&gt;    &lt;/div&gt;    &lt;/div&gt;  No final do código tem marcado de vermelho nomePaginaBlog. Coloque o final da urla do seu face. Por exemplo http://www.facebook.com/BlogdoBlogger  Feito isso é só salvar e visualizar funcionando no seu blog. Lembrando que a tela só aparecerá uma vez no navegador até que você limpe o cache.   As dimensões do elemento são padrão, mas você pode modificar manualmente trocando as medidas indicadas de verde no código.