Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect for blogger, this is another cool widget just like a Static Twitter Follow me Badge,
but here i added like box with simple Jquery hover Effect. You See a
static facebook badge at right of your Page and when mouse over the
badge with like box is visible by Sliding to Left...
How to Add Static Facebook Like Box with Smooth Jquery Hover Effect?
Here There are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin
- Go to Blogger Dashboard < Design Tab > Edit Html
- Search For
</head>Tag - Add Below Line oF Code Before
</head>Tag
<script type="text/javascript" src="http://goo.gl/e5W7D"></script> |
Step 2:
- Go to Blogger.
- Design >> Add a Gadget
- Select HTML/JavaScript
- Paste the following Code inside it
| <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".MFSlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .MFSlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2MIHYlbcFbx6iTccIp9NFepcXe4TnPGUnhLbafjbvFKP6lTW40Jy8g3klbu7t2RTSOWezqY9epLPXQjWIH6fhoLaavZgkF331jAWonnoEVC3AX_S2etnMIUWnWVcgiJYJEdM28mfXJ1w5/s150/w2b_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%;} .MFSlikebox div{border:none;position:relative;display:block;} .MFSlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .MFSlikebox span a{color: gray;text-decoration:none;} .MFSlikebox span a:hover{text-decoration:underline;} </style> <div class="MFSlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FMegaFilesStore&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://megafilesstore.blogspot.com/">By MeGa FiLeS StOrE</a></span> </div> </div> |
Make these changes:
- Replace MeGaFiLeSStOrE with your Facebook Page ID...
Save Your Widget and You are Done!
If you Liked it! then feel Free to Share and leave a Comment!!!
Thanks Take Care !!!
