Thư viện

Trải nghiệm

Chủ Nhật, tháng 2 24, 2013

Liên kết và tùy biến liên kết cho blog/web

Khi bạn vào trang web nào đó, Bạn sẽ thấy trong trang của họ có các link liên kết. Các link này thường có màu khác với màu chữ chung để độc giả dễ phân biệt. Có trang màu link thay đổi khi click chuột hoặc dê chuột qua link đó, cũng có trang màu link không thay dổi khi click vào đó hoặc di chuột qua nó.

Chia sẻ:

Khi bạn vào trang web nào đó, Bạn sẽ thấy trong trang của họ có các link liên kết. Các link này thường có màu khác với màu chữ chung để độc giả dễ phân biệt. Có trang màu link thay đổi khi click chuột hoặc dê chuột qua link đó, cũng có trang màu link không thay dổi khi click vào đó hoặc di chuột qua nó.

Tất cả hiệu ứng link liên kết  đều có một cấu chúc chung cơ bản như bên dưới.
a:link{
color:blue; /*màu chữ link khi chưa dê chuột hoặc click vào*/
}
a:visited{
color: red; /*Màu chữ link đã xem rồi*/
}
a:hover{
color:orange; /*Màu chữ link khi dê chuột vào */
}
a:active{
color:red; /*Màu chữ link sau khi click */
}

Tùy biến link!

Từ cấu trúc trên ta có thể tùy biến thêm như:
1- Thêm gạch chân khi ai đó di chuột qua bạn chỉ cần thêm một trạng thái là Text-decoration:underline vào thẻ a:hover vào giữa hai dấu ngoặc {}
a:hover{
color:orange;
text-decoration:underline;
}
- Bỏ dấu gạch chân cho link thì bạn thay underline thành none như bên dưới (Trường hợp này áp dụng khi thẻ a:hover bạn để underline và bạn muốn một class nào đó không gạch chân ví dụ cho thẻ #sidebar.
#sidebar a:hover{
color:orange;
text-decoration:none;
}
- Làm tương tự với các thẻ còn lại.
2- Thên nền backgroud khi dê chuột qua:
a:hover {
color: orange;
text-decoration:underline;
background-color: #dddddd; /* Mã màu nền */
} 
3 -Thay đổi con trỏ khi ai đó di chuột qua đường link. Bạn thử đổi con trỏ thành dấu chấm hỏi (biểu tượng của giúp đỡ - helf).
a:hover {
color: orange;
text-decoration:underline;
background-color: #dddddd; /* Mã màu nền */
cursor: help; 
} 
Một vài trạng thái con trỏ khác bạn cũng có thể dùng:
auto
crosshair
help
move
pointer
text
wait
e-resize
ne-resize
n-resize
nw-resize
s-resize
se-resize 
- Bạn nên cẩn thận khi sử dụng những trạng thái của con trỏ trên trang web bởi vì nếu bạn dùng không đúng cách có thể làm cho người đọc nhầm lẫn và khó hiểu.

7 nhận xét:

  1. Anh cho em hỏi một chút: em viết blog về bóng đá, hiện em muốn lấy lịch thi đấu của một trang web khác chèn vào blog của mình, mà nó tự động cập nhật như trang web đó thì có dc không ?

    Trả lờiXóa
    Trả lời
    1. Nếu trang đó dùng scrip thì hoàn toàn có thể!

      Xóa
    2. Với tiêu đề bài viết + tiêu đề blog hơi bị lỗi font một tí

      Xóa
  2. Anh ơi cho em hỏi Em muốn làm link trong bài viết nó đổi màu + có gạch chân khi rê chuột vào như thế nào thế anh. Em tìm hiết tất cả và thay đổi nó chả đc gì cả. A vào xem blogspot của em xem thử http://webtruyendich.blogspot.com/2014/07/tinh-gioi.html không biết nó bị sao mà đổi ko đc

    Trả lờiXóa
    Trả lời
    1. Em thay đoạn:

      a:link{text-decoration:none;color:#F87217;}

      thành:

      a:link,a:visited, .container a:link,.container a:visited{color:#066;text-decoration:underline}
      a:hover,a:active{text-decoration:underline;color:#066;}

      Thay đổi lại màu cho thích hợp nha.

      Xóa
    2. Cảm Ơn Anh. Em làm Được Rồi

      Xóa
  3. mọi người đang thắc mắc chưa có giải pháp và thủ thuật nào khắc phục về link out trên blogger. mà tình cờ mới đọc bài khắc phục link out và thấy trang của bạn đã hoàn toàn khắc phục được điều đó. Bạn có thể viết 1 bài hướng dẫn mọi người không? Cảm ơn ban, cả cộng đồng blogspot mong bạn sẽ chia sẻ.

    Trả lờiXóa