Showing posts with label Add Static Facebook Pop Out Like Box with Smooth Effect. Show all posts
Showing posts with label Add Static Facebook Pop Out Like Box with Smooth Effect. Show all posts

Sunday, 5 August 2012

Add Static Facebook Pop Out Like Box with Smooth Effect

Posted by Crypto Magic World on 14:28 with No comments

Here There are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)
a. Go to Blogger Dashboard < Design tab > Edit Html 
b. Search for </head> tag ( using ctrl+f)
c. Add below line of code Before </head> tag

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

And now click Save Template 
Step 2: Adding Widget Code ( Html code )
it's Simple 
a.Layout or page elements –>> Add a gadget->> Html/java script.
b.Add a below code in the Html/java scipt box.
Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )


<img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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/AVvXsEipVlzUZsG9TBipIyDEPNq2FObWdvVoUOXM0UjQWusuGe2BgqcQ7knbS9ov2yZUPnKOw0NohCYcf1IR6eUK6Jkk4cPjHmWNxcxPLmZ8h7aSW6SgNwBfl1yDbkUXVH2_N8-2vg9tRXxFQVMX/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/&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><span> / <a href="http://allfreecoursesblog.blogspot.com/2012/08/add-static-facebook-pop-out-like-box.html">+Get This!</a></span></div></div>

</div>


And now click Save