How to add facebook pop out like box for blogger

Hover above image to see live demo it is just wesome widget for blogger.I already give you this type of widget for blogger.But now a day's every one is adding same link box to there blog so I decided to give you some thing different.

You can also try this for other social media like-

1. Twitter
2. Pinterest
3. Facebook old One
4. Google Plus

Installing

• Go to Design-> Page Elements Click on Add Gadget.
• Select HTML/Javascript from it
• Leave title as blank ,Copy and Paste the below code into the content section.

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".noopslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.noopslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH1En1jiC1kJlgPhL7YH-e5Wzd39CZ9qWJ5nHPwtbGEqM1yp4hvCjQJ6QF0GRlwkbpX9pCQEu17zAIzp1DlKchjr1z02ec5vbJwvBNdzQg8N63WNwNDeur4yUkKvn8Sx8xlUAfwcBrt28/s1600/fb_static+button.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 999;position:fixed;right:-250px;top:20%;}
.noopslikebox div{border:none;position:relative;display:block;}
.noopslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}
.noopslikebox span a{color: gray;text-decoration:none;}
.noopslikebox span a:hover{text-decoration:underline;}
</style>
<div class="noopslikebox">
    <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/lordhtml&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>

Replace the RED highlighted text with your Facebook page URL.