STEP 1
- Go to Blogger Dashboard -> Template.
- Now click on Edit HTML.
- Use Ctrl+F to find </head>.
</head>
- Then copy and paste just above/before it, this code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
- Save your template.
STEP 2
- Now go to Layout -> click on "Add a gadget".
- Select "html/java script" and add the code given below and click save. you can copy the below code.
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqHuZZUWGpeoqVdNvjLu8mLhc-AafjEf8X3uf77zKKUhYQINNOISjHzrmZ93d4CWiRp21E9IOB2mXZNDFvN3LP54OTmJIWbP56D9kNgT81hWiLtYrmVc48xZ_bUyQktR4ZQGsHGtsajAc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftwotricks&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.bbloggertutorials.blogspot.com"> BBloggerTutorials</a></span> </div> </div>Note: Replace twotricks with your facebook page URL.
hope so you like How To Add Stylish Floating Facebook Like Box Widget In Blogger Post. don't forget to leave feedback on this post and must share with your friends.
Comments
Post a Comment