17 February 2013

Awesome Jquery Facebook Popup

Posted by dfdf at 9:11 pm

515 loyal readers
RSS feed | E-mail

Recently one of my reader asked me for popup facebook like box which I am using on this blog.Therefore I kept my word and today publishing another cool jQuery popup for facebook like box. We have published four versions of facebook like box (Version1 | Version2 |Version3 | Version4) but today's popup is little different from them in this gadget because we have used another version of jQuery colorbox.As always you can add this gadget very easily to blog just copy and paste the code.You just have to replace my username with yours and you are done.See the demo of the gadget.


How To Add This Popup To Your Blog?


As always I have kept the installation extremely easy.You just have to copy and paste the code below...


  1. Now go to Blogger Dashboard > Design.
  2. Add a Gadget > HTML/JavaScript.
  3. Paste below code after replacing my username with yours.

Windows Reloded, Download Latest Softwares

<style>
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should 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%; height: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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6A_KbJRQbJQNaEGLi3Q5Yq7Eo19tu9KKd_-99WFj8KzYIPVEt3IVjGD_fiHZeGyIJ8KYGxOTZYX2THTWHV5_4e_FthHoUKbr9cLQZd4nBVNoN390hcDWNNL1xDqUcJj_8yIk0XSfjhqcG/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeUpWfQkjRvmGND5RAWTrJiqTHeIof8qlXR5nnrT6BGEEMf7786_aBfbm5Hmn4cd0jxXR_zHX6GYLaIG-DMECBtRzjXmsO6LpUMkpGPotO0a_sxU-YpCZb55MMA6t1R6j4HnLiF_PcKSm/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeUpWfQkjRvmGND5RAWTrJiqTHeIof8qlXR5nnrT6BGEEMf7786_aBfbm5Hmn4cd0jxXR_zHX6GYLaIG-DMECBtRzjXmsO6LpUMkpGPotO0a_sxU-YpCZb55MMA6t1R6j4HnLiF_PcKSm/s1600/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjik8-QXf5s_UX8gnnGXQo0RUdwmi7dN7QkTFvfEGfo2u8fpVKsVMn782fZbiHj5e3vWzl-5czQgwwSeqIKaYEPJBa_VKUAllPNIR6AsCDF30mB8jG9_VY7DOsw4xNJzgLOBXXGYbJmBGdu/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjik8-QXf5s_UX8gnnGXQo0RUdwmi7dN7QkTFvfEGfo2u8fpVKsVMn782fZbiHj5e3vWzl-5czQgwwSeqIKaYEPJBa_VKUAllPNIR6AsCDF30mB8jG9_VY7DOsw4xNJzgLOBXXGYbJmBGdu/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg5nh0SkW81dGDSEc7_YE7ZpRJkeWNQgiGqaoAxkoTpPcADZNItYzJFR3gUnCUEWAPcX2mpCVt913xgBfP9EQdjW0y3AdjRcNoKql8RcAvDsgdxa-aBWmHybjNpxtKqARwVqnR0BFcljXY/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiedW4vf2FKJ-Th92bNVP2FsEGgM0Md9hQwp66vTQPMiE1OFW_qZxIc5ZJtUrFshbv76W6yjyibNKCPMv1XeX64X-Td1MVmRFQ3scLUgxKje6wnyGfUuegSLq880C5sE5KxMJaN2bOwUPN2/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU_VltlDN5VPXYcecwmSiunaXLohxh9XVDxSMdRkvfVCdZVFCxe6x1MVsaNloNznSBT6gligiTvKmXZLiw_JvCJghGaNz4mSN8ALbol3dBuGSEkuUVknVcF9w3uCgSNtMaDU921Zcq9yKv/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zRHkibMvJpvaPQAPUZzuSAtByrnlwoRAd9IF7AGVlsmRQ8iejjS2KI2hvSGyXewPqkp4UKqW_wjXsg1XAFSV98CPt8rvNFEep4bJ8gf3bWWQdwEl8w55xN0kXvfKkoIb6CYKyRsaquAm/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zRHkibMvJpvaPQAPUZzuSAtByrnlwoRAd9IF7AGVlsmRQ8iejjS2KI2hvSGyXewPqkp4UKqW_wjXsg1XAFSV98CPt8rvNFEep4bJ8gf3bWWQdwEl8w55xN0kXvfKkoIb6CYKyRsaquAm/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1u3ZBU39EPGQfWCWVSS_W6QHpoLR5iK2N08i195gtdx0uudsI83L7ok3MV1CPpJDkeEdj4OLPS6eDxYem6Mis_UZ56mKVBZgR30yhq-g83ARqsTn3ZhYk8up88ubHaTLciRWPB9qQhOXR/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBgaQbEcuJ2UQotRa1GyXcJoCKyqd-uw3MT4EgNRZ5bly-yUJV8nUZLXtNJd-giXb5EFBARARCQfFKqx_UcAVeX4eM3ERdOm8X-51M09IiQ4Z6qGBa7TlnXDD-rumPoaFXxbfezZVpjmL/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_8AMM6C1TZhs3c_cgi7-KpPzPh8WhIyNngBh9AO_FCdG8S8u0VsVTj4PHweeg0LWyslNpn4LEX4aayCY1sPkaPiM5tGg4vkVm30G1ORjrprbsGL4HmpB3WyI8X1KsoId1tEOHsQNUFO2j/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC7uCEDzIz09QCijG42eonkB0mBjb0ICuMVjDJbMAVCLPG_EWzcaPM9eu2SPdP2ckR91fVsdQ5Q7HsFzaejxmo8h8uiry3LY6uaWSiq2y0icJNJ1PpheHBRoSn_GquuHPRdalEFQq8IEIW/s1600/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}




Windows Reloded, Download Latest Softwares



/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger By Helper 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.7.1/jquery.min.js'></script>
<script src="http://code.helperblogger.com/jquery.colorbox.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlbYVkRx_5hKiG7sJCH6Ud-MZ6cpeT9-PbJaPGQ5yiFvSnGe6FV2JxetD1saJ7hwk0IsvYSGVpIg_ado2iwOrMVA17Lw114Qp_U5mTizdH_WqchMYp-kwoArXxg_Er9MCwM0JmqXhaElfl/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&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"><!-- Warning: Don't edit this line,If you edited this line then your gadget may not work --></iframe></center><p style=" float:right; margin-right:45px; font-size:4px;" ><a style=" font-size:8px; color:#3B78CD; text-decoration:none;" href="http://goo.gl/9fXrd">Grab This Gadget »</a> </p></div>
</div>

Windows Reloded, Download Latest Softwares

Now replace btsnts with your facebook fan page username.(Highlighted in red color)

Customizations (Optional)


I have set the cookie refresh time to 7 days that means this popup will appear only once in 7 days to that specific visitor.If you want to appear this gadget daily the simply change the *7value to *1 in above code.(Highlighted in Yellow color)
Windows Reloded, Download Latest Softwares
Related Posts Plugin for WordPress, Blogger...
Labels: | 0 comments

0 comments:

Subscribe to: Post Comments (Atom)
Blogger Template by Clairvo