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.

- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
- Hiệu ứng thay đổi tiêu đề cho blog theo thời gian
Comments[ 0 ]
Đăng nhận xét