Đố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, hôm nay namkna 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 (scrollbar) chuột xuống phía dưới. Nó giống như dạng các banner quảng cáo trượt dọc 2 bên của blogspot mà namkna giới thiệu.
Hình ảnh minh họa:
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>
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://namknablog.googlecode.com/files/jquery.min.v1.4.1.js" type="text/javascript"></script><script src="http://namknablog.googlecode.com/files/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>
- Lưu ý: Các bạn nên thể Download 2 File Js trên về Tại Đây và upload lên host riêng để dùng lâu dài.
6. Bây giờ bạn tìm đến dòng code bên dưới hoặc tương tự (do đặc điểm cấu tạo của mỗi blog nên có chút khác nhau nhỏ). <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.
8. Cuối cùng save template lại.
No comments:
Post a Comment