Add Facebook Like Box Widget With Hover Button Effect For Blogger

Monday, October 28, 2013

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/AVvXsEg-fIEpPLQccZZHKh2rLbr0kWr_TUngxSBg3Yux9HtTyssKrHvMeQO7jJAnXYVXOuXwS1-aeMEp6OaDHCISnYUfQ1rnnH3CkY0NhM_-OtZtUzK4wKcDWlmpP_fOQ2WVcptClhDnTuYSjhA/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;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/TH3NEWS&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.

Share On Google+Add This To Delicious Tweet/ReTweet This Share on Facebook StumbleUpon This Digg This

abdelali tibicht

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.