Thursday, April 19, 2012

How To Add JQuery Pop Up Facebook Like Box On Blogger

Posted by Anonymous
Tags :
Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

A pop up widget with jQuery window containing Facebook likebox will appear when new visitor arrives to your blog. This plugin will only work on blogger. An active Facebook pages with huge likes can drive your professional blog into very popular. The more traffic you can make , the more chance of earnings from your blog you can make installing Google AdSense ads and BuySell ads. So a nice JQuery Pop Up Facebook like box on your website can increase your facebook like.






This popup appears only once to every new visitor. The IP address of the visitor is stored in browser cookies and as the page loads again the widget wont be called again for the same visitor thus eliminating the chances of bugging regular readers. It may look weird if the popup appears again and again on every page view. It will appear both on homepage and sub pages depending which page the visitor is accessing.

Now Lets see how to do this

Go to Blogger → Design → Page Element

Add a HTML/JavaScript Widget

And Paste the following code in the widget body and save

<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%;}
#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:#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/AVvXsEhFDkFHupJxoEcBkH74NkzLGDJTXb9I7aYCI-CFco-Bus4kgglUtSlHUGOn95v1n0HvdXywJwBc3Xk1frb3bQNSChqydUV4JNQiF1rUtDLVzykXSE0GLIn9EXMNpRd8kMg1dMTzGgcQd_w/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCKJeIRtRMksa8FKgDCo21K_wiiGoulQ6LRMsX01w98unY7mCBol0KciFL5kMVtykHCvQJgoXfesdNzfLIP_bSOFeqDN8sLr81HvZ0CvWt1LZew_9ty8rgPdHl5meqAlWlE0IbcbObI7A/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDkFHupJxoEcBkH74NkzLGDJTXb9I7aYCI-CFco-Bus4kgglUtSlHUGOn95v1n0HvdXywJwBc3Xk1frb3bQNSChqydUV4JNQiF1rUtDLVzykXSE0GLIn9EXMNpRd8kMg1dMTzGgcQd_w/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDkFHupJxoEcBkH74NkzLGDJTXb9I7aYCI-CFco-Bus4kgglUtSlHUGOn95v1n0HvdXywJwBc3Xk1frb3bQNSChqydUV4JNQiF1rUtDLVzykXSE0GLIn9EXMNpRd8kMg1dMTzGgcQd_w/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCKJeIRtRMksa8FKgDCo21K_wiiGoulQ6LRMsX01w98unY7mCBol0KciFL5kMVtykHCvQJgoXfesdNzfLIP_bSOFeqDN8sLr81HvZ0CvWt1LZew_9ty8rgPdHl5meqAlWlE0IbcbObI7A/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDkFHupJxoEcBkH74NkzLGDJTXb9I7aYCI-CFco-Bus4kgglUtSlHUGOn95v1n0HvdXywJwBc3Xk1frb3bQNSChqydUV4JNQiF1rUtDLVzykXSE0GLIn9EXMNpRd8kMg1dMTzGgcQd_w/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDkFHupJxoEcBkH74NkzLGDJTXb9I7aYCI-CFco-Bus4kgglUtSlHUGOn95v1n0HvdXywJwBc3Xk1frb3bQNSChqydUV4JNQiF1rUtDLVzykXSE0GLIn9EXMNpRd8kMg1dMTzGgcQd_w/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDkFHupJxoEcBkH74NkzLGDJTXb9I7aYCI-CFco-Bus4kgglUtSlHUGOn95v1n0HvdXywJwBc3Xk1frb3bQNSChqydUV4JNQiF1rUtDLVzykXSE0GLIn9EXMNpRd8kMg1dMTzGgcQd_w/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/AVvXsEjj8uN4U4QY6dYGQ54PROGwSJHweK0bKZk8MmRN6IjLHlqLC-YO81OWtYxwamKw_6CmCKLEZ8Y1-PUZ7YDIcV92_0khbecFrhRDWCqX1_U3-eFvywGe06S6OypIeHZMCrsE5MOBu-hYHWI/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQEOL_8KbkAe_eZ1tP6kE6Fpqeg_tqDj8IXgGIg7y1l-7joaD-LyL_StUzmoujRcVmK6zsdhyUD4Ju8RmPDK1dJdk9SN_T3Kcy74N9bxRH1WgbLBw7j0z1rh9MbPYH-Gd2ZMX1tMjpxBQ/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/AVvXsEhFDkFHupJxoEcBkH74NkzLGDJTXb9I7aYCI-CFco-Bus4kgglUtSlHUGOn95v1n0HvdXywJwBc3Xk1frb3bQNSChqydUV4JNQiF1rUtDLVzykXSE0GLIn9EXMNpRd8kMg1dMTzGgcQd_w/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-title {
color: #F66303;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

<script src="http://mybloggertricks.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:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >�</p></center></h3>
<center>

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

</div>
</div>

You have to replace with your Facebook page's username

Please comment here or share with your friends if you like and thank you

If you enjoyed this post please subscribe to me for free updates!

Follow Us!

Google PlusRSS FeedFacebookTwitterPinterest

Hi, I Am the founder of ALLBLOGGINGTIPZ. I like Blogging. It's Blogging is my passion.

Follow Me On Twitter Or Facebook Or Google +

Author Box byTech Blog

0 comments:

Click Here To add Comment

Subscribe to: Post Comments (Atom)