Add Floating Facebook Like Box For Blogger 2017

Facebook Like Box Widget is very important for very blog. As we know Facebook is biggest social media platform and also best place for sharing latest updates. Facebook is too much helpful to grow any kind of blog at faster speed. So it is necessary to use Facebook like box on your blog which lets your visitor to join you Facebook fans to gets latest post easily. I already post about the simple and stylish Facebook like box for sidebar if want, you can also that one. But today i am going to post about the floating Facebook like box widget. Which is very attractive and help to get more Facebook like easily.

Steps To Add Floating Facebook Like Box

Go To Blogger Dashboard >> Then Layout

Click on Add a Gadget

Now Copy the below code and Paste them in gadget box


 <script type="text/javascript">
//<!--
$(document).ready(function() {$(".STlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.STlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5LMtc_hjRxRqr6k-lkGzq6ainWQht9n2AhHHIlOIhFwqomQxTCGYpex7SXnmOfnXWRLsvgcweKnB0L74ir3h7Ea4KuX6KnU2TtdW6D_3Sm6_mTsqj_M9d-uFJGC3MQrQ8TScUgiH91c_n/s101/fbfloat.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 200px;padding: 0 5px 0 35px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.STlikebox div{border:none;position:relative;display:block;}
.STlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.STlikebox span a{color: #808080;text-decoration:none;}
.STlikebox span a:hover{text-decoration:underline;}
</style><div class="STlikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FSafetricks&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><span>Widget by: <a href="http://www.Safetricks.net">Safe Tricks</a></span>
</div>
</div>

After Pasting above code Replace SafeTricks with your Facebook username

Then click on the save button and Refresh Your Blog

Follow Below Part If Your Blog Do not Having JQuery Plugin or if already Installed then leave this part

2nd Part of this Widget

Go to Blogger >> Template

Click on The Edit HTML

Now search for </head>


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

Then Paste Below Script just above the </head> section.

After Pasting save your Template.

Now Refresh Your Blog and I hope Your Facebook box will be works.

Search This Blog