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!
0 nhận xét:
Đăng nhận xét