Awesome jQuery Popup For Facebook Like Box

How To Add This Popup To Your Blog

Now go to Blogger Dashboard > Layout.
Add a Gadget > HTML/JavaScript.
Paste below code after replacing my username with yours.

/*
    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/AVvXsEjzJmEgZilTarzborP5i1_XatCc4zudph6ll2Hj8zbs_PfEwe2G2qO1Siae0tk4YRaBoF1kl0pv26qdG-pOBrP002sL3ycEIijeGYwzTY5a_Yd7lxw8QcSTXuFPATq5PLiBMP3PDwxo_otX/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MMyKa-8DQ9UNt_fzsW6I0Ijtk5XEzs9qqhJ3sXyWXynFp_2DaW036wV6lRAiVQAyQWdwkf0p0ImOrtaOCeCTghyphenhyphenNp0lDTdsoE_2j6VJW1SPcAkWj7-xO3JUKRArW0FEbXH5vRdJehR-O/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MMyKa-8DQ9UNt_fzsW6I0Ijtk5XEzs9qqhJ3sXyWXynFp_2DaW036wV6lRAiVQAyQWdwkf0p0ImOrtaOCeCTghyphenhyphenNp0lDTdsoE_2j6VJW1SPcAkWj7-xO3JUKRArW0FEbXH5vRdJehR-O/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/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/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/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/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/AVvXsEjzlpjIFIJRg1TxxiDmo7roUPXbsFHkRdDnsFQNOsB1_Vbj82UEttoZMKSPEhFJSMA6ORtwei72olaULCL7zYjI1WeDxwB7b3NvJMLbNySTbjJIFVP4RftJC_JTNaWQqHICuJ5ur1qVPuIT/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzlpjIFIJRg1TxxiDmo7roUPXbsFHkRdDnsFQNOsB1_Vbj82UEttoZMKSPEhFJSMA6ORtwei72olaULCL7zYjI1WeDxwB7b3NvJMLbNySTbjJIFVP4RftJC_JTNaWQqHICuJ5ur1qVPuIT/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdjAr7a85IFdxFXsi6SmeZdataKd8kWhMWQ4hyphenhyphenmtxDmS3kYVsnRGUk9vNU9HHhknAwj78IbTbsH2G-owouEkhbQl7hNHV8h5aq3pRFuWf7s3vNme5Js8-vd4FuHFRG1RNo3kTVSgXhXAM/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/AVvXsEjm4TJa4QcqaWeamdvsHWu7Cw179LukGG5vl7wVKxYjjm3xtOUKMRl96ON_BswG_XSxpsalPbk2HkC3UmcgEvMjDKGNtf_49Z7pc1ze9XiHeOs9vbHVAk_INCDcKKRKNJgATyvLEqvDCZbp/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAqoq0OInruEWyrMspekFEnLhpsKKMTC7w6TShXodHF7seMBQL07RFg9y8PGkAdkWjP23Y4mffi05MIzn_4sFmNeA1gDTzSiFryacTq39AlP0ApNF_cg-5B1sTlGAMyy_XJTiDi5-dyeVS/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvDdAgilgxrQ2dlL-njXQp4-bUsxeAid7GHpC6sJK3tVWe_xgtaO8dy8kl1UDQP-neLkuSAW_cCOzoYqY1_q6brlzjQsixUg9TjI4JaQyzx4PiEB8tkp5q3UvsiLS3BSR5wVxLFYA6z_3/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvDdAgilgxrQ2dlL-njXQp4-bUsxeAid7GHpC6sJK3tVWe_xgtaO8dy8kl1UDQP-neLkuSAW_cCOzoYqY1_q6brlzjQsixUg9TjI4JaQyzx4PiEB8tkp5q3UvsiLS3BSR5wVxLFYA6z_3/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTDJoF2CgpRM1_Wv72K9oc-XlwG-0H_BgZzznDruVv01M_NM0C49t4rfRKFCjbiiq48zjdSpV3OlMhiYvUn7hxXv2YZt3MELR827ZDR_At9u2sp7rG6GwvLUxe8l7Wlt3jt-5v1yytRXlt/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvLvwxkxeoX7vTjBrz3qUQa8HSPs24G5HUMvELHA6lddnjGWehIlOMP5v8HDeA_C_ZgLEV-6A6XkgX89MB6ZIi3vTnC6SmKyMef0rVWLS88edokJat5Z6TW76LKWu0QyVgpHcbZpn0aOrm/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKU325cMKp2fgzZAgzV8aEAEaaFXg6AAxHTaLCWOw0UkOgdxY4T4ni07WjzMWjDZy1bgB315qtfnirMrmCZC3GsberQGKBTGc3rX_PgMQSIiiUI5GY0_xhT8io5v1f_pnSZ6S-9-W7IFv/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoptoWcjkLw7Zer16_a8LtVtoc99-zriMrz9BVTjvmMpaYjez52E6gt_ccIXcue2OD6NBJpY1h1MlVwbA7oSyfQR5O0_rRY8lU2wJnuVwnxCcwvWfDFnqiH4_XIw_oqON9HBs8PwMlM7aF/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 Shiraz Shakeel
/*-----------------------------------------------------------------------------------*/
#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>

----------------------------------------------------------------------------------------------------------------------------------
Now replace GamesAndSoftwaresAndManyMore with your facebook fan page username.

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

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Shiraz Shakeel

Monday, 21 January 2013