Add Advanced Floating Facebook Likebox [V2]

Note:- I have spent my valuable time to create this widget, you can post it on your blog but Don't forget to give credit link.

Many tutorial gives you how to add facebook like box. In my previous post i have shared about advance facebook like box,  Now I came up with new tutorial for adding floating like box to blogger. This is a great way which requires almost no space and it looks more attractive than that of simply keeping the like box.

Demo

You can See demo in left sidebar of this page !

Support US Close

How to add?

To add Floating Facebook Likebox do as follows.

1. Go to Design>Add a Gadget>HTML/JavaScript
2. Add This code to HTML/JavaScript Widget

<style>
#ptftopbar {
border-radius: 10px;
height:30px;
width:auto;
background: #005094 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#fbground {
border-radius: 10px;
border: 3px ;
height:600;
margin:0 auto;
width: 160px;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:center;
padding:4px;
}

#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:10px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#660000;
padding:1px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>
<div id="headlineatas">
<div id="ptftopbar">
<img align="left" style="padding-right:2px;" src="http://i50.tinypic.com/34p1d6u.png" />
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Support US </span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.facebook.com/pokharatech" target="_blank" onclick="getValue()">Close</a></span>
</div>

<div id="fbground">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpokharatech&amp;width=200&amp;height=200&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false&amp;appId=221777087880548" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:140px; height:258px;" allowtransparency="true"></iframe>
</div>
<br/></div>

Costomization

• Replace pokharatech with your facebook page name.

 Now save template. All done !

From the editor's desk

This is my second self coded widget  i have spent my valueable time to create it, have you noticed one thing? If you want to close the widget, that will automatically redirect you to the facebook page of your blog. isn't it awesome? If you face any problem, want to ask something please feel free to write in comment box. Peace, Happy Blogging. Floatable