© Don't Republish Any Article Of This Site √

30 October, 2012

How To Make Add Static Facebook Pop Out Like Box With Smooth Jquery Hover Effect ?


SOCIALIZE IT →

Hi  My All Friends.Below is yet another Facebook jquery pop up for facebook like box widget for Your Blogger Blog.Benefits this kind of widget may be to free space on Blogger Sidebar Area.
For the reason that Facebook can prevent site typical as being the box. Interferance Pop Out Facebook as very soft box with jQuery impact of activation for that blogger, that is one more awesome control. Right here I have got added as the box with straightforward jQuery hover effect. See Facebook interferance plate on the right in the Your Blog and move the mouse above the plate with the frame, as is visible by sliding towards the left.




Add it to your blog. 

  • Go To Blogger > Template > Edit Html > Proceed
  • Tick Expand Widget Templates
  • Now Search For  " </Head> "
  • Copy The Code Below And Paste Before " </Head> " Tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
  • Click Save Template
  • Now Click On " Layout " Tag
  • Add A Gadget > Select Html/JavaScript
  • Copy / Paste The Code Below.


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


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



<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/AVvXsEh6RbnVB0egsT_iVSY8imCkEceziKckrwwXd_hYo4wOXf6JWQ8kpHbvNYXevL5fYkkMHNwlC05tOx4M3NRUJ2A21HCS52TAiVBiA1COD5Wl7KnFpgssuG6XhOhHCAysnTehjicxMowBi6gF/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/Yaqoobzone&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>

  • Replace Yaqoobzone With Your Facebook Fan Page Username
  • Click Save!
  • Mission Complete , You're Done ! 

0 comments:

 

Ranking

Recent Comments

Recent Comments Widget

Recent Posts

Copyright © 2012-2013. All Rights Reserved | My Tech Cafe | Designed By

Home | Contact Us | About Us | Privacy Policy |Top