How To Add Static Facebook Fanpage Like Box With Smooth Jquery Hover Effect

This article is all about on "How To Add Static Facebook Fanpage Like Box With Smooth Jquery Hover Effect" and for the new updated version see this article "facebook like box" for the tutorial and demo.

Step 1:

1. Adding Jquery JavaScript Plugin (Ignore this step if your blog have already a Jquery Plugin).
2. Login to your Blogger Account.
3. Go to Blogger Dashboard >> Dropdown Menu >> Template.
4. Press Ctrl+F and search </head> tag.
5. Add the code below before </head> tag.

Code:

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

Step 2:

Replacing Facebook Fanpage URL ID.

1. Replace my facebook page URL ID below with the URL ID of your page.
2. Change "modifier200".

Code:

    <script type="text/javascript">
    //<!--
    $(document).ready(function() {$(".trickiezonelikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
    //-->
    </script>
    <style type="text/css">
    .trickiezonelikebox{background: url("http://4.bp.blogspot.com/-nygfJ4tLCeQ/UQvHU5wTxDI/AAAAAAAACsE/G581z4Buq5E/s320/trickiezone.com_facebookbadge.png") 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%;}
    .trickiezonelikebox div{border:none;position:relative;display:block;}
    .trickiezonelikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
    .trickiezonelikebox span a{color: #808080;text-decoration:none;}
    .trickiezonelikebox span a:hover{text-decoration:underline;}
    </style><div class="trickiezonelikebox" style="">
    <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmodifier200&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>By <a href="http://trickiezone.blogspot.com/">Trickiezone</a> / <a href="http://trickiezone.blogspot.com/2012/05/how-to-add-static-facebook-fanpage-like.html">+Get This!</a></span></div>
    </div>

Step 3:

Adding Widget Code.

1. Go to Dashboard > Dropdown Menu > Layout.
2. Then Add A Gadget > HTML/JavaScript.
3. Copy the code above and paste it into content area.

STEP 4:

1. Save the changes and view your blog.

Hope you liked this article subscribe to receive new update's about new Blogger tutorials.