How to Add Left Side Static Facebook Pop Out Like Box with Jquery Hover Effect

How to Add Left Side Static Facebook Pop Out Like Box with Jquery Hover Effect for blogger

Step 1. Log-in First your Blogger account then Go to Layout as you can see in the screenshots

Then Click ADD Gadget

Step 2. As you can see after clicking add gadget Pop-up Box Will be Open then Scroll down until you will find this HTML/Java Script and Click the + Button in the right side of the gadget

Or just simply select HTML/Javascript

 

STEP 3.  COPY THE CODE BELOW THEN PASTE IT THE CLICK SAVE

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></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/AVvXsEgszRus8-Xd7azW7CqO9WLiCMSRrRvN3IiY_c5oWC2SYACZb3tIibIBQvAS5k9rz9R_-S9G5li1PpyXx-qD1YSjHprSg4G1gMe1_dV0HehV3AQxB75rhTmCtiMbJ-bEHroSZ8Octwf-Fi3O/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><a href="http://rhonztech.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/droiddrawer&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>

 In Customize Field Replace "http://www.facebook.com/droiddrawer" with your own facebook page name 

Like Our Post ? Please share

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →