Pop-Up Facebook Like Box With Jquery For Blogger - V1 - Helper Blogger

Helper Blogger

Blogger Widgets | Templates | Tutorials

    • Latest

    Wednesday, 11 January 2012

    Home Blogger Widgets Facebook Jquery Plugins Social Media Pop-Up Facebook Like Box With Jquery For Blogger - V1

    Pop-Up Facebook Like Box With Jquery For Blogger - V1




    Some days before I was posted a tutorial about Pop-Up subscribe window using HTML/Css. But today's widget works with jquery. When your blog's page loaded successfully then this comes out. Via this like button your users can directly like your facebook page from your blog. 



    Advantages Of Using This Widget

    • It creates Lightbox effects and outcomes.
    • Includes close button with hover effect.

    Disdvantages Of This Widget


    The ip address from the targeted visitor is actually saved inside web browser cookie even though the page loads for a second time the widget will not be called yet again for that exact same guest therefore getting rid of the possibilities of annoying the frequent or regular subscribers.

    How To Add It To Blogger ?


    I tried my best to make installation of this widget easy , If you found any problem while installing please mention it in comments.Let's see how to install it.

    1. Go to Blogger Dashboard > Design > Edit HTML.
    2. Find </head> tag using CTRL+F function.
    3. Paste below code just before that.
    
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://btsnts.googlecode.com/files/btsnts-fb-popup.js"></script>
<link rel="stylesheet" href="http://btsnts.googlecode.com/files/btsnts-fb-popupcss.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=flase') == -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:"#btsnts"});
}
});
</script>

    UPDATE

    • Go to Blogger Dashboard > Design > Page Layout.
    • Choose Add A Gadget > HTML/Javascript.
    • Paste below code content section.
    
<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/AVvXsEhgxDSm8N9thdHcV-g0B_WyzPwcZffBxJ3r53_Cz-CDOAiDUm5ilX7qtpPh-BBpNq5tkRql0sbY7LudpgBappYLCtA2DHz25FBVpbyHz11dRGxEkPq_j0kQvzaGYaiuQbU7gwBd6zZINC0/s1600/controls.png) no-repeat 0 0;} 
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXoXoStpqwwAm4Cbq1FyHdGXbtwkSpJAvBRADISHBS_zciPKPLh5QQzjAgcKajD5tYTG_5JVC19f_LsFZbt4CGK2zy9I86MYzrpVvIQvaQKg1TONevZMC6XU42Hr6rQEUnMw5y-t9i60/s400/border.png) repeat-x top left;} 
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxDSm8N9thdHcV-g0B_WyzPwcZffBxJ3r53_Cz-CDOAiDUm5ilX7qtpPh-BBpNq5tkRql0sbY7LudpgBappYLCtA2DHz25FBVpbyHz11dRGxEkPq_j0kQvzaGYaiuQbU7gwBd6zZINC0/s1600/controls.png) no-repeat -36px 0;} 
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxDSm8N9thdHcV-g0B_WyzPwcZffBxJ3r53_Cz-CDOAiDUm5ilX7qtpPh-BBpNq5tkRql0sbY7LudpgBappYLCtA2DHz25FBVpbyHz11dRGxEkPq_j0kQvzaGYaiuQbU7gwBd6zZINC0/s1600/controls.png) no-repeat 0 -32px;} 
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXoXoStpqwwAm4Cbq1FyHdGXbtwkSpJAvBRADISHBS_zciPKPLh5QQzjAgcKajD5tYTG_5JVC19f_LsFZbt4CGK2zy9I86MYzrpVvIQvaQKg1TONevZMC6XU42Hr6rQEUnMw5y-t9i60/s400/border.png) repeat-x bottom left;} 
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxDSm8N9thdHcV-g0B_WyzPwcZffBxJ3r53_Cz-CDOAiDUm5ilX7qtpPh-BBpNq5tkRql0sbY7LudpgBappYLCtA2DHz25FBVpbyHz11dRGxEkPq_j0kQvzaGYaiuQbU7gwBd6zZINC0/s1600/controls.png) no-repeat -36px -32px;} 
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxDSm8N9thdHcV-g0B_WyzPwcZffBxJ3r53_Cz-CDOAiDUm5ilX7qtpPh-BBpNq5tkRql0sbY7LudpgBappYLCtA2DHz25FBVpbyHz11dRGxEkPq_j0kQvzaGYaiuQbU7gwBd6zZINC0/s1600/controls.png) repeat-y -175px 0;} 
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxDSm8N9thdHcV-g0B_WyzPwcZffBxJ3r53_Cz-CDOAiDUm5ilX7qtpPh-BBpNq5tkRql0sbY7LudpgBappYLCtA2DHz25FBVpbyHz11dRGxEkPq_j0kQvzaGYaiuQbU7gwBd6zZINC0/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/AVvXsEjfgou7qEbL4In5a8gc34fvij2xonnMmq-_tIyrUgRn6dimr5Wsj_jlAWuNZbF79IeXD9OZas-X3Z7o_vG1aRoEHDsIWLJWMYqWFNXWGubYnyc_lJkGGIoz8c3sSRbkvLuZ26w4-l-QPSo/s400/loadingbackground.png) no-repeat center center;} 
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMf1bhxDKOU7VMWs2HUaJ-ZjQ4v_KU6MFQcaTgp_djr10ArPhbs-BiVX2cHmUEUGQEOTfT0E0Win9AHRhE8SvmuIJ_L7Ud3PIQZbZ7C7Tlnrrhv7PFtsXXxQW1Rl0pG1AL7Tkx4ktHcGw/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/AVvXsEhgxDSm8N9thdHcV-g0B_WyzPwcZffBxJ3r53_Cz-CDOAiDUm5ilX7qtpPh-BBpNq5tkRql0sbY7LudpgBappYLCtA2DHz25FBVpbyHz11dRGxEkPq_j0kQvzaGYaiuQbU7gwBd6zZINC0/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://widgetsforblog.googlecode.com/files/helperblogger-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*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;" >%u25BC</p></center></h3>  
<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"></iframe>
</center> 
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.helperblogger.com">Blogger Widgets</a></p> 
</div> 
</div>


    Replace btsnts with your FB page username


    *Don't remove F which i added just before btsnts, If you removed it then your widget will not works...


    Please do comment on this widget....
    Tags
    Share This
    Author Image

    About Rahul

    By -
    Labels: , , ,

    3 comments:

    1. Tushar Dwivedi25 February 2012 at 15:26

      u hv to remove this line if u have already included j-query in ur blog through some other widget....
      script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script

      ReplyDelete
    2. BIG DOG14 January 2019 at 22:13

      Generally I don’t read article on blogs, but I wish to say that this write-up very forced me to try and do so! Your writing style has been amazed me. Thanks, quite nice post. webdesign

      ReplyDelete

    If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM

    Subscribe to: Post Comments (Atom)

    Author Details

    Hello Reader. This is Rahul, the author of Helper Blogger. Hope you have found this content useful. Do follow us on social media to stay updated with our latest widgets and tutorials. Also, don't forget to share this post using share buttons located just above.