Add Simple CSS Popup Facebook Like Box Widget in Blogger Blog

Now a days I am focusing on sharing social media widgets for blogger blogs. In last post I shared Mega Social Subscription Box and today I am going to share Pure CSS made, Simple and Beautiful Popup Facebook Likebox for Blogger. No JQuery is used in this widget, thats why this widget loads quickly while loading blog page. Popup Facebook Likebox of your Fanpage always appears to each and every visitor of your blog. It helps you to engage more and more people to your Facebook Fanpage by which you can boost up your blog traffic. By this Facebook Popup Widget you will  Get Likes Easily for Your Facebook Fanpage Page Because When visitors Came To Your Blog And Popup Will Automatically Show on The Homepage And Force The Visitors To Like Our Facebook Fan Page.

(See Demo Image Here)

How to Add Popup Facebook Likebox Widget in Blogger?

STEP-1: Login to your Blogger Dashboard.

STEP-2: Goto Layout tab.

STEP-3: Then Click on Add a Gadget option.

STEP-4: Select widget type as HTML/Javascript.

STEP-5: Now Paste Following coding inside it.

STEP-6: Then Click on Save and Enjoy!

<style type="text/css"> * html
#Bbt-css-popup-div { position:absolute; overflow:hidden;} #Bbt-css-popup-div { display:block; top:0px;
left:0px; width:100%; height:100%; position:fixed; background-color:none; margin:0; overflow-y:hidden;}
#Bbt-css-popup- { background-color: #fff; overflow:none; overflow:hidden;} .Bbt-css-popup- { width:333px;
overflow:hidden; height:370px; 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="Bbt-css-popup-div"> <div id="Bbt-css-popup-"
class="Bbt-css-popup-"> <center> <h3 class="title"> <img src="https://lh3.googleusercontent.com/-
y59ffB_1WgQ/Ua9mSc9idpI/AAAAAAAABEM/YZiBgEtgQe8/h117/fb0.png" /> </h3> </center> <center> <iframe
src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages/Best-Blogger-Tricks/691903110868897‎&amp;
width=300&amp;colorscheme=light&amp; show_faces=true&amp; border_color=%23ffffff&amp; stream=false&amp;header=false&amp;
height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:216px;"
allowtransparency="true"> </iframe> </center> <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
('Bbt-css-popup-div') .style.display='none'"> <img src="https://lh6.googleusercontent.com/-BTm-WAqkztI/Ua9pgU-
16fI/AAAAAAAABEs/valx8qUqNV4/h120/exit.png"/> </a> </div> </div> </div>

Editing:

• Just Replace pages/Best-Blogger-Tricks/691903110868897 with your Facebook Page Username.

Last Words:

You have successfully Added Simple CSS Popup Facebook Likebox your Blog. If you have any Question about this, feel free to comment below. Like our Facebook Fan Page also and Follow our google Plus Page also.