Header Ads

Amazing 'Facebook Fan Page Like Slide Out' For Blogger

 


Amazing 'Facebook Fan Page Like Slide Out' For Blogger












Now navigate to Layout and click on Add a Gadget and select HTML/Javascript.



Paste the code given below.



Code

<!-- Amazing Facebook Like Slide Out Widget For Blogger  by techpro365.blogspot.in-->
<a href="javascript:showHideFL()"><img border="0" src="http://4.bp.blogspot.com/-O6nMA1_akTo/To9NmwKzo4I/AAAAAAAAEJU/UFiFTyAJbnw/s1600/facebook.png" alt="Member" title="Click to Follow" style="position: fixed; top: 150px; right: 0px; cursor: pointer; opacity: 0.5; " opacity:1;filter:alpha(opacity="100)&quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;"="" height="32px" width="32px" /></a>

<script src="http://code.google.com/p/techpro365/downloads/detail?name=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%2FTechpro365&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]
</a></div>
</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 techpro365.blogspot.in-->


 Replace freakyguysx <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ffreakyguysx >with your Facebook fan page name in the following code.
Click on save and you are done.
If you are facing any problem in adding the code please feel free to let me know by leaving a comment or contact me.

No comments