How to Add Floating Facebook Like Box Widget to Blogger

Bottom floating facebook like box widget is the profession design made in such a nice way that when a user visits your blog, they don't like to leave without becoming your facebook page fan. So today I will share this widget with you. If you want to increase your facebook like they should promote your page on your blog with your blog's users. Then you will get more likes from your users who visit your blog.

Pay Attention: How to Add Flat Popup Facebook Like Box Widget to Blogger

When you install this bottom floating like box on your blog, you will surely get a very positive result. This widget working fine with also smartphone device. You should also try Floating Facebook Like Box For Blogger this widget also working fine. I hope this blogger widgets will be helpful for you for increasing your facebook like.

Steps to Add Bottom Floating Facebook Like Box Widget to Blogger:

Login to your Blogger Dashboard > Theme > Edit HTML
Click anywhere inside the theme editor and press Ctrl + F
Type </style> and hit Enter key
Add the given CSS right above the </style>

#open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;} .close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;} .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } }

Now past the following snippets just above the </body>

<div class='slideUp' id='open-fb'> <a class='close-fb' href='#close-fb-like-box' onclick='hide('open-fb')' title='Close'><i class='fa fa-times'/></a> <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/knigulper' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fknigulper&width=187&height=62&show_faces=false&colorscheme=light&stream=false&border_color&header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/> </span></div></div> <script type='text/javascript'> function show(target) { document.getElementById(target).style.display = 'block'; } function hide(target) { document.getElementById(target).style.display = 'none'; } </script>

Note: Replace knigulper twice with your Facebook page username.

Finally, click Save theme and view result by refreshing your blog.

I hope you liked this awesome tutorial. If yes, then do not forget to share this with your friends. And if your facing any problems related to this widget, then let me know by posting your valuable comments.