BloggerTips - Get Tips, Tricks, Themes and Tools to improve your Blogger Design and Performance...: jQuery Popup

Showing posts with label jQuery Popup. Show all posts

Showing posts with label jQuery Popup. Show all posts

jQuery Popup For Facebook Like Box

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

Now go to Blogger Dashboard > Design.
Add a Gadget > HTML/JavaScript.
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/AVvXsEjxM-CXF2LaMVxTt590miinDZq4UsV1JSP3WqVlC7HMoHuYNISr8KPFx1BHWtQzIIG2KJv6Q62MQa2aYWZT1YIZN5ZTO7JZxR8LBPvSP6BvX-u6Nzpjjm5cU-0nwaF3UlkqCWxH6tCJLTwL/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgin00YTkyAEmLBmHKtjD5WqtlYDhsvwtRZe3QLgNNEhbq232vT5sQZK_hrQ1kox4M250gsWOHpLmNc7saJo4-UsoowbSnvi5RzC0Cxfd-ZgFKHbsLdAX_jOC7KgXzhkEKVp1KV6XtRsbi-/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgin00YTkyAEmLBmHKtjD5WqtlYDhsvwtRZe3QLgNNEhbq232vT5sQZK_hrQ1kox4M250gsWOHpLmNc7saJo4-UsoowbSnvi5RzC0Cxfd-ZgFKHbsLdAX_jOC7KgXzhkEKVp1KV6XtRsbi-/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/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/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/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/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/AVvXsEi5lafJMJDRsSpOph1L_q_JPnmcVkCmurPU1pGGIxHfFDv3N4rgL2m6e257qpA75D8vqaQIO-Hd8SjxOiQ61KCmz2qZWy2-btt5yE8mTZGuV9XlCDxiJoDvdoGc7_C5q9hXG4b1Zd7pokQo/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lafJMJDRsSpOph1L_q_JPnmcVkCmurPU1pGGIxHfFDv3N4rgL2m6e257qpA75D8vqaQIO-Hd8SjxOiQ61KCmz2qZWy2-btt5yE8mTZGuV9XlCDxiJoDvdoGc7_C5q9hXG4b1Zd7pokQo/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7K5GbaM6TMgWZ1mtzIetPXRJbmArr-Rrw7yp0U471z0wCr-XSaAWivXmcbrL7TT0an590LPHkseA10tQ0SjXMtqEvB5cN1Mi6C0KdsF6GFABUsdn11ISCWlZl7TwIpUlSqNNv3XREavO/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/AVvXsEikwagnh1eSG0EpRugi3H0YJbJeun-w6Jhr8unBbxLwKWMBlK1yffnhwafuEAfpwVvpp0u8L6H5TugohLB1up1NsEVbodEhF6deDQOPPnPjg38gzzPmc2AaIy-5O1C1X1v9skfOTIDbf_eR/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-83KUFCs5RtUb3nyzd3i0kYuwgP5GJvqWeTSwJrur7FDvcfN4NARkWQSmCqx4Vwd1Vndb4GmefplP6C0qXzuP0A0BxG7xgbpsu_LAE3McghWTxH7T-btD2M1E7lzqaz3krP_OuDGqFwPO/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2XiH9uNbgsvECZ3TMNs4q_Qfy1QbdKI64Gb-2M8CH0I5ToQKJPkzATVbv22A9rozVwPrRtqp2MWefoYbEUB10eUCcuXqOtf07JbFj9EtHW3qXYO_Bn6lbRZ3ruTwo9vTOUDoVUA8M4BCx/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2XiH9uNbgsvECZ3TMNs4q_Qfy1QbdKI64Gb-2M8CH0I5ToQKJPkzATVbv22A9rozVwPrRtqp2MWefoYbEUB10eUCcuXqOtf07JbFj9EtHW3qXYO_Bn6lbRZ3ruTwo9vTOUDoVUA8M4BCx/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVDqgSzC2BG4WSmqjkQ0KiIDMKrZU0o715497KBxbs03uxbtOSKIoFOEQ4YzEmBkFudnJWMqyt7iZNgs2MEEKfy-q2jRiJIm5TzvHR8CH1EBh5Q2mQXUV5-zsRByMUmtFadnOEbI2aVDf/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJ0Ex0HWEHaX8l_Dt70sEK2V0VGiNWzTDsXFQTbDa63GJ2nGKQwL7S87r_33GocI_hv1-D0MWMIMJOLxQ6EYtJZIeVvjB99-xfhYSgJlAb93bXM7kXtc-lqMuUNSbCglc5pEywob-j_6V/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1rb1eku7zRcG97R0W_bX8DxRRUWI4wlvss9q0QDSNYP8SMvHtp91aqtqsfYosC41sh9yZ2wy9NZ-RY6RqvnsA1oGqdgKXRfZ2k9edAiycI59vX-PLCV0Wp-kLCcuycTCgtV70SP2laJu/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDbI5klo04VBKqFxhjm9PoVT4e0QH8t_UdKeVcQKtIj5N2w4sqozlp_Xbin9g-mMAUYpf_JmZnM1PaoKGaRPDiA6EMDvHY51_UG1Y5_8rg1Jdsxud8j0li1kYpdvlCZAveoKAnN0-otCd1/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://helperblogger.webs.com/files/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>


<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1zqDlmYJEqm84gpLB6M9Gj30W-IU4Oyzjd4Otae5WH4eZypf5NQ5-O__gr04V62NzdC-cVJ9Xrvimz6fckE8t6C3qLkdL3xVe-zYqgZYe90g56Ezp87l9SZg_LjNt2yukUgMFNfM_g9SX/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&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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: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.