MyBacklink86 - 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.
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:35%;
margin:0px 0px 0px -182px;
width:625px;
height:auto;
padding:5px;
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>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
<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>
YOUR CODE HERE
</center>
<!-- HTML End -->
<a class='close' href='#'>×</a>
</div>5. Replace YOUR CODE HERE with the your code 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.
