Add Amazing Facebook PopOut Like Box

After some time of Vacation on Advanced Facebook Like Box Series, i'm finally here with a different kind of Facebook Like box. You know that social media is the best place to promote your website or blog. Every blogger loves social media and they have putted social widgets  on their blog or website. Facebook like box is a widget provided by Facebook Developer Team, which allow readers to stay engaged with your facebook updates, if they hit like they can see your updates on their wall. By default facebook like box comes with normal design, but by using some css and javascript/Jquary hacks, we can make it on different design like sliding, popup, rounded, popout etc. In this post im going to tell you the way to create a Amazing pop out facebook like box. When somebody clicks on Join Apply the given instruction carefully.

Want Demo? 

If you want to see a demo of Amazing Facebook PopOut LikeBox, Click Here. And click On Join.

How to Add?

You don't need to carry a heavy stone to add this :) below are some codes copy them and go Layout >> Add a Gadget >> Add a HTML/JavaScript Gadget and Paste the code.

<!-- Amazing Facebook Like Slide Out Widget For Blogger by PokharaTech.com-->
<a href="javascript:showHideFL()"><img border="0" src="http://i49.tinypic.com/2ppwjth.png" alt="Member" title="Click to Like" style="position: fixed; top: 150px; right: 0px; cursor: pointer; opacity: 0.5; " opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;"="" height="50px" width="50px" /></a>
<script src="http://widcraft.googlecode.com/svn/jquery.min.js"></script><style type="text/css">#fl{position:fixed;left:150px;z-index:+1000;}* html #fl{position:relative;}.flcontent{float:left;
border:2px solid #676767;background:whitesmoke;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;-moz-border-radius-bottomleft:15px;-moz-border-radius-bottomright:15px;padding:10px;
}</style><script type="text/javascript">function showHideFL(){var fl = document.getElementById("fl");
var w = fl.offsetWidth;fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);fl.opened = !fl.opened;}function moveFL(x0, xf){var fl = document.getElementById("fl");var dx = Math.abs(x0-xf) > 25 ? 35 : 1;var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fl.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}}
</script>
<div id="fl" style="bottom: -401px; "><div class="fltab" onclick="showHideFL()"> </div><div class="flcontent"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpokharatech&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
<div style="text-align: right;"><a href="javascript:showHideFL()">[Close This]</a></div>Get This: <a href="http://www.pokharatech.com">PokharaTech.com<a/></a></a></div></div><script type="text/javascript">var fl = document.getElementById("fl");fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";</script>
<!-- Amazing Facebook Like Slide Out Widget For Blogger by PokharaTech.com -->

Costomization

Replace pokharatech with your facebook page username. All Done, now Save HTML/Javascript.

From The Editors Desk

As always i'm trying to introduce simply about this widget, i have spent my valuable time to customize this widget so please don'nt remove the Credit Link. If you face any problem during these steps feel free to write in comment box. To g et regular update of PokharaTech dont forget to Like our Facebook Page. Peace, Happy Blogging.