Tạo hiệu ứng mô tả cho link liên kết - Sử dụng Javascript (toolip)

Ở các thủ thuật trước mình có hướng dẫn các bạn tạo hiệu ứng mô tả chỉ dùng CSS, ở bài viết này mình sẽ giới thiệu việc tạo hiệu ứng mô tả dùng JS. Với thủ thuật này thì popup mô tả sẽ di chuyển theo con chuột, không như cách ta dùng CSS, popup chỉ hiển thị ở 1 vị trí cố định.

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
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script language="javascript" src="http://data.fandung.com/js/tooltip.js"></script>

<style type="text/css">
#dhtmltooltip{
border-right: black 1px solid;
padding-right: 4px;
border-top: black 1px solid;
padding-left: 4px;
font-size: 10pt;
z-index: 100;
filter: alpha(opacity=90);
-moz-opacity: .90;
-khtml-opacity: .90;
opacity: .90;
left: -300px;
visibility: hidden;
padding-bottom: 4px;
border-left: black 1px solid;
padding-top: 4px;
border-bottom: black 1px solid;
font-family: Arial;
position: absolute;
background-color: lightyellow;
width: 250px;
}
#dhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;

}
</style>

Lưu ý: Bạn nên Download file js trên về TẠI ĐÂY và Upload lên Host riêng vì theo mình test file js trên đã đie

5. Save template.
6. Và sau đây code HTML:

<a href="{URL của liên kết}" onmouseover="showtip('Phần mô tả của link liên kết')" onmouseout="hidetip();">Tiều đề của link</a>

-Thay đổi code màu xanh cho tương ứng với link liên kết của bạn.
Chúc thành công!

Theo: Fandung.

Chủ đề:
Blogspot CSS HTML , Blogspot Links, Blogspot-tips