Sunday 9 September 2012

Pin It

Widgets

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect


Hello friends...!!!
Today I am telling you how to add facebook pop out like box with slide effect for blogger. It's very simple and easy if you follow my steps. This pop out box slides on the right side of your blog. You can see demo in this blog itself.






How to Add Static Facebook Like Box with Smooth Jquery Hover for your Blog / website

Here There are 2 Simple Steps

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)


a. Go to Blogger Dashboard < Design tab > Edit Html
b. Search for </head> tag ( using ctrl+f)
c. Add below line of code Before </head> tag

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


And now click Save Template 

Step 2: Adding Widget Code ( Html code )
it's Simple

a.Layout or page elements –>> Add a gadget->> Html/javascript.

b.Add a below code in the Html/javascipt box.

Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )


<a href="http://technoclouds.blogspot.in" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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/AVvXsEhI-zzbHqIYgBiOc915vsdZgsZofSmUi75EFI-YK6h9p9tqEEv60iAf6GUAVNnJIgCNaDqxd-q0llF19Z5RHvriyl9wC-739cP48Ws3Z8WRYbHL2tU-fbtcK31w9pGWc_A1XQJcX6KDrv0x/s1600/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%;}

.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://www.facebook.com/pages/TechnoClouds/444150238942241&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://technoclouds.blogspot.in/">TechnoClouds</a> / <a href="http://technoclouds.blogspot.in/2012/09/add-static-facebook-pop-out-like-box.html">+Get This!</a></span></div></div>

And now click Save  

Note:-Don’t forget to change Red colour keywords.

3 comments:

  1. I think facebook has also provided this gadget with hosting from Facebook.. However, this will give a nice look to your blog..

    ReplyDelete
  2. its working incompletely for my website

    www.propakistani.info

    ReplyDelete
    Replies
    1. @Ali Ahmed,
      Try this.It will work.
      http://technoclouds.blogspot.in/2012/12/slideout-floating-facebook-like-box.html

      Delete

Complicated?
If you have any question about any Post, Don't hesitate to ask question.You can simply drop a comment below post.Your Feedback always appreciated.