News Update :
Home » » Ajouter facebook pop up like box à blogger

Ajouter facebook pop up like box à blogger

By: omer nawaz on Thursday, 22 January 2015 | 03:57

LikeBox Facebook is one of the most used Facebook plugin and today we are here to create and adapt it to our needs.

1- Connect blogger -> Presentation >> Add a Gadget >> and choose HTML / JavaScript

2 - Copy / paste the code below into the box that just opened.



 // * BloggerActuce Lightbox Style Popup Likebox Facebook Widget ** //

/ *

ColorBox Core Style:

The Following CSS is consist entre example themes and shoulds not Be altered.

* /

#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:


#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

& tabbed ordered in a way That Represents the nesting of the generated HTML.

* /

#cboxOverlay {background: # 000; opacity: 0.5! important;}


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(

FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) 0 0 no-


#cboxTopCenter {height: 14px; background:url(

TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x

top left;}

#cboxTopRight {width: 14px; height: 14px; background:url(

FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -

36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(

FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0


#cboxBottomCenter{height:43px; background:url(

TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x

bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(

FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -

36px -32px;}

#cboxMiddleLeft{width:14px; background:url(

FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -

175px 0;}

#cboxMiddleRight{width:14px; background:url(

FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -

211px 0;}

#cboxContent{background:#fff; overflow:visible;}




no-repeat center center;}


E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) no-repeat center


#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-

weight:bold; color:#F1F1F1;}

#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#F1F1F1;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px;


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 {



.box-tagline {

color: #999;

margin: 0;

text-align: center;


#subs-container {

padding: 35px 0 30px 0;

position: relative;

a:link, a:visited {



.demo {




<script src=''></script>

<script src=""></script>

<script type="text/javascript">


if (document.cookie.indexOf('visited=true') == -1) {

var fifteenDays = 1000*60*60*24*7;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = "visited=true;expires=" + expires.toUTCString();

$.colorbox({width:"400px", inline:true, href:"#subscribe"});




<!-- This contains the hidden content for inline calls -->

<div style='display:none'>

<div id='subscribe' style='padding:10px; background:#fff;'>

<center><img src="


png" width:300px; height:150px;"/></center>


<iframe src="//



scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px;

height:258px;" allowtransparency="true"></iframe>


<p style=" float:right; margin-right:35px; font-size:4px;" >Powered By <a style=" font-

size:5px; color:#3B78CD; text-decoration:none;" href="http://www. blogger-">Blogger Widgets</a> | Customized By: <a style=" font-size:5px;

color:#3B78CD; text-decoration:none;" href="http://www.blogger-">Blogging Tips</a> </p>




3- Personnalisation de widget :

Le widget enregistre dans l'ordinateur du client un cookie qui permet de permet de
customiser la fréquence d’apparition du widget, dans notre cas après 7 jours ce widget va
s'ouvrir au client. vous pouvez changer cette valeur par 1 par exemple pour faire apparaître
le widget chaque jour ou toute autre valeur.

et vous devrez aussi changer BloggerActuce par le nom de votre page Facebook.

 Voila c'est tout pour aujourd'huit et à la prochaine.

Post a Comment

Contact Us | Privacy policy | Term of use | Advertise with Us | Site map
Copyright © 2011. Blogging Brain . All Rights Reserved.
Design Template by Blogging Brain | | Powered by Blogger