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.
Read Also: 31 Handpicked Facebook Keyboard Shortcuts
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>
- Now past the following snippets just above the </body>
- Finally, click Save theme and view result by refreshing your blog.
#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%); } }
<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.
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.
0 Response to "How to Add Floating Facebook Like Box Widget to Blogger"
Posting Komentar