How To Make Facebook Like Box Floating On Blogger

Bismillaahirrahmaanirrahiim

Assalaamu'alaikum Wr Wb!

Among some of the social media that is very popular is Facebook, popular among all. Facebook has a lot of facilities and features that make people want to create a Facebook account. Not to mention the Webmaster and Blogger that they might first have a Facebook account rather than to a website or blog, I think you would often find Facebook widget either a page or a Facebook account in a variety of styles to suit. But generally you may see a lot of installed widgets or Facebook Fan Page Facebook Fan Page, this widget is created or posted on a website or blog with consideration for the requirements. This is certainly a very useful widget to add fans on its Facebook page that certainly has its own advantages for the owner, so no other reason for the installation of this widget can also be called as a promotion for the Facebook page.

Widget Facebook Like Box Hovering has the following characteristics:

Responsive on your Desktop, Tablet and Mobile

Mini shape is neat and elegant, unobtrusive appearance and loading activities blog

CSS and JavaScript with a very light without using jQuery, Iframe and Flash so it does not interfere with the activities of loading a web page or blog

This widget displays or go to the Facebook page with the "target_blank" featuring a Facebook page to the new tab so it does not interfere with your web page or blog page that you're on course

Equipped with a close button so that you or visitors can close the widget to see the look that is behind this widget.

I highly recommend it for you, and for the results you can see on my blog.

Now, let to the tutorial⇨

1. Login to Blogger> Template> Edit HTML and find the ]]></b:skin> tags with pressing Ctrl + F on your PC keyboard, then put the following CSS above / before the ]]></b:skin> tags⇩

/*****************************************************************
Facebook Like Box Floating By www.BloggerDiscreet.com
*****************************************************************/
#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%);
 } 
}

2. Place the following JavaScript above / before the </body> tags⇩

<!-- Facebook Like Box Floating By www.BloggerDiscreet.com Starts -->
<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/OfficialPagesRahmatArif' 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%2FOfficialPagesRahmatArif&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>
<!-- Facebook Like Box Floating By www.BloggerDiscreet.com Ends -->

Note: Replace the words "OfficialPagesRahmatArif" green with your Facebook username.

Alhamdulillaah, tutorial is ready.