[ Tips ] Tạo con trỏ chuột cho Blogger

Chuột là một công cụ giúp chúng ta chọn các lệnh trong máy tính hay click vào các đường link khi lướt web. Mỗi máy tính có mặc định sẳn hình ảnh cho chú chuột tùy theo người dùng. Vậy làm sao ta có thể thay đổi hình ảnh của các chú chuột đó khi họ vào trang blog hay web của chúng ta? Hình ảnh của chú chuột cũng tạo nên sự thích thú cho độc giả và làm blog sinh động hơn. Mình sẽ giới thiệu cho các bạn cách thay đổi hình ảnh chuột máy tính trên blogspot.

 





1. Đăng nhập vào tài khoản blogger
2. Thêm 1 HTML/Javascript và thêm đoạn mã bên dưới vào

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/blkglitwrkbgnd.ani"), url("http://lh5.ggpht.com/_TaHzV-QgYq0/S17G6-QTLDI/AAAAAAAAFRE/opaLpGQugtU/redglitter.gif"), auto;}</style>

Bạn chỉ việc thay ảnh trong code trên thành hình ảnh mà mình thích là xong, đoạn mã màu đỏ trong code trên.

Bây giờ mình cũng chia sẽ cho bạn cách tạo hiệu ứng cho chuột khi rê vào link. Bạn hãy thực hiện 2 bước trên và thêm code bên dưới vào HTML/Javascript đó, bạn cũng có thể thêm 2 code trên vào cùng một HTML/Javascript.

<style>A:hover{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/butterflyani1.cur"), url("http://lh5.ggpht.com/_TaHzV-QgYq0/S17G632P9HI/AAAAAAAAFRA/ArKIi6ah1Fo/redglitlnkslct.gif"), auto;}</style>

Bạn cũng thay link ảnh chuột theo ý bạn (http://lh5.ggpht.com/_TaHzV-QgYq0/S17G632P9HI/AAAAAAAAFRA/ArKIi6ah1Fo/redglitlnkslct.gif) tương tự như trên và save lại là xong.

Ở trên mình đã giới thiệu cho bạn cách thay đổi hình ảnh của chuột trên nền blog và khi rê vào link. Bây giờ mình sẽ hướng dẫn thêm bạn cách để thay đổi chú chuột đó ở từng đoạn văn bản nhất định.

Ví dụ bạn muốn đoạn văn bản (CHÚC BẠN CÓ MỘT NGÀY NHIỀU NIỀM VUI VÀ MAY MẮN) sẽ có hình ảnh chuột khác (ở đây là dấu hỏi) khi rê chuột vào đoạn văn bản đó, bạn viết mã HTML cho nó như bên dưới:

Live Demo: CHÚC BẠN CÓ MỘT NGÀY NHIỀU NIỀM VUI VÀ MAY MẮN

<span style="cursor: help;">CHÚC BẠN CÓ MỘT NGÀY NHIỀU NIỀM VUI VÀ MAY MẮN</span>

Posted in: Inspirations, Web Design