Tutorial: Como Colocar Janela POP UP da FAN PAGE no BLog!! (Sem mexer no html)


Olá queridos e queridas, como estão vocês? Espero que bem...

Hoje vou postar um tutorial super fácil usando somente o GADGET (sem mexer no html), A conhecida JANELA FLUTUANTE POP UP muito fácil para chamar atenção das pessoas que visitarem seu blog, e incentivarem elas a curtirem sua página no facebook, porque queremos mais e mais curtidas não é mesmo? Queremos nossos leitores sempre por perto de nós e para isso vamos investir em novidades (essa não é tão nova, mas muitos blogs não tem).
E quando acho Tutoriais práticos e que não precisam de mexer no html fico louca pra passar para vocês...


Continue Lendo...




O Tutorial é super fácil e prático os créditos do código vão para:
👇👇👇👇

E o Blog Agenda dos Blog dá os créditos a: Ferramentas Blog (de onde o agenda tirou o código).

Bom vamos lá....

Abra as configurações do seu blog como na imagem abaixo (vocês sabem que gosto de trabalhar com imagens né...Facilita muito)...

Você clica em LAYOUT e vá fazendo conforme indico nas imagens...



Clica em Adicionar um Gadget...


Clique em HTML/JavaScript...


Siga conforme as indicações da imagem acima....

Cole o código que está aqui em baixo...

Código a ser copiado:👇👇

<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&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>
Muita atenção ao copiar esse código ok? Pois uma letra que não tenha sido copiada irá ocasionar na perda do código todo (não funcionará)
Reparem na parte em "Negrito" no final do código, (nomePaginaBlog), é pra colocar o nome, não o link,ok. Somente ali pode ser mudado, apague e coloque ali o nome da sua página.

Exemplo: https://www.facebook.com/mundodavivih/

 

Os valores abaixo também em negrito, (300px e 258 px) são tamanho e largura, caso queiram alterar (opcional mudar).
Feito isso pode salvar e visualizar o blog para ver o resultado...



7 comentários:

  1. Não consigo lhe dar com esses códigos.. Adorei o post

    ResponderExcluir
    Respostas
    1. Eu tbm n conseguia hehehe mas quando é por gadget eu me viro bem rs

      Excluir
  2. Esses tutoriais são tão fáceis! Toda vez que eu vou modificar o layout do meu blog aprendo coisas novas. É uma coisa que vc começa pesquisar e não para mais! Haha 💜

    www.blogpatriciamuniz.com

    ResponderExcluir
    Respostas
    1. Verdade eu pesquiso muito mas n acho tão fácil não hehehe alguns como de gadget acho mas html e complicado rs

      Excluir
  3. Esse é o post que vi na sua fanpage e que eu queria ver,acho que com suas dicas agora eu consigo, ao menos eu espero que eu consiga né? Haha adorei o post Vivih

    ResponderExcluir
  4. Nossa e eu precisando, me matando tentando e um tutorial tão fácil
    ..kkk ajudou pacas
    Bjo

    ResponderExcluir
  5. meninaaaaaaaaaa.. sabe q te amo gataaa.. tava precisando dar um upgrade no meu blog msmo, ja q vou mudar e ficar msmo pelo blogger, pq wordpress eh bom e tal mais profissional e mais organizado e SEGURO, maaaaaaaaaas ta precário e mt de ferramentas ccomo o blogger tem hehehe valeu gata pela dica!!!

    ResponderExcluir

Gostou do Post? Comente aqui:

Tecnologia do Blogger.