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.

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

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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5o6XG-iK_8-YB_t5N07BjXQfsSt2ElBIhaVgARgHPvwC-CVlDexB3Zxw9VIEk1MquOXcDKQLpaFUtW-iHIGlFRyq2jsUcwn57d-Pz2CUSxkwpyLs9YAF0Y0SZkGms32HCfCKRulpEzQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_y_bxFh6kwFT2hdLJFW7AvQxF87YBR6XY0iCg3s0KUHdD4iu_R466Ror-Ky9boOkGrbUy3omVYimuGNwC38M4nSRpabpAhX041Od5G8NMIUb1q6K-QccXOz1xT0gkFF7AGrk7r8N4g/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_y_bxFh6kwFT2hdLJFW7AvQxF87YBR6XY0iCg3s0KUHdD4iu_R466Ror-Ky9boOkGrbUy3omVYimuGNwC38M4nSRpabpAhX041Od5G8NMIUb1q6K-QccXOz1xT0gkFF7AGrk7r8N4g/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