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

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!

Xem khác cùng chủ đề

16 nhận xét | Viết lời bình

VIP
10/26/2011 12:48:00 SA Trả lời

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

Admin
10/26/2011 02:45:00 SA Trả lời

@ 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

10/27/2011 01:09:00 SA Trả lời

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é.

Admin
10/27/2011 04:04:00 SA Trả lời

@ Neyurt: Xin lỗi bạn template cũ mình không còn giữ bạn!

10/27/2011 09:35:00 CH Trả lời

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

10/27/2011 09:38:00 CH Trả lời

bạn có thể chỉ mình cách phân trang như trang của bạn được ko

Admin
10/27/2011 10:23:00 CH Trả lời

@ 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.

10/31/2011 05:41:00 SA Trả lời

votay .thnks nhiều nhé :

11/04/2011 02:12:00 CH Trả lời

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

Admin
11/04/2011 08:18:00 CH Trả lời

@ 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>

TDT
12/05/2011 12:56:00 SA Trả lời

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

Admin
12/05/2011 02:04:00 SA Trả lời

@ 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]

6/09/2012 01:12:00 SA Trả lời

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

11/23/2012 11:53:00 CH Trả lời

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.

8/22/2014 08:18:00 SA Trả lời

Bạn ơi sao mình làm rồi mà nó không trượt nhĩ.

Admin
8/25/2014 08:05:00 CH Trả lời

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é.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang