Add custom Facebook like box to blogger

Posted by: Dapinder Singh on 6/11/2013 Categories: |

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

 

Add custom facebook likebox to blogger

 

Adding custom facebook likebox to blogger

  1. Login to your blogger dashboard.
  2. Select your blog.
  3. Select Layout option.
  4. In your blog`s layout screen click on Add a gadget option
  5. Select HTML/JavaScript widget from the list of the widgets.
  6. In the HTML/JavaScript widget paste following code and save the widget.
  7. Preview your blog to see the new changes.

Note: In the following code change green color code with your own facebook page url.

<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%2Fwindroidclub&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>

2 comments :

  1. Thanks for sharing,

    But i want 'after' shape to be default, and it change its color to another like red on hover, how can i achieve this??
    My Blog>>Bollywood Full HD 1080p 720p Songs Download

    ReplyDelete

Windroidclub © 2014. All Rights Reserved | Powered by-Blogger

Designed by-Windroidclub Themes