How to Add Bottom Floating Facebook Like Widget for Blogger

Bottom Floating Facebook Like Box Widget for 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 then should promote your page in 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.

Read Also: 31 Handpicked Facebook Keyboard Shortcuts

Adding Bottom Floating Facebook Like Box

  1. Go to Template > Edit HTML and past the below CSS before </style>
  2. #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%); } }
  3. Now past below codes before </body>
  4. <div class='slideUp' id='open-fb'> <a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' 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&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;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 = &#39;block&#39;; } function hide(target) { document.getElementById(target).style.display = &#39;none&#39;; } </script>

    Note: Change knigulper with your page user name twice.

  5. Now Save template and view result by refreshing the page.

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 comments.

Meet Our Blogger Community! JOIN NOW

Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind