Facebook is one of the largest social media and when you embed a floating Facebook Like widget on your blog it adds your blog visitors, a readily available feature to like your blog.
Also, Facebook has huge subscriber base and when your visitors like your Facebook page, all your latest posts and updates will be shown on their timeline and hence this will organically increase your blog’s traffic and this will ultimately boost your Alexa ranking and you will prove to be a trusted site in the eyes of Google and other search engines.
So, here are 4 best floating Facebook Like widget for your Blogger blog and when your visitors will move the cursor on it, it will pop-up with a dashing and stylish Facebook like box. Just follow the simple steps and you will be done.
Note: All the three floating styles has its own way to add, so follow the steps carefully.
1. Floating Facebook like widget style
Step 1. Login to your Blogger blog and click on Layout and select Add a Gadget.
Step 2. Select HTML/JavaScript
Step 3. Paste the below code in the pop-up sajian and click on Save, you are done.
<!-- Floating FB Like Widget for Blogger, Powered by Wonder Krish --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script> <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abt").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abt{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIeVrefa9zGEaBtGGOLyK6leowlwIiExp6DgZmJp3od1eQ05x5UQwE319xN_fVCByWEcNzM6dGdXRT9INKKxeDmNCz8X7yWtznPH8BweymdqqaOKRqsAuc-ktQuHTYe71mvpi5nxv6FhDK/s1600/ABT_facebook_widget.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%;} .abt div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abt span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abt span a{color: gray;text-decoration:none;} .abt span a:hover{text-decoration:underline;} } </style><div class="abt" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fwonderkrish;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;color:000;"></iframe><span><center> <a style="color:#a8a8a8;font-size:8px;" href="https://about-tutor.blogspot.com// ">FB Floating Like Box </a></center> </span></div> </div> <!— Floating FB Like Widget for Blogger, Powered by Wonder Krish -->
2. Floating Facebook like widget Style
Step 2. Now search the <head> tag, paste the below JQuery code (Only if you do have JQuery installed earlier on your blog's template).
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> 
Step 2. Now, select Layout and click on Add a Gadget.
Step 3. Select HTML/ JavaScript and paste the below code in pop-up menu.
<!--Floating Facebook Widget starts here--> <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".wonderkrish").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .wonderkrish{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIeVrefa9zGEaBtGGOLyK6leowlwIiExp6DgZmJp3od1eQ05x5UQwE319xN_fVCByWEcNzM6dGdXRT9INKKxeDmNCz8X7yWtznPH8BweymdqqaOKRqsAuc-ktQuHTYe71mvpi5nxv6FhDK/s1600/ABT_facebook_widget.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%;} .wonderkrish div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .wonderkrish span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .wonderkrish span a{color: gray;text-decoration:none;} .wonderkrish span a:hover{text-decoration:underline;} } </style><div class="wonderkrish" style=""> <div> <iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Ffacebook.com%2Fwonderkrish&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;color:000;"></iframe><span><center> <a style="color:#a8a8a8;font-size:8px;" href="https://about-tutor.blogspot.com//search?q=add-floating-facebook-like-widget--blogger">Get This Widget</a></center> </span></div> </div> <!--Floating Facebook Widget ends here-->
3. Floating Facebook like widget Style
Step 1. Now, select Layout and click on Add a Gadget.
Step 2. Select HTML/ JavaScript and paste the below code in pop-up menu.
<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/AVvXsEjmb7NemrwAOM8bb3LJu_ZA-4DVskSJmEagdN06v2lq6Y0Cq4DhkUtvRHvdZz7SWWvPzT332PWnuR679sANzh2GRtDwY05tIfeLj3yGKc2mPVeu92duDjwWyrG3YIZ7Ur-fxSTCzsf8rmY/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%2Fwonderkrish&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></span> </div> </div>
4. Floating Facebook like widget Style
Step 1. Login to your Blogger blog and click on Template and select HTML/JavaScript.
Step 2. Now search the <head> tag, paste the below JQuery code (Only if you do have JQuery installed earlier on your blog's template).
Step 3. Now, select Layout and click on Add a Gadget.
Step 4. Select HTML/ JavaScript and paste the below code in pop-up menu.
Left side floating Facebook Like widget box code.
<script> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".bofblikebox").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .bofblikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0d5AtB4i_pdMq6XvPXyZm8ulBoslg0Z3xkjuAhAfB-tz4PJOfzw0CQWFMgBKWlD-XTJpJVO-6rRqBJyKZ41FYviO-KalQMumMLqe2mEIEjRIetJsGwQKZtXmDO2HPm6AUMFFdZngBmL-Y/s1600/fb-left.png") no-repeat scroll right center transparent !important;width:245px;height:225px;float:left;position:fixed;padding: 0 46px 0 5px;z-index:99999;top:30%;left:-250px;} .bofblikebox div{background:#fafafa;margin-left:-8px;padding:0;border:4px solid #3b5998;} } </style> <div class="bofblikebox"> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%wonderkrish&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" style="border: white; overflow: hidden; height: 215px; width: 245px;background:#fafafa;"></iframe> </div> </div>
Right side floating Facebook Like widget box code.
<script> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".bofblikebox").hover(function(){jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .bofblikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFru4acVKUXmdsAlYdhy1MRVQU8MOGpoq0k_CgqLBYEm8FUgIBj7bfVZ8lr9OAVYJC95d4zXOkCYGUInQk_PwlTIVGT-8g0t_xQBguWaUttmXaHnZZp3DSPtDSq4wm_Hs7Qn2UPpph9qXV/s1600/fb-right.png") no-repeat scroll left center transparent !important;width:245px;height:225px;float:right;position:fixed;padding: 0 5px 0 46px;z-index:99999;top:30%;right:-250px;} .bofblikebox div{background:#fafafa;margin-right:-8px;padding:0;border:4px solid #3b5998;} } </style> <div class="bofblikebox"><div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%wonderkrish&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" style="border: white; overflow: hidden; height: 215px; width: 245px;background:#fafafa;"></iframe> </div> </div>
Please Note: Change the highlighted text with your own Facebook fan page id or URL.
I have hope you have successfully added the beautiful and stylish Floating Facebook Like widget, so enjoy and do leave a reply if you have found any difficulties in implementing the codes.
Comments
Post a Comment