0 Simple Tips to Add Floating Facebook Like Box to Blog

In this guide we are going to tell you how you can add a Sailing Facebook or myspace like box in Blog writer. It is very simple to add and use and creates your website eye-catching. Those who need to create their weblog good-looking and stunning by including various public networking icons to their weblogs can create the best use of it. It is a exclusive device and is used by many blog writers.

This device normally continues to be packed to the right part of the weblog. However when one moves or flits around it, this indicates popular and that is why it is known as floating Facebook or myspace Like box. Its place can be modified to the remaining part of the blog’s whole body. You may keep it as you consider it appropriate to your blog’s web page overall look. It can be more useful for you if you've many Facebook or myspace prefers for your website.

This device is distributed to you with the objective of offerring it to more customers for benefitting as a blogger. This device is designed within JavaScript, CSS, HTML and JQuery. Here are the simple guidelines to add Sailing Facebook or myspace Like box to weblog.

Follow these simple actions below and add this device.

Go to Blog writer >> Structure >> Add a Gadget >> Choose HTML/JavaScript Gadget

Add an HTML/JavaScript Widget and insert below within that

 <script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy840jFml7_-4E0fQaNfcP02es4COrmtjX0D0AOtxyo_jHDZ4VJ63ncXzGnZG-MsFpvA6ojhy96AEhafZ2IFGu9OrRVWG9ROsMTuATI1CdaeJJbAcDrCmzHs1UbdFYj7s5p3wAyO9BuWit/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fthebloggertrickx&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Preserve the gadget and now the preliminary aspect has done.

After including above rule you will discover this tag </head> in your Design >> HTML >> Continue and right before it insert below code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Save the template and you are done. Now you'll find a new Facebook like box shrinking on the right side of your blog.

Customization:

There are two options to customize this widget; the first one is changing thebloggertrickx with your Facebook page user name


The second is float:right. However, if you want this widget to appear at left side then change the property right to left in float:right;.