Home Blogger Use Awesome jQuery Popup For Facebook Like Box - V5.1

jerry at

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.



Gadget Demo

click on "gadget demo" to see this demo 


<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/AVvXsEhtkPKafK8JN-VTEcnlXLyJ-g5EHjeZEi8naR-BBD3h2M27oJagy2FjqOn1ZUOfqp0cpYbIbVEwpTnFAisyUJx14nJzXmhX4wVmn3W4rBW8pNzS2YdBjVvbv_T5jKJN82XJi5qIJi1v_BaL/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2KFgBh-fo1UqeyBCM44A-IA3mQT8MryaGY1vR4R1VuD_woYX9orLbpUh8hggs-cw53KGZJovDp_wGrASXkyvSvke4RvP_pcc7_5-wUQ2jkB9v5KoxLcBV3AmhBc6PVW3H3MdflUvCo-A/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn2KFgBh-fo1UqeyBCM44A-IA3mQT8MryaGY1vR4R1VuD_woYX9orLbpUh8hggs-cw53KGZJovDp_wGrASXkyvSvke4RvP_pcc7_5-wUQ2jkB9v5KoxLcBV3AmhBc6PVW3H3MdflUvCo-A/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/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/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/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/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/AVvXsEhC95eZHLra5y70TyHRrPDzNPk1N0JE-D_iNVzty54XB554XtIlNEq-tOPydlA3XA5SzbE3kWfCVOqu8SboD7cPUuEU7VC4m3zcZGFTaBsPMu2ttofrlugQPmrkc8C93F1FM3u_7iMXrlD3/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC95eZHLra5y70TyHRrPDzNPk1N0JE-D_iNVzty54XB554XtIlNEq-tOPydlA3XA5SzbE3kWfCVOqu8SboD7cPUuEU7VC4m3zcZGFTaBsPMu2ttofrlugQPmrkc8C93F1FM3u_7iMXrlD3/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONyGPSUSHxiNpHPtUBu9_WVxDpou7QMAqKRr92Ci20F033TGWxjqSYwVfzWizOnabiYnW_8cPid6K_mnGoPXnnXvcfwTQIiDW_wVNfVLjfedsT_SsNZ17R3fvMrGfIFLK43PDikbIa8AB/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/AVvXsEi5cbIPASS6DbBmP3jguW7kzt3yjp3X2FCEX5qQ0a9ScCFFAkYgVYwKwCQtUdkv9dzv_Fy4gRSQdONxopEbRSjzlz-TBeZ-Mep90ezGLnKNqcFQG6Bz5zLzCmNBFTFHAZUehW8IMCCEEhn0/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinlhJY9GumzOtkfRFZJBZX0mqN3lshZWvuVq84nJMC-qz1UlkdGkg_enRBlYMQ2FMYmsYIaJtcTBjDD1WelzmpxHUwPzVUWigDCUgHx7XLFi0yRGEO798paXzQOkoNLDoxiaF_I6BlRcCS/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Mzq-FPk4uaZVoak9ALPPpXyxpFbpuAIewrfDfyvp-__hUaH9G5XgYPRvRoZrxIe5F9iz5sWTTAXQ8NBpMtZC49OmKkX8G55nnY95Agby9j07eXWX9NAmZZY_qKf5op4vA4LIqsYSC44N/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Mzq-FPk4uaZVoak9ALPPpXyxpFbpuAIewrfDfyvp-__hUaH9G5XgYPRvRoZrxIe5F9iz5sWTTAXQ8NBpMtZC49OmKkX8G55nnY95Agby9j07eXWX9NAmZZY_qKf5op4vA4LIqsYSC44N/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKlYU6v-tdjtxs1EuctkfrbeSjT5FjtN3Gwbd-R-qkFJbZeW_GwOCMWQ-RRcQY7T9xod7dMQo_OlZD7OJFH940f24FUZlA0kniMaT1gTcEyxyZ3sGYNsbAq8VB3xGnJDgYouiAEmAdRios/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNOVK-gbpvseSJLjlzVRguK-nHA8DCpX-svEyJFbeKoF0l4tDugm3y-111przltuceY3jqMpczi-wCF5-vVVIxeetxcYP53B9SgA8YrEPJQl6HWEC00N3tp5_Mzms9acXueqSMXoQbR0ey/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMtT-qalVqamtaN01OsvZKRRbdRdhDA5GRkS-bMRJwgh7fZPtdQB5cHs_ccRi8LbpBwMi8yfi7lUmgUatnU8IvmSQlNy8e4PTSa4LbyiE6ZzPs7PlEOTXhSKzT9-_NoaoApMNsEt5F253P/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6GKXnVpOpP7v-A4rYnBoDLAy59lWU9ic38Pf2iDFCF1McQNnBv0gdPDLHBNza95lV1UEVcF3SS39FD5vsh-EClnBaYO4JtKbMjwZ4kpXHiIc0gEsQZtxiseRdkDpvVsYymyNYz0iXmiiJ/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/AVvXsEgtS1RD7ro2Q1DXuzgwbgolIvE3NanYUPXgROL33OyaA0lu7cd7rMkzJ7acZtR8oOeAa9l_WI_FTgqrAT0h4bERYiOjR-IhE_9hpZ5Ti6znlIo0HkzgN0vtZx5wmPVj6mbjbOaBYK7-kkSf/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>

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




Share To:
Axact

Axact

Vestibulum bibendum felis sit amet dolor auctor molestie. In dignissim eget nibh id dapibus. Fusce et suscipit orci. Aliquam sit amet urna lorem. Duis eu imperdiet nunc, non imperdiet libero.

Blogger Use

Post A Comment:

0 comments:

Subscribe to: Post Comments (Atom)