Home » Thủ thuật blog
Tạo hiệu ứng mô tả cho link liên kết - Sử dụng Javascript
Thứ Sáu, 26 tháng 6, 2009

Xem demo trực tiếp ở đây: http://data.fandung.com/blog/html/tooltips.html
Hình ảnh minh họa:

Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. 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>
4. Save template.
5. 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.
Với thủ thuật này mình vẫn chưa áp dụng nó vào cho thủ thuật Recent post được.
Tham khảo từ source trên Net
Chúc các bạn thành công.

- Ảnh rõ hơn khi rê chuột vào, một ứng dụng của Javascript
- Tạo các Tab nội dung
- JS : 1 ví dụ về lệnh OnMouseMove (phần 2)
- JS : Tạo 1 pop-up khi load trang web
- JS : 1 ví dụ về lệnh onmouseover trong JavaScript
- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
- Giải pháp VNPT chặn blogger ngày 09/06/2012
- Tạo thumb cho bài đăng phổ biến
Comments[ 0 ]
Đăng nhận xét