Add Facebook LikeBox With Mouse Hover Effect

Facebook Likebox is a powerful widget which helps in increasing your facebook fans easily through your blog or website. By using this widget your blog visitors can directly like your facebook fanpage without even leaving your blog. Default facebook likebox is good looking and compact in its design but we can also customize its design very easily to make it more attractive and stylish. In this post we will discuss about adding our custom facebook likebox to blogger blogs. This widget is customized with the help of small CSS code. This custom likebox shows beautiful border change animation on mouse hover on it.
After adding facebook likebox to your blogger blog its look like;

But when you paste our below CSS code to your blogger blog its appears as;

How To Add This Widget To Blogger Blog?

Select your blog.

Select Layout option.

In your blog`s layout screen click on Add a gadget option

Select HTML/JavaScript widget from the list of the widgets.

In the HTML/JavaScript widget paste following code and save the widget.

Preview your blog to see the new changes.

Code:

<style>
#wc-fbmod {
background:#ffffff;
width: 100%;
padding:10px;
border-radius:4px;
position: relative;
border:5px solid transparent;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
-moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow: 1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #888888;
}
#wc-fbmod:hover
{
-moz-box-shadow:1px 1px 2px #364EA6;
-web-kit-box-shadow: 1px 1px 2px #364EA6;
-goog-ms-box-shadow: 1px 1px 2px #364EA6;
box-shadow:1px 1px 2px #364EA6;
border:5px solid #364EA6;
border-radius:50px;
}
</style>
<div id="wc-fbmod">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FUrduBloggingHub&width=245&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:245px; height:258px;" allowtransparency="true"></iframe></div>

Customization:

Replace UrduBloggingHub with your own facebook page url.

You can also replace Lime Color peace of code with your own iframe code,which you have taken from facebook web to adjust width and height of this hack to your own wish.

Need Help?

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)