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>
<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>
<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!
Chuyên mục:
Blogspot nâng cao
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
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@ 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óaKhô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@ Neyurt: Xin lỗi bạn template cũ mình không còn giữ bạn!
Trả lờiXóabạ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óabạn có thể chỉ mình cách phân trang như trang của bạn được ko
Trả lờiXóa@ 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óavotay .thnks nhiều nhé :
Trả lờiXóaanh ơ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@ 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>
Trả lờiXóa<div style='left:10px; top:155px; position: fixed;'>
Các nút tiện ích
</div>
Cảm ơn bạn vì bài viết
Trả lờiXóavớ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
@ 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:
Trả lờiXóa[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]
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óaCó 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óaBạn ơi sao mình làm rồi mà nó không trượt nhĩ.
Trả lờiXóaBạ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