How To Add a Floating Facebook Gadget

How To Add a Floating Facebook Gadget

Are you familiar with that Facebook has placed in an immense chance for us, through which we can boost the amount of faithful readers. Do you want to get advantage from this chance? It is a mixture of HTML code. Place it in your blog, so you can get aFacebook Fan Page. You can also add a floating gadget of facebook to your blog or site and that can help you in increasing your traffic

                                                                 LIVE DEMO

How To Add a Floating Facebook Gadget

Below are the steps to follow:

Step 1: Adding Jquery Javascript plugin)

1. Sign into your blog and go to Template> Edit HTML>

        Proceed>Expand widget temlates. 

2. Find </head> tag by pressing Ctrl + F key.

3. Copy and paste given code right above </head> tag.

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

4. Now save the template.

-------------------------------------------------------------------------------------

 Step 2: Adding Facebook like box widget

1. Go to Layout> Add a gadget> HTML/javascripts

2. Copy it and paste given code into the content box.

<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/AVvXsEjW1E4PPrqA2_MfV8Iriv67MTeZODrxvsBC6a-ZplLnNMuTSi0ZjTpCWGYzkgZ1WVpWpWD3iXZ8eYWTiE1TyrkI5s6u21jbSrP7MFFgMeca6ne3ZC-Evus0QCJkq-p8yDmz1lOD8fR8_obu/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%2Fwww.facebook.com%2Fpaaksolutions&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><span>/ <a href="http://www.paksolutions.blogspot.com/">+Gadget</a></span></div></div>

3. Change the red words to your facebook username.

4. Click on Save. You're finished.