Có khi nào bạn nghĩ mình có thể dùng con trỏ kéo một tiện ích nào đó trên blog của mình đến một vị trí khác trên trang? Liệu điều đó có thể thực hiện được hay không? Tại sao không thể tạo ra thủ thuật có tác dụng như thế để nghịch trên blog một chút.
XEM DEMO
Thủ thuật kéo tiện ích giúp chúng ta nghịch ngợm với blog một chút và khiến cho việc chơi blog trở nên thú vị hơn. Để tạo thủ thuật này, tôi có sử dụng đến thư viện Scriptaculous.
Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi nào trên mẫu blogger của bạn, Namkna khuyên bạn nên sao lưu mẫu, bằng cách nhấp vào liên kết Mẫu => Sao lưu/Khôi phục => Tải về (Download Template Full Version).
☼ Cách tiến hành:
Bước 1- Cài đặt Scriptaculous cho blogger
1- Đăng nhập (Login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML). Không cần mở rộng tiện ích mẫu.
4- Tìm kiếm thẻ </head> và thêm vào trước nó đoạn CSS sau:
<script src='http://www.google.com/jsapi'/> <script> google.load("prototype","1.6.0.3"); google.load("scriptaculous", "1.8.2"); </script>
5- Lưu Template.
Bước 2. Áp dụng Scriptaculous cho widget của blogger
1- Bạn cần xác định id của một tiện ích HTML/JavaScript nào đó mà bạn muốn áp dụng thủ thuật kéo. Ví dụ nếu bạn áp dụng cho tiện ích có id là HTML1
2- vào Bố cục (Lay out), chỉnh sửa tiện ích có id HTML1 và đặt vào phần nội dung của tiện ích với cấu trúc như sau.
2- vào Bố cục (Lay out), chỉnh sửa tiện ích có id HTML1 và đặt vào phần nội dung của tiện ích với cấu trúc như sau.
<div id="HTML1" style="cursor:move; border:0px;"> Nội dung code tiện ích có id là HTML1 </div> <script type="text/javascript">new Draggable('HTML1');</script>
- Tương tự như vậy bạn có thể áp dụng cho các tiện ích khác với id như HTML2, HTML3, …
Xem cách kéo hình ảnh TẠI ĐÂY
Chúc thành công!
thuthuatblog
Nhận xét