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 mà tác giả blog MD đã giới thiệu. 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

Demo

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

<div id='trollvl-active-share-comment-marker'/>

Theo mình thì nên đặt button này ở vị trí cuối cùng của bài viết. Vì muốn chia sẻ hay không thì cũng phải để cho độc giả của bạn đọc hết bài viết đã chứ. Để đặt buttons ở cuối bài viết bạn dán code phía trên vào ngay sau thẻ <data:post.body/> trong template của bạn
Bước 5: Để thêm tiện ích này vào blog bạn chèn code bên dưới trước thẻ đóng </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://googledrive.com/host/0Bz_65BAr9KCZYlg2RHZmcmJnUVU' type='text/javascript'/>
<div id='trollvl-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color:#0F83A0; 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='trollvl-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='trollvl-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;font-size:18px;'>
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>

Chỉnh sửa những phần in đậm cho phù hợp với blog của bạn