Jeunesse Knowledge - How to add Facebook like box on the blog . In this article will explain how to add a widget Facebook Like Box is installed floating like button on the right side of the blog page. This widget will not only look attractive but the most important thing is, use a space saving blog. This widget is published by BloggerHack in November 2011 and my copy back in this blog. Script widget using J-Query plugin embedded in the <head> dukumen HTML Template, as well as the code of the widget is added via Layout > add a gadget type of HTML / Javascript .
Here's how the application:
- Log in blogger, with your ID
- In blogger dashboard page click the name of the blog you
- Choose a menu template - >> Edit HTML - >> Proceed
- Find code <head> bwah then copy the code and paste it just below the code <head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/><script type="text/javascript"> </ script>
- Save the template by pressing the Save Template
- Then select the Layout - >> Add a gadget - >> select type gadget HTML / Javascript .
- Copy the code below and paste it into the box Content , gadget HTML / Javascript , does not need to be given title.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://lh4.googleusercontent.com/-zbDw9p8R20o/T8mpaxK77yI/AAAAAAAAB-Y/pDsYMYlDi5M/s136/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/jeunessestore&width=250&height=260&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=339941006059696" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:260px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://jeunessestore.blogspot.com/2013/01/create-right-Fanspage-on-blogspot.html" target="_blank">Blogger Widget</a></span></div></div>
- Do not forget to change the code https://www.facebook.com/jeunessestore with Facebook Like Box URL you.
- If you want to adjust the height and width of the widget please edit that code in bold black with the number you want.
- Click the Save to save Gadget.
- Rare finally check your blog and say thank you ...
