[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Já tratamos aqui da importância de seu blog ter um página no Facebook, o que é diferente de um perfil pessoal. Para esse tutorial funcionar você precisa ter uma página do Blog no Facebook. Se não sabe como criar uma, nós te ajudamos:
O que vamos ensinar é como colocar um pop-up que abra na tela do Blog com a caixa de fãs do Facebook, sugerindo ao visitante que clique para “Curtir” sua página. Algo como no exemplo da imagem abaixo ou clicando no link para ver funcionando:[
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
O melhor desse recurso é que a janela só aparecerá uma única vez para o visitante até que ele limpe o cache do navegador, o que deixa o pop-up menos “chato”.
Esse recurso é em jQuery, baseado no Lightbox, modificado pelo Jack Moore, que chama “ColorBox”. Foi adaptado para o Blogger pelo Paul Crowe e eu mesmo fiz algumas alterações para tornar o código mais básico.
Se você gosta do [ Ferramentas Blog ] aproveite para curtir nossa página ou nos siga no Twitter, clicando abaixo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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.
O código é longo e tenha certeza de ter copiado corretamente, sem mudar nada além do que estamos ensinando.
No final do código tem marcado de vermelho nomePaginaBlog. Todo endereço de página no Facebook tem um nome. A do [ Ferramentas Blog ] por exemplo é:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Exatamente aquilo é o nome da página que deverá ser colocado onde indicamos no código.
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.
Já tratamos aqui da importância de seu blog ter um página no Facebook, o que é diferente de um perfil pessoal. Para esse tutorial funcionar você precisa ter uma página do Blog no Facebook. Se não sabe como criar uma, nós te ajudamos:
O que vamos ensinar é como colocar um pop-up que abra na tela do Blog com a caixa de fãs do Facebook, sugerindo ao visitante que clique para “Curtir” sua página. Algo como no exemplo da imagem abaixo ou clicando no link para ver funcionando:[
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
O melhor desse recurso é que a janela só aparecerá uma única vez para o visitante até que ele limpe o cache do navegador, o que deixa o pop-up menos “chato”.
Esse recurso é em jQuery, baseado no Lightbox, modificado pelo Jack Moore, que chama “ColorBox”. Foi adaptado para o Blogger pelo Paul Crowe e eu mesmo fiz algumas alterações para tornar o código mais básico.
Se você gosta do [ Ferramentas Blog ] aproveite para curtir nossa página ou nos siga no Twitter, clicando abaixo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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.
O código é longo e tenha certeza de ter copiado corretamente, sem mudar nada além do que estamos ensinando.
Código:
<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="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FnomePaginaBlog&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
</div>
</div>No final do código tem marcado de vermelho nomePaginaBlog. Todo endereço de página no Facebook tem um nome. A do [ Ferramentas Blog ] por exemplo é:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Exatamente aquilo é o nome da página que deverá ser colocado onde indicamos no código.
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.
creditos:
Spoiler :
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
