Home » Thủ thuật blog
Tạo tab có hiệu ứng trượt khi rê chuột vào button

Xem demo ở đây: http://fandung.110mb.com/JS-files/easy-scroller/index.html
Hình minh họa :

Khi bạn rê chuột vào button Up thì nội dung bên trong sẽ trượt xuống, khi bạn rê vào button Down thì nội dung sẽ trượt lên, còn khi nhấn vào button Reset thì nội dung sẽ trở về vị trí ban đầu.
Bài viết này mình sẽ chỉ giới thiệu thủ thuật, còn việc áp dụng cho các widget thì các bạn có thể tự theo hướng dẫn của bài này mà thực hiện. Sau này rảnh mình sẽ áp dụng nó cho các widget và viết bài hướng dẫn sau.
☼ Bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type="text/javascript" src="http://fandung.110mb.com/JS-files/easy-scroller/easyscroll.js"></script>
<script type="text/javascript">
var speed = 5;
var height = 250;
</script>
<style type="text/css">
#easyscroll{
background:#eee;
margin:1em 0;
/* add additional styling */
}
/* easyscroll navigation buttons */
#easyscrollnav, #easyscrollnav li{
height:28px;
line-height:28px;
margin:0;
padding:0;
}
#easyscrollnav{
margin:1em 0;
}
#easyscrollnav li{
list-style:none;
float:left;
background:#eee;
margin-right:10px;
padding:0 10px;
color:#333;
cursor:pointer;
}
#easyscrollnav li.over{
color:#999;
text-decoration:underline;
background:#ccc;
}
</style>
- Vài chú thích nhỏ :
+ var speed = 5; : tốc độ trượt nội dung
+ var height = 250; : chiều cao của tab.
+ var height = 250; : chiều cao của tab.
5. Và đây là code HTML của thủ thuật :
<div id="myContent">
{NỘI DUNG CỦA TAB}
</div>
Khi muốn áp dụng cho 1 widget hoặc 1 tiện ích nào, bạn chỉ cần thay đoạn code màu xanh thành nội dung của widget đó là xong. Nếu không thực hiện được, hoặc không biết cách thực hiện, có thể vào mục yêu cầu thủ thuật của blog mình để yêu cầu mình giúp, mình sẽ hướng dẫn cho các bạn.
Hạn chế của thủ thuật là chỉ chạy được 1 tab trên 1 trang mà thôi.
Chúc các bạn thành công.

- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
Comments[ 0 ]
Đăng nhận xét