Add Facebook Popup Like Box In Blogger


   Facebook popup like box show all visitors to like your fan pages on start up any post. Today we provide you how to add Facebook popup like box for blogger in every post. This is an amazing and magical Facebook pop up like box specially for Blogger blogs that will help you to increases Facebook page likes of your blog.

Facebook popup like box widget for website or blogger

How to Add Facebook Like Box Popup Widget on Blogger Blog

Firstly you need one beautiful Facebook page such as created a new page on your personal or business Facebook’s. After you follow the bellow tutorial and add your Facebook popup like box.
  • Login your Blogger Dashboard click here 
  • Select your blog and click on right side bar 
  • Select Layout on drop down menu

Add jquery facebook like box popup at blogger gadget

Step 1:
A.   Click on Add Gadget in your Layout sidebar
B.   Choose HTML/JvaScript Gadget on popup window

jQuery Popup For Facebook Like Box With Timer

Facebook Popup Like Box Code In Web HTML/JavaScript:

Step 2:
A.   Write widget name in Title box
B.   Paste the bellow code in Content box

Add Facebook Page Plugin Popup Like Box to Blogger

Pop Up Facebook like box code for blogger:

<style type="text/css">
/***********************************************
  This code updated by: help2blogging.blogspot.com
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://lh3.googleusercontent.com/-rUv4L_9nz-8/T9sfSSJaZNI/AAAAAAAACf0/ETEgFKt-rR4/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {background-color: #fff; overflow:none;}
.exestylepopup {width:400px; height:300px; position:fixed; top:50%; left:50%; margin-top:-150px; margin-left:-200px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<br />
<div id="exestylepopupdiv">
<div class="exestylepopup" id="exestylepopup">
<center onmouseup="document.getElementById('exestylepopupdiv').style.display='none'" style="color: black; cursor: pointer; float: right; margin-right: -20px; margin-top: -20px;">
<img src="https://lh6.googleusercontent.com/-uSW_8HWcJII/T9shJ_kvWwI/AAAAAAAACgI/9xs1KMJtUtc/s40/exeideasclose.png" />
</center>
<div class="exestylepopup" id="exestylepopup">
<center onmouseup="document.getElementById('exestylepopupdiv').style.display='none'" style="color: black; cursor: pointer; float: right; margin-right: -20px; margin-top: -20px;">
<img src="https://lh6.googleusercontent.com/-uSW_8HWcJII/T9shJ_kvWwI/AAAAAAAACgI/9xs1KMJtUtc/s40/exeideasclose.png" />
</center>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhelp2blogging&amp;width=400&amp;height=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border: none; height: 260px; overflow: hidden; width: 390px;"></iframe>
</div>
</div>
</div>

Customize: Change help2blogging   red color code and replace your Facebook page name

Now click on Save button and enjoy.

---------------------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

Help2blogging logo for Facebook popup like box widget for bloggerHelp2blogging smile logo for Facebook popup like box widget for blogger

Comments