MyPakBlogger blog teach you how to customize your facebook like widget by using CSS effect in your blogger widget .It will helps to increase your facebook widget's look better and encourage to focus on it.
- Goto on blogger dashboard
- click on Layout tab
- click on Add a Gadget
- copy below code on HTML/JAVASCRIPT editor
<div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <br /> <div class="tbicustomlb"> <div class="fb-like-box" data-border-color="#F4F4F4" data-header="false" data-height="275" data-href="https://www.facebook.com/pages/Sainiblogger/260641427388999" data-show-faces="true" data-stream="false" data-width="245"> </div> </div> <style> .tbicustomlb { margin: 10px auto; background-color: #F4F4F4; width: 251px; padding: 10px 0 10px 10px; height: 240px; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -webkit-box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.75); -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border: 10px solid rgb(189, 174, 8); } .tbicustomlb:hover { border: 10px solid #008000; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } </style>
You should Replace Red highlighted line on above code to your facebook page name .
