INSTALL STATIC FACEBOOK POP-UP LIKE BOX WITH JQUERY HOVER EFFECT ON BLOGGER

Views

Another great addition to blogger widgets, the “Static Pop-Up Facebook like box with a smooth Jquery hover effect”.  This widget has been around for a while and there are so many ways to install it, but I found one of the easiest  way of installing this on blogger and this widget is made possible by Harish of Way2Blogging.org. As you can see the static Facebook image will be at the right side of the your webpage and when you hover on it the Facebook like box will pop-up very smoothly, this widget is a space saver.

LIVE DEMO

HOVER THE FACEBOOK POP-UP LIKE BOX AT THE RIGHT SIDE OF THIS WEBPAGE

HOW TO INSTALL THE STATIC FACEBOOK POP-UP W/ JQUERY HOVER EFFECT ON BLOGGER?

• Go to your Blogger Dashboard
• Template
• Edit HTML
• Proceed
• Click “Expand Widget Template”
• Press CTRL+F for search shortcut
• And find this piece of a code

</head>

• And paste this code ABOVE/BEFORE </head> tag

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

NOTE: Skip this step if you already have a jquery plug-in in your Blog

ADDING THE WIDGET CODE IN YOUR BLOG

• Go to your Blogger Layout
• Add a gadget
• Choose HTML/JAVASCRIPT
• and insert this widget code

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOHeTtCfRm0UJvF2QVYXSmX_vjknucdHY9DgjqdYDDKpoD1REgX2F1B5_eketD3kPGFphT_0X4xWpsXkUefOMYHGG59CQfPidAceI01HP27gQ8C_F9F8NwR8frj1-TUHnT4Rc-wwYWT2H/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%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: gray;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%3A%2F%2Ffacebook.com%2F(FACEBOOK ID)&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://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html">by Way2Blogging</a></span> </div> </div>
Press CTRL+A to select all and CTRL+C to copy
NOTE: JUST REPLACE THIS (FACEBOOK ID) WITH YOUR OWN AND NO SPACING.

YOU CAN SAVE YOUR TEMPLATE NOW

And see it working perfectly on your blog

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.