Nút chia sẻ Facebook với hiệu ứng trượt và ẩn hiện

Hôm nay, mình xin giới thiệu một mẫu nút share lên Facebook với hiệu ứng đóng mở và trượt rất đẹp mắt.

VIEW DEMO

#Cách tiến hành

Đối với loại này thì chúng ta có hai phương án thực hiện:
1. Đi đến phần Bố Cục > Tạo một HTML/Javascrip mới > Dán code dưới vào và save lại
Hoặc
2. Đi đến phần Mẫu > Chỉnh sửa HTML > Dán code dưới vào trên thẻ </body>

<b:if cond='data:blog.pageType == "item"'>
<style>
/* Widget by AllBloggerTricks.com */
#fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px #888888;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;}
#fixed-share:hover {right: 0}
#fixed-share:hover > #share-box {right: 147px}
#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}
</style>
 <div id="fixed-share">
 <div id="share-box">
<img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" />
</div>
<span>Support Us<br/> <script>(function(d){ var js, id =
'facebook-jssdk'; if (d.getElementById(id)) {return;} js =
d.createElement('script'); js.id = id; js.async = true; js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>  <fb:share-button expr:href='data:post.url'
type='button_count'/> </fb:share-button>
</span></div>
<!-- Widget  by AllBloggerTricks.com -->
</b:if>