As we know Facebook is the largest social networking site with more than 1 billion active users, every day is growing up. So, at this point we need to have a fan page for our blog or site to be more attractive and more information about your blog.
One of the most prefers Facebook widgets for Blog and Site is Floating Facebook, it’s so useful and helpful for our visitors.
What you will do now it’s just to copy the code and put on your Blog or Site, let’s do this if anyone don’t understand feel free to comment me.
Let's Add Widget
1.Sign to Blogger/Click Layout/Add Wadget/HTML-JavaScript.
2.Copy code below and paste at HTML/Javascript.
---------------------------------COPY CODE BELOW ---------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsiuuzNxbO4uujeYPl7081z1bne4VHJZHm8vnNS3MqNrYvyx6JF6iTBBdFj25CHOB0zQHdSWFz9W6jEAMWn8WsAz9dK6QzkfH76QC6wqOeBu-9JLOLcgj5s5FyDIKBFpUIuQmr_X9CVVU/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:10%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Bluesky-Help/621155451349010?&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true">
</iframe></div></div>
------------------------------------COPY CODE--------------------------------------
3.For example like this image below >
4. Click Save.
Hope it helps you guys.
If anyone have problems feel free to comment.
Let's Add Widget
1.Sign to Blogger/Click Layout/Add Wadget/HTML-JavaScript.
2.Copy code below and paste at HTML/Javascript.
---------------------------------COPY CODE BELOW ---------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsiuuzNxbO4uujeYPl7081z1bne4VHJZHm8vnNS3MqNrYvyx6JF6iTBBdFj25CHOB0zQHdSWFz9W6jEAMWn8WsAz9dK6QzkfH76QC6wqOeBu-9JLOLcgj5s5FyDIKBFpUIuQmr_X9CVVU/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:10%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style="">
<div>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Bluesky-Help/621155451349010?&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true">
</iframe></div></div>
3.For example like this image below >
4. Click Save.
Hope it helps you guys.
If anyone have problems feel free to comment.
No Comment to " Floating Facebook Like Box "