Thursday, 6 June 2013

Facebook Like Box CSS Popup Widget V1.0 By Gaurav Mankotia

Everyone want to make a facebook like pop up widget for their blog or website as they want their blog/website to be popular and known to many people.
Today i am going to show you how you can do it.

How To Put Facebook Like Box CSS Popup Widget.

1)Blogger Draft's>select your blog>Layout>Add Widget>select "HTML/JAVA Script".

2)A new window will open,Just copy and paste the following code below content in the widget.


<!-- FACEBOOK LIKE BOX CSS POPUP WIDGET --> /*FACEBOOK LIKE BOX CSS POPUP WIDGET Web link to gadget code:http://theindiantechnology.blogspot.in/2013/06/facebook-like-box-css-popup-widget.html*/ <style type="text/css"> * html #tpfanbox{position:absolute} #tpfanbox{display:block;top:0px;left:0px;width:100%;height:100%;margin:0;overflow-y:auto; z-index:9999} #tpfanboxx{background-color:#fff;overflow:none} .tpfanboxx{width:320px;height:380px;position:fixed;top:45%;left:50%;margin-top:-200px; margin-left:-200px;border:7px solid #6D85B5;padding:20px;z-index:9999} .tptitle{background:#3B5999;color:#fff;font-size:16px !important;font-weight:bold;margin:5px 0;border-left:20px solid #6D85B5;padding:10px;line-height:25px;font-family:Arial !important; float:left;z-index:9999} </style> <!--[if lte IE 6]> <style type="text/css"> /*<![CDATA[*/ html {overflow-x:auto;overflow-y:hidden} /*]]>*/ </style> <![endif]--> <div id="tpfanbox"> <div id="tpfanboxx" class="tpfanboxx"> <h3 class="tptitle">GET ALL UPDATES VIA FACEBOOK JUST PRESS <img alt="Like" style="vertical-align:middle" src="http://goo.gl/bX6c0" /> BUTTON</h3> <center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFACEBOOK_FAN_PAGE_NAME&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/> <center style="float:left; margin-left:10px;cursor:pointer;"><a style=" font-size:xx-big; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('tpfanbox').style.display='none'">[X] CLOSE</a></center> <center style="float:right; margin-right:10px;"><span style="font-size:xx-big; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-big; color:#3B78CD; text-decoration:none;" href="http://theindiantechnology.blogspot.in/2013/06/facebook-like-box-css-popup-widget.html">The Indian Engineers</a></center> </div></div> <!-- FACEBOOK LIKE BOX CSS POPUP WIDGET -->

3)Replace the "FACEBOOK_FAN_PAGE_NAME"  with your facebook page name.

 for example: 

My facebook page  is "The Indian Engineers"  
Therefore i will replace the "FACEBOOK_FAN_PAGE_NAME" With "The Indian Engineers".
So i will replace it  with The Indian Engineers
4))keep the Title Empty.
5)Save it and check preview,it should work.

Pleae like and feel free to comment if you face any problem.

No comments:

Post a Comment