Add Facebook Like Box Widget With Hover Button Effect For Blogger

Hello my friends, today I'll give you one of the most beautiful additions FaceBook, and do not disturb the user because it provides space and allows the user to browse comfortably, and contribute to increased like on facebook. I'm sure you'll like it.

HOW ADD FACEBOOK LIKE BOX FOR BLOGGER

Written explanation 

 1)Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it. 

<a href="javascript:showHideFL()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCkSfPMZCjmuQ6BuogUKZE6ewAho8ZbSRV9fgfTHLLWjHPKsEsjk26p-FHEMaOXCRHWyCcnpeq4j83dhjTSoVnHGf3SwKyamMf46YgGQf-r48EmLA71PnKry9DxAW8o89LrzESTdva8UM/h120/pctoolstips.blogspot.in.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)&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="130px" width="40px" /></a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/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=https://www.facebook.com/@@@@@@&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>
Powered By: <a href="http://newth3.blogspot.com/">NEWTH3<a/>
</a></a></div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

4) Customize your setting.Find any word click F3 or Ctrl+F. 

♥ Replace it URL HERE with your Facebook Fan Page URL. 

5) Save your Widget. 

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post