How to add pop up facebook like page or box to your blogger

Pop up facebook like box can help your site earn more unique traffic, if you have lots of likers to your page there are posibility that if you post your links to your fan page the member might click it and link it to your site.

So in order to add a pop up facebook to your blog you must do the instruction below.

First is to sign in to your blogger account and then go to layout the click add gadget.

After clicking the add gadget go to html/javascript and add this code below.

<script src="http://exeideasinternational.googlecode.com/files/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:"400px", inline:true, href:"#exestylepopups"});

}

});

</script>

<style type="text/css">

/*

ColorBox v1.3.16

(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)

*/

#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8Y_mdZxdt3OauzL8iNT2hF8RaoxitnqOXiwT4xJSaUYaau_J2XUcnSr3Exg-QLJH2PNl9jeHySV0SdV5SwJw5oXxJIeOLwst7vrKMthbqeSO2lYN38guDF3n0WJomWbOQ5PtUU5BYZk/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFtkyabSdLatjEtJrIoPLyr7XrbT3Yn0EFrr7iFN85pWQqT8VDsV8MIfHS19CRnZqpBUSBV9bK_GF8EYGGsH8lyNqeVybWhg5XuLFgIsuXS3GaNwEhKn65Fi7PMZHTTjED4Y2c6nd428/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8Y_mdZxdt3OauzL8iNT2hF8RaoxitnqOXiwT4xJSaUYaau_J2XUcnSr3Exg-QLJH2PNl9jeHySV0SdV5SwJw5oXxJIeOLwst7vrKMthbqeSO2lYN38guDF3n0WJomWbOQ5PtUU5BYZk/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8Y_mdZxdt3OauzL8iNT2hF8RaoxitnqOXiwT4xJSaUYaau_J2XUcnSr3Exg-QLJH2PNl9jeHySV0SdV5SwJw5oXxJIeOLwst7vrKMthbqeSO2lYN38guDF3n0WJomWbOQ5PtUU5BYZk/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFFtkyabSdLatjEtJrIoPLyr7XrbT3Yn0EFrr7iFN85pWQqT8VDsV8MIfHS19CRnZqpBUSBV9bK_GF8EYGGsH8lyNqeVybWhg5XuLFgIsuXS3GaNwEhKn65Fi7PMZHTTjED4Y2c6nd428/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8Y_mdZxdt3OauzL8iNT2hF8RaoxitnqOXiwT4xJSaUYaau_J2XUcnSr3Exg-QLJH2PNl9jeHySV0SdV5SwJw5oXxJIeOLwst7vrKMthbqeSO2lYN38guDF3n0WJomWbOQ5PtUU5BYZk/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8Y_mdZxdt3OauzL8iNT2hF8RaoxitnqOXiwT4xJSaUYaau_J2XUcnSr3Exg-QLJH2PNl9jeHySV0SdV5SwJw5oXxJIeOLwst7vrKMthbqeSO2lYN38guDF3n0WJomWbOQ5PtUU5BYZk/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8Y_mdZxdt3OauzL8iNT2hF8RaoxitnqOXiwT4xJSaUYaau_J2XUcnSr3Exg-QLJH2PNl9jeHySV0SdV5SwJw5oXxJIeOLwst7vrKMthbqeSO2lYN38guDF3n0WJomWbOQ5PtUU5BYZk/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVNOQg6JAO24BIs6fCrtMW8l0j4H8Mg-Wi5Z43jB96nK_iHS9HzsQuKopAhWv4fJnmibon1AslBRlvfAycKlzlmBFuMLo50UexVX1YTxvbbSO6SaMH88XtIVBxqMKl3HLdv-BYIlr4_iM/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-f6o6XRQs64lqgawAPx2GpwyXpoKmkUa4ydwXi3ec8zCyxLyrz9N9lkjdMv7GWmkHrmy-CQuPAgYNEDEebZ16jf0EXg4OfIzG2GpD9vM8WPx6yr2xW3_E3oZZsZrKLgMU-76IwDUHnTk/s400/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8Y_mdZxdt3OauzL8iNT2hF8RaoxitnqOXiwT4xJSaUYaau_J2XUcnSr3Exg-QLJH2PNl9jeHySV0SdV5SwJw5oXxJIeOLwst7vrKMthbqeSO2lYN38guDF3n0WJomWbOQ5PtUU5BYZk/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}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}

</style>

<div style='display:none'>

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

<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>

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

<!--Please Do not Remove the Credits -->

    <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://yaqoobforall.blogspot.com/">Tricks Master</a></p>

</div></div>

 box. This is done using the CSS 'background-color' property.

Replace the red text to your own desire and click save.