Tuesday, 16 October 2012

Awesome jQuery Popup For Facebook Like Box - V5

06:02    No comments

Awesome jQuery Popup For Facebook Like Box - V5




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


<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/AVvXsEhfm5B8FfRfo6kVF6UXN_nxR3WLziGh7yP-VOWXvGljQTc43xSeYxjeV47HlTomajCoghIhKDwdtQP-kSigeMCVhzzbwIkcLE9aGbVnG5SR4cB9sVhDsZdok0fgC6vWMJdLehnP8E8D2tu3/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Rsm4qQDyh6om4lrQg25f_KiBjXOkapdqt88lgqiYW7Qt5j-yZh4mVNa_9ufu7e7Ou7gKqLDV7mKtA9vqXI4m3D8VQI8qBnbBwD4f1NT0EDCpk4_I48F3FpH2lI4kJ-E7nz4Ail6hrDNj/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Rsm4qQDyh6om4lrQg25f_KiBjXOkapdqt88lgqiYW7Qt5j-yZh4mVNa_9ufu7e7Ou7gKqLDV7mKtA9vqXI4m3D8VQI8qBnbBwD4f1NT0EDCpk4_I48F3FpH2lI4kJ-E7nz4Ail6hrDNj/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/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/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/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/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/AVvXsEjiaIoN-aQygxtNrG_OqxN7ewI-MW4wXfYvk8NJQh-OHDLMJrBtBC1ZxNupTqYJuXi_t8kjw5YoKk2ZOAEMmwUQ7oTf0URpq0ayPqv3qVa74CcwfmNmObuon7AS8YJVXzobawA7wdxnzudA/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiaIoN-aQygxtNrG_OqxN7ewI-MW4wXfYvk8NJQh-OHDLMJrBtBC1ZxNupTqYJuXi_t8kjw5YoKk2ZOAEMmwUQ7oTf0URpq0ayPqv3qVa74CcwfmNmObuon7AS8YJVXzobawA7wdxnzudA/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNOmGwo2Z1EqARcVVnSsWmN8L3ZiEYv7qzD-BbwRRCICkRnOZ4vIUNvNj1dKSODForkgkuJBRd4SPeugG7aP7hIhT1zN4BhBug6vuzgZ1_fggsKO4aeGIcJsUIP6bIqm29p5sWjZRUQRW/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/AVvXsEiSrbZVSDOfJ7j4hxb3s7JG_2qx8FTG9tyrjWPHu3KxkDeb7bq81qudXDP6VqPhIbvGxBZP69lpcaBodqKntmAuWLScFhMori1iDuuSUdkI7fkU7sdW1CJXTaBKaMEOaO2g1KGsWDGrg0md/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3tn-DwuHmrHhyI-k_lsmutc9dM3OTrxJzSZWsdN0T4LHmd-Yb8E8aVHOXY8Y5hd5_k3kPICtwPiswbGWXxsK4kFBcb8M-n8XeYKXO2ZZAtGP8NgVDApQaX6mx8Ud4psUyR7EpzwSxiqNR/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZSfEJGp5bzXgN0gGMmNcEA6nQ1JUdR_4bw8JT1Xtgj9Ih2D2B4-oMDXFWhFFSJK8zzo5Yb0STBd9XUbkvQb1VN_fRDpaT5hf7hDomDkLemTrgE0pmSSQ9JUOsYO_BxKmjIFL8lFWxwrR/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZSfEJGp5bzXgN0gGMmNcEA6nQ1JUdR_4bw8JT1Xtgj9Ih2D2B4-oMDXFWhFFSJK8zzo5Yb0STBd9XUbkvQb1VN_fRDpaT5hf7hDomDkLemTrgE0pmSSQ9JUOsYO_BxKmjIFL8lFWxwrR/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQFYfAorOCHoRAv8CapuZAYKa_kyF6Qxn1ECYvNZPEfnHZwjTkEvLYtUWFYUSVB03zMHzVdXo8fcy_yCTbLPGbo00QNvHc3XC-ChovftKdGwaZtZudTFH3jJiH5H7fT2gV_Hn1wJ4XOp9/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj90pswo9sYun0sUmCmzS8me0TO9Al2dVBK3WL4UfhYFyROdX5FfRE6n6Z-QsnKNqiU1Ev0cGZocJEsI0DBFx1BkFT_oLzkNgznGaX2Ob8BvCT9OsMjvW1DZWTOoI5jSblVYz6D2nk-ec6A/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFZSGAC-ccwfCQaH6bj4d76honES4IJdT9uq6LQwnVEebLFlgOrcmkDhp8JiUJYWyqsO5G2NUw7MrEoSAjnrnrntkNvYKTqYdLU7hh2MOCchkp8AyShqwA7KwLBq5-_Qhtpw0e3KERGGlU/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fIB2e3m46JhH8NCZ8qST59S1UKUQg2Rs2wbxyi9opes0b8ajVG1CchV7_xPfforR6kJg9jjE938Yvc6uASEI55dcByENf85bFpip3AHvbyr61RLjybwm538uTWyE9S9k8AgRsurJjZYi/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')");
}

/*-----------------------------------------------------------------------------------*/
/* 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/AVvXsEgK4Uyqi8xCjK-z1LRXsYB-t9oEqVCdtVOP_2fzD9bJg5lZxu1rY6DCXoxQ5xVlUKTpYnOqbK1G6UP_517huYc65ErI1i2TNntCn46Ehph7ySUNG-NPSkeApm_Z0P8S7lTv4ak1XS1GwGj9/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>


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)

Need Help?


I have kept the installation extremely easy,if still you have any queries or questions about customizing this gadget then feel free ask me.I will solve your query as soon as time allows.

Credits


I have spent my hours on customizing and editing this gadget.Actually I use this gadget on my blog but one of my loyal reader asked me for that gadget so I kept my word and sharing this gadget with you.If you are using this gadget then you should not remove the credits links present on the footer of gadget.Also if you want to share this gadget then kindly link back to this article.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Related Posts Plugin for WordPress, Blogger...