New Floating Social Sharing Bar Widget for Blogspot

Hôm nay mình sẽ giới thiệu một tiện ích gồm các buttons chia sẻ bài viết lên các mạng xã hội kiểu mới. Các buttons này nằm trong một thanh ngang sẽ xuất hiện khi bạn kéo thanh trượt điểm mà bạn muốn. Để hiểu rõ hơn về tiện ích thú vị này mời bạn xem demo bên dưới

Cách Thực Hiện

Bước 1: Vào blogger → Mẫu →  Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Nếu blog bạn chưa có jQuery thì chèn code bên dưới vào trước thẻ </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

Bước 4: Thanh tiện ích này theo mặc định sẽ xuất hiện tại điểm cuối cùng của blog. Nhưng bạn cũng có thể cho nó xuất hiện tại bất cứ điểm nào bạn muốn bằng cách thêm thuộc tính sau vào

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script src='https://trollvlhcv.googlecode.com/svn/trunk/NewFloatingSocialsharing.js' type='text/javascript'/> <div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'> <div style='width: 800px; margin: 20px auto;'> <span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'> <a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span> <span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/> <g:plusone size='tall'/></span> <span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'> <div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#appId=155934781145405&amp;xfbml=1'/> <fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'> </fb:like> </span>           <div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'> Bạn thấy bài viết này thú vị? Hãy chia sẻ nha!<br/> <span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span> </div> </div> </div> </b:if>