Add Floating Facebook Like Box For Your Blog

Add Floating Facebook Like Box For Your Blog

4
data:blog.title
facebook like box

Floating Facebook Like Box is now old concept. Just for completeness of a Tutorial blog site I am sharing this trick. Usually we place a Facebook Like Box at the sidebar or in template’s footer. Its aims to be a blog or website make well-known and ultimately it will help to increase traffic. However, if we just mouse over on widget then it will be visible, when we will take away then it won’t be visible. If help for those website who has insufficient space in sidebar or footer. Another features of this floating Facebook like box that you can change any background you like.  Just  follow the below steps to make Floating Facebook Like Box in your Blog Template.

Jquery Plugin For Floating Facebook Like Box


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code </Head> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above </Head>


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


Note: Skip This step if you have already installed Jquery Plugin in your template.

HTML Code For Floating Facebook Like Box

Step 1 Go to your Layout tab.

Step 2 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 3 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<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("http://4.bp.blogspot.com/-WK_yWMFAdS8/USuRpqkZEpI/AAAAAAAABtc/wL56igo6d84/s320/BS+Facebook+Floting.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: #000000;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/BloggerSpice&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#FEFEFE;" allowtransparency="true"></iframe><span><a href="http://www.bloggerspice.com/2013/02/add-floating-facebook-like-box-for-your.html" target="_blank">+Get This!</a></span></div></div>

Customization


  • Change BloggerSpice with your Facebook Id
  • Change FEFEFE for background color. You can select color code from Here.
Add Floating Facebook Like Box For Your Blog
4 Stars stars - "Add Floating Facebook Like Box For Your Blog" Floating Facebook Like Box is now old concept. Just for completeness of a Tutorial blog site...

Post a Comment

brother its not working on my blogger blog my url is www.jobsyear.com

I just tried to visit your site but can't enter. Anyway if you have the below code 2 times in your template then it won't work.

https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

so try to find out duplicate one. Hope it will work. Any further problem feel free to leave comment.

It's working bro.. http://technotutland.blogspot.com/

https://lh3.googleusercontent.com/-H8izCFTaHFE/T2b39mmu2NI/AAAAAAAACkM/k4bDdFe301U/s36/24.gif

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *