Add beautiful facebook popup like box to blogger with four styles

                               Hai bloggers today i am going to post the most famous facebook popup like box with light effect.It is modified with four attractive tyles.It is easy to install and also works with most of the templates.Because it is created with css stylesheet not in jquery.This popup box have not timer but it have exit button.So bloggers can get more fans on facebook.

• First go to your blogger dashboard.
• Then select layout tab and click add gadget.
• Now select HTML/javascript gadget.
• Now paste below code into content box

<style type="text/css">
* html #bwhiststylepopupdiv {position:absolute;overflow:hidden;}
#bwhiststylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-color:none;margin:0; overflow-y:hidden;}
#bwhiststylepopup {background-color: #fff; overflow:none;overflow:hidden;}
.bwhiststylepopup {width:333px;overflow:hidden; height:453px; position:fixed; top:45%; left:50%; margin-top:-210px; margin-left:-200px; border: 10px solid #999; padding: 20px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="bwhiststylepopupdiv">
<div id="bwhiststylepopup" class="bwhiststylepopup">
<center><h3 class="title"><img src="http://i1203.photobucket.com/albums/bb389/chandruchand/blogger-whist2.png" /></h3></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggerwhist&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>
<br />
<div style=" float:left; margin-left:0px; font-size:9px;cursor:pointer;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('bwhiststylepopupdiv').style.display='none'"><img src="http://i1203.photobucket.com/albums/bb389/chandruchand/exiitcopy.jpg"/></a></div>
</div>
</div>

• Now replace bloggerwhist with your facebook pagename. 
• Save your widge
• If you want change popup box header image,replace http://i1203.photobucket.com/albums/bb389/chandruchand/blogger-whist2.png with below image links.

header-1

http://i1203.photobucket.com/albums/bb389/chandruchand/blogger-whist1.png

header-2

http://i1203.photobucket.com/albums/bb389/chandruchand/blogger-whist3.jpg

header-3

http://i1203.photobucket.com/albums/bb389/chandruchand/blogger-whist4.jpg

If you like this post share it

Tweet

Get free daily email updates!

Follow us!

Posted in: blogger widgets,facebook/twitter like box,floatingfacebook