How to Add Sliding Facebook Likebox in Blogger

How to Add Sliding Facebook Likebox in Blogger

Since we know that Facebook is also a important thing for our website so the below code will help you to make a floating or sliding Facebook likebox. This likebox will really attract more visitors to your site because it looks much professional and attractive.

If you use blogger then follow the steps otherwise directly paste it into your site's code.

Go To Blogger Dashboard >> Then Layout

Click on Add a Gadget on sidebar and then

HTML/Javascript.

Now Copy the below code and Paste them

in gadget box.

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".

STlikebox").hover(function() {$(this).

stop().animate({right: "0"}, "medium");}

, function() {$(this).stop().animate({

right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.STlikebox{background: url("https://lh3.

googleusercontent.com/-c7j_1v090V4/

UeWimQZ4dlI/AAAAAAAADBk/KbauGwsNp50/s101/

fbfloat.jpg") no-repeat scroll left

center transparent !important;display:

block;float: right;height: 200px;padding

: 0 5px 0 35px;width: 245px;z-index:

99999;position:fixed;right:-250px;top:20%

;}

.STlikebox div{border:none;position:

relative;display:block;}

.STlikebox span{bottom: 12px;font: 8px "

lucida grande",tahoma,verdana,arial,sans

-serif;position: absolute;right: 6px;text

-align: right;z-index: 99999;}

.STlikebox span a{color: #808080;text-

decoration:none;}

.STlikebox span a:hover{text-decoration:

underline;}

</style><div class="STlikebox" style=""><

div>

<iframe src="http://www.facebook.com/

plugins/likebox.php?href=http%3A%2F%2

Ffacebook.com%2F Techknowledgehub&amp;width=

245&amp;colorscheme=light&amp;show_faces=

true&amp; connections=9&amp;stream=false&

amp;header=false&amp;height=270"

scrolling="no" frameborder="0" scrolling

="no" style="border: medium none;

overflow: hidden; height: 270px; width:

245px;background:#fff;"></iframe><span>

Widget by: <a href="http://www.

Techknowledgehub.com">Techknowledgehub.Com</a><

/span>

</div>

</div> 

That's it , but before placing the above code in blog replace the words techknowledgehub.com with your own Facebook page name.


Please like us on fb and comment below if liked the above post.