Ajouter facebook pop up like box à blogger

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 ** //
<Style>


/ *

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

& tabbed ordered 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) 0 0 no-
 
repeat;}

#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:#F1F1F1;}

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

#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-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://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

<script src="http://yourjavascript.com/11215013191/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*7;

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

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

$.colorbox({width:"400px", 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><img src="http://4.bp.blogspot.com/-
 
yKl984YHtNc/Tz5eFcKawQI/AAAAAAAAClc/tRhcONEeG9k/s1600/LikeUsOnFacebook.
 
png" width:300px; height:150px;"/></center>

<center>



<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F
 
%2Fwww.facebook.com
 
%2FBloggerActuce&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>

<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-
 
astuce.blogspot.com">Blogger Widgets</a> | Customized By: <a style=" font-size:5px;
 
color:#3B78CD; text-decoration:none;" href="http://www.blogger-
 
astuce.blogspot.com">Blogging Tips</a> </p>

</div>

</div>

---------------------------------------------

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.