Add Hover Style Facebook LikeBox With Button Near To Page ScrollBar

Adding facebook likebox in blogs is so much as important to get good traffic. But simply we can get more likes by adding the facebook likebox with facebook button near to the scrollbar. Already I had posted about the importance of facebook subscribers. So you have to get more likes to drive more people to your blog through your shares about your blog updates on facebook. Add this hover style facebook likebox widget with facebook button near to your blog page scrollbar. 

This is a tricky way of driving more visitors by getting maximum number of likes from your blog visitors. When your blog visitors trying to scroll the bar on your blog pages, cursor may move on facebook button which is shown near to scrollbar. So maximum number of your blog viewers will like your facebook fanpage of your website or blog.

Let's know that how to add this facebook button with likebox in blogger blog.

Steps To Add This Hover Style Facebook LikeBox To Blogger Blog

• Login to your Blogger account
• Go to dashboard and move on Layout section
• Click on Add a gadget link and select HTML/JavaScript option
• Copy the below code into HTML box

<!----trickstoo.com facebook button starts-----> <style>
img, a { border: 0; }
#on { visibility: visible; }
#off { visibility: hidden; }
#facebook_div { width: 196px;
height: 340px;
overflow: hidden; }
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px; }
#facebook_right img {
position: absolute;
top: -2px;
left: -35px; }
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px; }
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px; }
#facebook_left img {
position: absolute;
top: -2px;
right: -35px; }
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this)
.stop(true, false)
.animate({ right: 0 }, 500); }, function () {
jQuery("#facebook_right")
.stop(true, false).animate({ right: -200 }, 500); });
 });
</script>
<br />
<div id="on">
<div id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvJZ-Tk7XtEPF-0mqf47Kl_RrM50S-CuIM4gaBM2zkwG__4JUwBIDUoLHavO17JIGdnPO02S-cbb6KB9Gy_-g0N-B6lJPA7BabJ7NdhMaXppwYENghpFi6YG11TJirDLSXnkHXs307qDl/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FComszone.tk&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none;
height: 346px;
overflow: hidden;
width: 200px;">
</iframe>
</div>
</div>
</div>
<!----trickstoo.com facebook button ends----->

Note: Replace Comszone with URL of your facebook fanpage of your blog or website.

Finally, Click on the Save button.

If you encounter any problem, feel free and comment below to the post to get a solution. Share your Experience with us by commenting below.