ADD FACEBOOK SLIDING LIKE BOX WITH jQUERY TO BLOGGER BLOG

Would be not wrong if I say you already use facebook like box for your facebook page at your website/blog. But they don’t have any kind of effect they just live at your website/blog like a simple widget. It’s about how to add a pop out facebook like box with slide effect. I found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. It is an excellent coded slider that Hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.

How to do it :Add Like Box To Blogger Blog

1. Go To your Blogger Dashboard>>Template>> Edit HTML

2. and click in the HTML Code box then press CTRL+F and Find the Following code.

</head>

 3. and paste the following jquery link just above </head>

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

4. Save your Template

5. Now go to Layout >> add a gadget then select Html/Javascript

6. Then paste bellow code in it.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwA_zGM-JuP11YEi1RCnkVWDUpjM4JD6ojBDc9-y__bESPYku61dMzld0BBH28fK9Ue1oaHKwESmQXupCQov6sK6xFZp6Wzlmbmd5PrFk1rbBfFYv8FfApmwTO2RFh6xFrgRXM8KdGQN-m/s1600/rb+facebook+slide+out+widget+3.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;}}</style> <div class="abtlikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fcklface.page&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><font color="#000" size="1">Grab this widget: </font><font color="#000" size="1"><a href="https://www.facebook.com/kimleng.cheang">CHEANG KIMLENG</a></font></div></div>

7. Replace https://www.facebook.com/cklface.page (highlighted red colour ) with your's facebook page url .

NOTE:- Only Replace cklface.page with your's one.

8. Click on save button and take your blog new look.

Visit your Blogs to see it floating at the right side of your webpage.