Awesome facebook popup Widget for Blogger

Unknown | 22:55 | | |

Pin It Now!
Here is the widget that will help you to increase your facebook fans .This facebook popup widget is a jquery plugin.as facebook social widget is widely used so way2bloggerz brings it for your blogg to increase facebook fans to your page.this widget appear to a new visitor once in 15 days you can also customize it



STEPS
1.Go to your blogger dashboard
2.Now go to Layout and select add a gadget and choose HTML/javascript
3.Now copy the code given below and edit your facebook username and then paste it inside the content box of Html/javascript

<style>
#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;}

#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibD4QgLmygGNZYwv-ZQIEeF2eZuTfmmP4RvhCJr0WmndA_q8lmzgosauc4YxFEaxYfA3tVadT82x_LCcK2B5nBp2cgR75d_6nTs1X4Qt6r84Phg5cxwFAX75oiAsY5T9ssV-SbUH6ixKBw/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfARk5eXFqZIS_WkrLiML2tUUd4Kzdn1ncpifth6PMT2rOMySDOirG7XV-r6si_wW5hvhTx-IuUxcX5LqHmZOz1wOC2i08HRhGbIm-3ro8eIS0Lq9jAAVbV9AuiEel_CjZhn-GtdyxTPP_/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfARk5eXFqZIS_WkrLiML2tUUd4Kzdn1ncpifth6PMT2rOMySDOirG7XV-r6si_wW5hvhTx-IuUxcX5LqHmZOz1wOC2i08HRhGbIm-3ro8eIS0Lq9jAAVbV9AuiEel_CjZhn-GtdyxTPP_/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/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/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/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/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/AVvXsEhgOnuWeBa01JAaSEdG6nsgO41WCtDkv-gISF7kNpZkEJcFMAli7vjyK3lmMr4LbBEtWeR6Hf0Q-JDwmqJdMSt-VGcHm2ani-49ILb1vIXMW_aQR0-87esINkluWwzU5eK3X567TvjwjNt-/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgOnuWeBa01JAaSEdG6nsgO41WCtDkv-gISF7kNpZkEJcFMAli7vjyK3lmMr4LbBEtWeR6Hf0Q-JDwmqJdMSt-VGcHm2ani-49ILb1vIXMW_aQR0-87esINkluWwzU5eK3X567TvjwjNt-/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iK8paP2EhNaQiJIo1ZgojJRKmCw87OhRK7szxfksH1BAUSrKaiotYMm36h4rH8EU8fV_QGQIthZaHYtyGh6TAJUdNGc0hIrTgJHTLCEMCam4-B6pLMkDxjGlwRCjXnfB8VYQ4U5srWse/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

.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);
}
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYO2glSu9t7nDzr8EV8cHnxZgv1hdIp_cAoYn6hmqxifJvEjrqM2ij_3D2Nw1PcOIFXOug9VMrYnSS6kwRo1r_3T6XTsa6M96HNcgbHglSbX3QPgiK5Ll-fHj3WLAiQKMrOEk4b6oPoLHi/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRFKLceCzWIXwdhGyEOVGnSv-D35Is1LU6cOkyrDadPQ28J0vFxXJluk4lc4OFLPs4sigRY6RuTxbeFLLsB1b1do8gGI_kNeAuuM8TlEN__hTcAPuQN3wVHfOLfeQFJzXwE7aDqbQgO8GZ/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKUbxyqfSfxczw0HcfYPhbHr17Nn5zcaJOFSBict3HwPjnHAUpLZs7goS0oAeZZpfCdDPw1FDXe_JvYkOiSbuszqN_c1p5qbX-f35K4n9izCnBkWbvmlRZU8DyVJ_HP8pHa3WhXDd3lBS/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKUbxyqfSfxczw0HcfYPhbHr17Nn5zcaJOFSBict3HwPjnHAUpLZs7goS0oAeZZpfCdDPw1FDXe_JvYkOiSbuszqN_c1p5qbX-f35K4n9izCnBkWbvmlRZU8DyVJ_HP8pHa3WhXDd3lBS/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZiFceXG8yBiaU_94oUV637oVmA6ljXC_ohJnmL5Hs7JK5n6prKEpw31nbHuuT5f1z_Fd477AnbKtJC6oftERj2t4AN2_9HfaAjJngrYW4s-C4voHBbv5mzvuTsh-SHxw5HJuMlyZYo2up/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2XWT2b12CB6MqBRJbGb-Exm3UBjQKKKwpB2hhqucaIkJ1fbZwrcVOcU8fpW__1glgvmpVpT9H1fOA3-ywUq0jVVtPy0PuZxAJap5kIIviWbZrphtI6h73XI_MTqav1R7b_P2iGLl95hl/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwcV4KfuCBPetGcKuf-S270aT4r33zjLSt29KDrn4euL7x8ktslR6brGFKfcyBKp853Gcj1NeeVY1BoL9p_-Vo5OTyU2WLJccw_xocR_PSKidapYqdcv73O-fNaKM5Gj1BxBT-DJR3Fdc/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSz9tdrTgEj9YkxjQ_BYPz4Otz1EGpnqn9mJPALr-kWiQPZGkjuJ28h3z3An5Qr6VOzbOsE8MB0azX7B5HZAY3JR6nSps7ZhBkcx2WS-ptg4afUltc7-ZCLR295XBmi1HqImOaFPMkE51/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
/*-----------------------------------------------------------------------------------*/
#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://yourjavascript.com/11215013191/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*15;
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/AVvXsEiY6aKKM6qsS0lrFX8xOe45cXVKcBBHwTu0qhUch03LrmLvAxNqnaC0i5cOY_-3PFqpgjBc6JcE8dqUvBEVjLvTGxjg-KQhY50jSgp1_jxUnNUTE-uOLMJ5Sp0bX3WnORvwjNVdFYca67bE/s1600/joinusonfacebook.png" width:300px; height:150px;"/></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fway2bloggerz&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:45px; font-size:4px;" ><a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://way2bloggerz.blogspot.in/">Get This Widgets »</a> </p>
</div>
</div>


Important Customizations
facebook page Username
change way2bloggerz in line 117 with your facebook page username
cookie refresh time
cookie refresh time is set to 15 days that means this widget appears for the same visitor once in 15 days you can change it by changing value 15 in line 103 as you want 
Pin It Now!
Labels: , ,

4 comments:

  1. die4movies17 May 2012 at 08:29

    it want to appear every time w they refresh the page so how can i custumize it..plz help me

    how to change 15 to every time to apper

    ReplyDelete
    Replies
    1. Unknown17 May 2012 at 23:31

      simply change
      var fifteenDays = 1000*60*60*24*15; in line 103 to
      var fifteenDays = 1;

      Delete
  2. supun8 October 2012 at 18:39

    i wanna appear one time on one day, how fix it?

    ReplyDelete
    Replies
    1. Unknown9 October 2012 at 08:59

      simply change
      var fifteenDays = 1000*60*60*24*15; in line 103 to
      var fifteenDays = 1000*60*60*24*1;

      Delete

Subscribe to: Post Comments (Atom)