Página do Facebook em PopUp

Colocar Página do Facebook em PopUp

Adicionando uma Popup divulgando sua página no Facebook, certamente irá ajudar a aumentar o número de fãs na sua página, pois é uma forma de convidar seus leitores a acompanhar seu conteúdo através do facebook.

O Pop up irá aparecer com a opção de Facebook page.ele só aparece na primeira visita do dia no seu blog não vai fica abrindo toda hora para não incomoda.

A instalação é bem simples.

Acesse o painel do blogger, vá até o menu "layout", clique em “adicionar um gadget”, escolha o tipo “html/javascript” e cole o seguinte código:

<br />
<style>
/*
COLORBOX CORE 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;}
/*
USER STYLE:
CHANGE THE FOLLOWING STYLES TO MODIFY THE APPEARANCE OF COLORBOX. THEY ARE
ORDERED & TABBED IN A WAY THAT REPRESENTS THE NESTING OF THE GENERATED HTML.
*/
#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(HTTP://1.BP.BLOGSPOT.COM/-FIJ_XZ7TXEG/TXRT0SY1TII/AAAAAAAAFWK/LLZVKEYY_J8/S1600/CONTROLS.PNG) NO-REPEAT 0 0;}
#CBOXTOPCENTER{HEIGHT:14PX; BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-TCJGMNSFOCY/TXRTZZHDLVI/AAAAAAAAFWC/MDNDGRISRUA/S1600/BORDER.PNG) REPEAT-X TOP LEFT;}
#CBOXTOPRIGHT{WIDTH:14PX; HEIGHT:14PX; BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-FIJ_XZ7TXEG/TXRT0SY1TII/AAAAAAAAFWK/LLZVKEYY_J8/S1600/CONTROLS.PNG) NO-REPEAT -36PX 0;}
#CBOXBOTTOMLEFT{WIDTH:14PX; HEIGHT:43PX; BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-FIJ_XZ7TXEG/TXRT0SY1TII/AAAAAAAAFWK/LLZVKEYY_J8/S1600/CONTROLS.PNG) NO-REPEAT 0 -32PX;}
#CBOXBOTTOMCENTER{HEIGHT:43PX; BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-TCJGMNSFOCY/TXRTZZHDLVI/AAAAAAAAFWC/MDNDGRISRUA/S1600/BORDER.PNG) REPEAT-X BOTTOM LEFT;}
#CBOXBOTTOMRIGHT{WIDTH:14PX; HEIGHT:43PX; BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-FIJ_XZ7TXEG/TXRT0SY1TII/AAAAAAAAFWK/LLZVKEYY_J8/S1600/CONTROLS.PNG) NO-REPEAT -36PX -32PX;}
#CBOXMIDDLELEFT{WIDTH:14PX; BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-FIJ_XZ7TXEG/TXRT0SY1TII/AAAAAAAAFWK/LLZVKEYY_J8/S1600/CONTROLS.PNG) REPEAT-Y -175PX 0;}
#CBOXMIDDLERIGHT{WIDTH:14PX; BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-FIJ_XZ7TXEG/TXRT0SY1TII/AAAAAAAAFWK/LLZVKEYY_J8/S1600/CONTROLS.PNG) REPEAT-Y -211PX 0;}
#CBOXCONTENT{BACKGROUND:#FFF; OVERFLOW:VISIBLE;}
#CBOXLOADEDCONTENT{MARGIN-BOTTOM:5PX;}
#CBOXLOADINGOVERLAY{BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-PPVU-446SN4/TXRT1QSGH1I/AAAAAAAAFWW/_JWYVOR1HX8/S1600/LOADING-BACKGROUND.PNG) NO-REPEAT CENTER CENTER;}
#CBOXLOADINGGRAPHIC{BACKGROUND:URL(HTTP://1.BP.BLOGSPOT.COM/-31STRSS_1-E/TXRT1J6NTHI/AAAAAAAAFWO/4P12CJPJ924/S1600/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(HTTP://1.BP.BLOGSPOT.COM/-FIJ_XZ7TXEG/TXRT0SY1TII/AAAAAAAAFWK/LLZVKEYY_J8/S1600/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;}
/*-----------------------------------------------------------------------------------*/
/* FACEBOOK LIKEBOX POPUP FOR BLOGGER
/*-----------------------------------------------------------------------------------*/
#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><br />
<br />
<script SRC='HTTP://AJAX.GOOGLEAPIS.COM/AJAX/LIBS/JQUERY/1.5/JQUERY.MIN.JS'></SCRIPT><br />
<script SRC="HTTP://DL.DROPBOX.COM/U/103852546/POPUP/POPUP.JS"></SCRIPT><br />
<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:"400PX", INLINE:TRUE, HREF:"#SUBSCRIBE"});
}
});
</SCRIPT><br />
<br />
<br />
<div STYLE='DISPLAY:NONE'>
<div ID='SUBSCRIBE' STYLE='PADDING:10PX; BACKGROUND:#FFF;'>
<h3 CLASS="BOX-TITLE">
RECEBER TODAS AS ATUALIZAÇÕES ATRAVÉS DO FACEBOOK. BASTA CURTIR NOSSA FANPAGE.<center>
<p STYLE="LINE-HEIGHT:3PX;" >
▼</P>
</CENTER>
</H3>
<center>
<iframe SRC="//WWW.FACEBOOK.COM/PLUGINS/LIKEBOX.PHP?HREF=HTTP%3A%2F%2FWWW.FACEBOOK.COM%2FNOME-DA-SUA-FANPAGE&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><br />
</CENTER>
</DIV>
</DIV>

Atenção aos trechos que você precisa alterar: Coloque o nome da sua pagina aonde esta isso NOME-DA-SUA-FANPAGE

-Não copie essa postagem por favor!

DT - Dicas e tutoriais

sábado, 7 de dezembro de 2013