Customize Facebook Like Box With CSS - V2

In my previous post I gave a tutorial about custom facebook like box-V1.In this post I bring a stylish facebook like box with Visit Fanpage Link.I have made some changes in this widget to give you more easier tutorial.The main script behind this widget was given by daddydesigns.I also prefer a tutorial on Mybloggertricks. After working 2 hours on CSS and Coding.I make some changes to make this widget.I am also giving a live demo for both versions.

What Is New In This Custom Like Box

• Direct link to your Facebook fan page which opens in a new tab.
• Added cool mouse hover effect to make it more stylish.
• You can customize width,color,on hover color as you wish i.e. it is easily customizable.
• No need to create a style sheet.

Live Demos For Both V1 And V2 ▼

Custom Facebook like box - v1

Custom Facebook like box - v2

Visit the Fanpage »

Widgets »

Please note that in the demo of v2 like box the text Visit the Fanpage » has been moved little to right side automatically but it works perfectly when you add it in your blog.You can see live demo on my test blog.

How To Add Custom Facebook Like Box-V2 To Your Blog?

• Go to Blogger Dashboard > Design > Edit Layout.
• Choose Add A Gadget > HTML/JavaScript.
• Paste below code after making changes then save it.

<style>
#mbtlikebox{ 
color:#000000; 
font: bold 11px Verdana; 
background:#E0E0F8; 
padding:3px !important; 
margin:5px 0px!important; 
border:2px solid #ff0000; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 
width:320px; 
}
#mbtlikebox:hover{ 
border:2px solid #0000FF; 
background:#F8E0E0;    
} 

</style>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> 
<script type="text/javascript">FB.init("");</script> 
<fb:fan profile_id="153138708123803" stream="0" connections="10" width="320px" height="200px" header="0" logobar="0"   css="http://btsnts.googlecode.com/files/FB01.css"></fb:fan> 
<div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="http://www.facebook.com/btsnts">Visit the Fanpage »</a><div style="float:right"><a href='http://btsnts.blogspot.com/' style="text-decoration:none; color:#365899;">Widgets »</a></div></div>

• Now replace 153138708123803 with your facebook profile ID (Note - If you don't know ID then click here to get ID)
• Change http://www.facebook.com/btsnts with your facebook fan page address.
• To change  number of faces,width and height find this 

  connections="10" width="320px" height="200px" 

• To change the color of bottom box edit CSS in code.
• Note - I have highlighted two codes like this width="320px" - they should be same....

Credits

All the designing credits goes to daddydesigns and all the customization goes to MBT and BTSNTS Blog. Web developers and bloggers are requested to link back to them if they wish to share the codes above with their readers..