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 /> <!-- THIS CONTAINS --><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

-Fontes: Templates para Blogspot