How to add Floating Facebook Like Box to blogspot?

Today, I’m gonna teach you on how to add Floating  Facebook Likebox in your blogspot. As you can see at the right bottom of my blogspot, there is a floating likebox that was fixed in position. Even you scroll up and down, the facebook likebox  will not be removed unless you click the Close(X) button.

Facebook Page plays a very important role in promoting blogs and websites. We all know that Facebook has the biggest traffic in internet. By having facebook page, we could increase the traffic of our blog and websites.

To start with, below are the steps on how to install the Floating Facebook LikeBox in your blogspot.

1.Login to your account to Blogger.com

2.Go to Themes>Template>Edit HTML

3.Click anywhere inside the HTML codes and press Ctrl+F and find </style>.

  You may notice that there are many codes in your templates that has </style> tag. Any of those style end tag is working so don’t worry.

4. After you find any style end tag </style>, paste the code below before it.

<br /> #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;}<br /> .close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}<br /> .slideUp{<br /> animation-name: slideUp;<br /> -webkit-animation-name: slideUp; <br /> <br /> animation-duration: 1s; <br /> -webkit-animation-duration: 1s;<br /> <br /> animation-timing-function: ease; <br /> -webkit-animation-timing-function: ease;<br /> <br /> visibility: visible !important; <br /> }<br /> <br /> @keyframes slideUp {<br /> 0% {<br /> transform: translateY(100%);<br /> }<br /> 50%{<br /> transform: translateY(-8%);<br /> }<br /> 65%{<br /> transform: translateY(4%);<br /> }<br /> 80%{<br /> transform: translateY(-4%);<br /> }<br /> 95%{<br /> transform: translateY(2%);<br /> } <br /> 100% {<br /> transform: translateY(0%);<br /> } <br /> }<br /> <br /> @-webkit-keyframes slideUp {<br /> 0% {<br /> -webkit-transform: translateY(100%);<br /> }<br /> 50%{<br /> -webkit-transform: translateY(-8%);<br /> }<br /> 65%{<br /> -webkit-transform: translateY(4%);<br /> }<br /> 80%{<br /> -webkit-transform: translateY(-4%);<br /> }<br /> 95%{<br /> -webkit-transform: translateY(2%);<br /> } <br /> 100% {<br /> -webkit-transform: translateY(0%);<br /> } <br /> }<br />


<br /> <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><br /> <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/Get-Timeline-218149574931249' 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%2FGet-Timeline-218149574931249&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><br /> <br />

Note: Change https://facebook.com/Get-Timeline-218149574931249/ with your facebook page username twice.

7. Now Save Template and view you blog.

Be updated with this post for more Facebook Likebox Design. 

Source: https://trickzbuzz.blogspot.com