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 by Ms-Design. They have made it 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 like from your users who visit your blog.

Bottom Floating Facebook Like Box for Blogger Blogspot

When you install this bottom floating like box on you 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.

Now lets star the tutorial. Before starting work, please take a backup of your template for safety.

Step 1. Now go to Template > Edit HTML and past the below CSS before </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%); } }
Step 2. Now past below codes before </body>
<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.

Step 3. Now Save template and view result by refreshing page.

I hope you liked this awesome tutorial. If yes, then do not forget to share this on you social media and other friends. And if your facing any problems with this bottom floating facebook like box widget for blogger, then inform us on comment section with your problem. We will try to resolve your problems.
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind