Kéo tiện ích sử dụng Scriptaculous

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.

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.

Xem Demo.

Nếu bạn thích nghịch và vọc thủ thuật này thì hãy thực hiện theo các bước sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt trước thẻ </head> với đoạn code sau đây.

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Lưu Template.

Bước 2. Lúc này 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 thì bạn vào Page Elements, 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, …