How to Make a Facebook Like Floating in Blogspot


Want to get a number like (love) your blog's facebook page for more? There are many ways, one of which put widgets like box provided by facebook plugin with a model drift (float). Do not worry this widget will disturb your blog loyal readers, because although there hovering close button to remove the widget box like that.

Facebook like box widget if installed in blogs, facebook pages to promote. If you like our blog, readers will not hesitate to click like (love). Occasionally to certain pirode we can install the widget facebook like box to float this on the blog so like (love) amount, as well as with a visit to our blog facebook page.

Facebook Like Floating

 DEMO

How to Make a Floating Widget Facebook Like Box Blog
1. Log into blog account
2. Select Layout and then Add a Gadget
3. Choose HTML / JavaScript
4. Enter the following HTML code:

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.you-url-fb-fanpage-here.com?ref=hl&amp;width=292&amp;height=258&
amp;amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;
appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;"
allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>


5. Replace the red code with the URL of your Facebook page.
6. Save when done.


Just like managing a blog, managing facebook pages should also be creative. Remember, content is king, do not just put on the facebook page to post your blog feed. Provide interesting information in accordance with the theme of your blog content.


yX Media - Monetize your website traffic with us
yX Media - Monetize your website traffic with us