Bottom Floating Facebook Like Box Widget for Blogger

Bottom Floating Facebook Like Box Widget for Blogger - Hello blogger buzz, after long time, msdesign gonna sharing another great blogger widget. This is very unique and helpful widget for all blogger. Sometimes we have need to engage with our audience. Facebook pan page is easiest way to keep your audience in your hand. Then you have to need increase your fan page like. By using this awesome bottom floating facebook like box for blogger you can easily increase your facebook like with your targeted audience.

Bottom Floating Facebook Like Box for Blogger Blogspot

Before some days, at first i installed this bottom floating like box on my own blog and i get a very positive result. This widget working fine with also smartphone device. You should also try Sidebar 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.

• View Result

Now lets star the tutorial. Before starting work, please take a backup of your template for safety.
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%);
 } 
} 

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/msdesign.rtml' 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%2Fmsdesign.rtml&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 /msdesign.rtml with your page user name twice.

Now Save template and view result by refreshing page.


Hope guys you liked this awesome blogger widgets. 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. Will hard try to resolve your problems. Thanks you.

Tags

CSS Tips and Tricks tutorial Widget

Zorex Zira

I'm A Web Designer And Developer, Stay Connect with us. facebook twitter instagram youtube external-link

Related Posts