Tiện ích các nút Share trượt dọc cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Traidatmui.com – Đối với những người đang sở hữu web/blog thì công cụ chia sẻ lên mạng xã hội like, tweet... không thể, nó có thể giúp đọc giả chia sẻ bài viết hay làm tăng trafic cho web/blog. Có rất nhiều cách để đặt các tiện ích này, bài viết hôm nay mình chia sẻ cùng các bạn cách bố trí các công cụ hữu ích này theo chiều dọc và với hiệu ứng trượt kế phần main mỗi khi bạn cuộn chuột xuống phía dưới. Có thể nói nom na là giống như dạng các banner quảng cáo trượt dọc 2 bên của blogspot mà mình giới thiệu tại đây. Bạn có thể xem hình ảnh hay phần demo bên dưới để thấy rỏ hơn tiện ích này, bây giờ mình đi ngay vào thủ thuật này.


Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào sau thẻ <head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/stickysidebar.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#share-buttons').stickySidebar({speed: 300, constrain: true})
});
</script>

<style>
#share-buttons {
background: #fff;
border: 1px solid #ccc;
margin-left: -82px;
padding: 8px;
position: absolute;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;
}
</style>

6. Bây giờ bạn tìm đến dòng code bên dưới hoặc tương tự
<div class='post-header-line-1'/>

7. Tiếp theo bạn chèn code bên dưới vào sau code vừa tìm được
<div id='share-buttons'>

<div class='twitter scount'>
<a class='twitter-share-button' data-count='vertical' data-text='List Only Post Titles On Blogger Labels Pages' data-url='http://www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html' data-via='paulcrowepro' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

<div class='facebook scount'>
<fb:like font='' href='http://www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html' layout='box_count' send='false' show_faces='false' width='50'/>
</div>

<div class='stumble scount'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>

<div class='gplus scount'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/>
</div>

</div>


Ở trên mình chỉ đưa một số công cụ phổ biến bạn có thể dựa vào đó để thay đổi bổ sung hoặc xóa bớt cho phù hợp với site của bạn.


8. Cuối cùng save template lại.

Chúc bạn thành công!

16 nhận xét

  1. widget này có bản chỉ tạo widget html cũng đầy đủ tiện ích, ko cần chèn vào temp

    Trả lờiXóa
  2. @ VIP: Có thể chỉ dùng HTMl để tạo tiện ích cố định ở 1 vị trí hoặc cuộn theo site nhưng với cách trượt thì mình sử dụng JQ

    Trả lờiXóa
  3. Không biết Trai dat Mui còn lưu lại cái templates lúc trước dùng không ? Nếu có thì cho mình làm trang tạp chi cho công ty nhé.

    Trả lờiXóa
  4. @ Neyurt: Xin lỗi bạn template cũ mình không còn giữ bạn!

    Trả lờiXóa
  5. bạn ơi có bài đăng mới về phân trang không. bạn có thể giúp mình với nha, cám ơn bạn nhiều

    Trả lờiXóa
  6. bạn có thể chỉ mình cách phân trang như trang của bạn được ko

    Trả lờiXóa
  7. @ Võ Văn Tùng: Bạn có thể xem qua bài viết tại đây hoặc gõ từ khóa "Phan trang" trên khung tìm kiếm để xem các bài viết có liên quan khác nhe bạn.

    Trả lờiXóa
  8. anh ơi làm sao để nó hiện nút thích và nút google+ sang bên trái blog như của anh

    Trả lờiXóa
  9. @ nguyễn huy Tập: Em cho các nút đó vào trong thẻ div như bên dưới và đặt trước thẻ </body>

    <div style='left:10px; top:155px; position: fixed;'>

    Các nút tiện ích

    </div>

    Trả lờiXóa
  10. Cảm ơn bạn vì bài viết
    với code của template của mình thì mình không thực hiện được việc thêm nút share kiểu này, bạn có thể làm hướng dẫn mình cách đưa code trên vào một widget HTML đượ không?
    Cảm ơn bạn

    Trả lờiXóa
  11. @ TDT: Bạn hoàn toàn có thể đưa 2 code trên vào cùng 1 HTML/Javascript nếu bạn không chèn được vào template. Tuy nhiên, bạn chú ý phần code ở bước 7 cần phải đóng đúng các thẻ thì nó mới hiển thị được trong widget HTML. Dưới đây là code ví dụ bạn có thể tham khảo:
    [code]<div id="share-buttons">

    <div class="twitter scount">
    <a class="twitter-share-button" data-count="vertical" data-text="Thủ thuật - Download - Thư giản" data-url="http://www.traidatmui.com" data-via="paulcrowepro" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
    </div>

    <div class="facebook scount">
    <fb:like font="" href="http://www.traidatmui.com" layout="box_count" send="false" show_faces="false" width="50"></fb:like>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    </div>

    <div class="stumble scount">
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </div>

    <div class="gplus scount">
    <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>
    <g:plusone size="tall">
    </g:plusone></div>

    </div>[/code]

    Trả lờiXóa
  12. Hiện phát sợ luôn 2 bên 2 hình blog nhảy lung tung chẳng thấy cái gì cả mà toàn thanh chia sẻ bên trong

    Trả lờiXóa
  13. Có thể qua addthis hoặc sharethis để lấy trực tiếp cái này. Tự động add widget luôn cho web blog của bạn.

    Trả lờiXóa
  14. Bạn ơi sao mình làm rồi mà nó không trượt nhĩ.

    Trả lờiXóa
    Trả lời
    1. Bạn xem nếu đã có file JQuery rồi thì không cần thêm file http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js nữa nhé.

      Xóa