Need a Professional Magazine Blogger Template? Check This ×

Saturday, August 06, 2016

Bottom Floating Facebook Like Box Widget for Blogger

SHARE THIS
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.

Awesome floating facebook like box for blogger

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.


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.

Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post

15 comments:

  1. this is your code in view page source
    http://tinypic.com/r/6gzmfl/9

    this is the code that you gave in tutorials that i put in my blogger
    http://tinypic.com/r/2wecbxf/9


    the code that you are using is different from the code in your post/tutorials? please post it right sir

    ReplyDelete
    Replies
    1. Everything is okay. Make you have installed Jquery

      Delete
  2. Is there any solution to set after visitor like my page the like box not show anymore?

    ReplyDelete
  3. How to shift it from right side to left side of the page?

    ReplyDelete
  4. How to shift from right side to the left?

    ReplyDelete
  5. Sorry, but I change de user name and dont change, why?

    ReplyDelete