Facebook Pop Out Like Box With Smooth Jquery Hover Effect
![]() |
Facebook Pop Out Like Box With Smooth Jquery Hover Effect |
I just Re-share this Widget on my Blog..
How Install This Widget On Blogger?
- Click On Layout On the Left Side Of Your Blogger Dashboard.
- Click Add a Gadget
- Click on HTML/JavaScript
- Copy The Script Given Below And Paste it
- Do Nothing Just Change Your Facebook Name Instead Of ITGeniu4u in the Blu Color.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><style type="text/css">.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;} /*<![CDATA[*/ #fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;} .fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXDh0pgZNoWrkcdtb1fmvQk3ZuVQMFgIqmg11cmMw9krO7ONkjqI9eypsPXBih1Q0AYDiWIapJame5t3CR_Qc81CaXhTvQ5Pdbpn-MSlgOeFquVByiLNHuLJmetGAPBvcEThYPHWi_lE3/s1600/md_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ (function(md){ md(document).ready(function(){ var $dur = "medium"; // Duration of Animation md("#fbplikebox").css({left: -250, "top" : 100 }) md("#fbplikebox").hover(function () { md(this).stop().animate({ left: 0 }, $dur); }, function () { md(this).stop().animate({ left: -250 }, $dur); }); md("#fbplikebox").show(); }); })(jQuery); /*]]>*/ </script> <div class="mdfbplikebox"> <div id="fbplikebox" style="display:none;"> <div class="fbplbadge"></div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/ITGenius4u&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowTransparency="true"></iframe><span> By <a href="http://www.makingdifferent.com/">Making DIfferent</a> / <a href="http://www.makingdifferent.com/add-static-facebook-pop-out-like-box-with-smooth-jquery-hover-effect/">+Get This!</a> </span> </div> </div>
Post a Comment
Thank's For Your Feedback....
EmoticonClick to see the code!
To insert emoticon you must added at least one space before the code.