How to Add 3D Style Facebook Like Box to Blogger Blogs

Do you love the facebook like box we are using on our website, well its pretty much looks like a 3D styled FB like box, well if you were in search on how to add this to your blog well now you can using the below simple codes. Well this simply created using easy CSS codes, so nothing technical but its really simple, so check below steps.

1. Visit Blogger –> Template –> Edit HTML.
2. Now press Ctrl + F and search for ]]></b:skin> tag and paste below code above it.

   .fan-box{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid #aaa;height:135px;margin-bottom:-15px;padding:0 10px 15px 0;position:relative}.fan-box:before,.fan-box:after{background:#f7f7f7;border:1px solid #aaa;border-top:none;bottom:-3px;content:"";height:1px;left:2px;position:absolute;right:2px}.fan-box:after{bottom:-5px;box-shadow:0 0 2px #aaa;left:4px;right:4px}

3. Now your styles are added you just need to add the HTML code to display this like box.
4. Now navigate to Blogger –> Layout –> Add Gadget, choose HTML/JavaScript gadget.
5. Now add below code into it.

   <div class="fan-box"><div style="height:140px;width:280px;overflow:hidden;margin-left:5px" class="fb-like-box" data-href="http://www.facebook.com/hackinguniversity.in" data-width="288" data-height="170" data-show-faces="true" data-border-color="#f7f7f7" data-stream="false" data-header="false"></div></div>

6. Now change the username with yours facebook page, that's it save the gadget.
7. Now refresh your blog and see this awesome 3D styled Facebook like box.