Theo yêu cầu của bạn Ngân (www.blogtruyen.com)
[FD's BlOg] - Theo yêu cầu của bạn Ngân, bài này sẽ hướng dẫn 2 việc : 1 là ngăn không cho các User dùng trình duyệt IE phiên bản 6 trở xuống, 2 là hiện 1 bảng thông báo nhỏ yêu cầu các user này phải sử dụng các trình duyệt khác như FireFox, chrome,... hoặc yêu cầu nâng cấp IE lên phiên bản mới để xem được blog.Hình ảnh minh họa kết quả thực hiện :
Khi dùng trình duyệt khác IE , cụ thể là FireFox
Khi dùng trình duyệt IE6
Cơ bản của thủ thuật này là ta điều chỉnh việc hiển thị các ID cho từng trình duyệt, khi ở các trình duyệt khác IE hoặc IE với các phiên bản lớn hơn 6 thì ta sẽ xem được blog bình thường, và bảng thông báo được ẩn đi. Khi dùng trình duyệt nhỏ hơn hoặc bằng IE6 thì phần nội dung blog sẽ bị ẩn và thay vào đó là bảng thông báo sẽ được hiển thị (như trong hình mà mì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 CSS bên dưới vào trước dòng code ]]></b:skin>
#noticeIE6 {
width:500px;
background:#eee url(http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/23/10/76591248319987.gif) no-repeat top;
border:2px solid #ccc;
padding:100px 10px 10px 10px;
font-size:15px;
display:none;
}
- đây chính là ID chứa nội dung của bảng thông báo.
- Có thể tùy chỉnh lại các thuộc tính của ID này.
- Lưu ý đoạn code display:none; code này là để mặc định cho bảng thông báo luôn luôn được ẩn.
4. tiếp tục chèn đoạn code bên dưới vào sau dòng code ]]></b:skin>
<!--[if lt IE 7]>
<style type='text/css'>
#noticeIE6 {display:block;}
#lessIE6 {display:none;}
</style>
<![endif]-->
- trong đoạn code ở bước 4 này ta thấy có 2 ID với việc hiển thị trái ngược nhau. ID noticeIE6 chính là ID chứa nội dung của bảng thông báo, ID lessIE6 chính là ID để ẩn nội dung blog với trình duyệt bé hơn IE7.
- Mình sẽ giải thích thêm về ý nghĩa của đoạn code màu xanh ở trên:
+ Đoạn code màu xanh ở trên có nghĩa là nếu trình duyệt hiện hành là trình duyệt IE với các phiên bản nhỏ hơn 7 thì các lệnh bên trong nó sẽ được thực thi.
+ Ngoài ra ta còn có các lệnh khác như :
- if IE 7 : trình duyệt là IE 7
- if gt IE 7 : trình duyệt IE với các phiên bản lớn hơn 7
- if gte IE 7 : trình duyệt IE với các phiên bản lớn hơn hoặc bằng 7
- if lt IE 7 : trình duyệt IE với các phiên bản bé hơn 7
- if lte IE 7 : trình duyệt IE với các phiên bản bé hơn hoặc bằng 7
5. Tiếp tục tìm đến thẻ <body> và thêm các đoạn code được đánh dấu highlight và code màu đỏ vào như bên dưới:
...
...
<body>
<center>
<div id='noticeIE6'>
{Nội dung của bảng thông báo}
</div>
</center>
<div id='lessIE6'>
...
...
...
</div>
</body>
</html>
- với code Highlight là code của bảng thông báo.
- Code màu đỏ là code dùng để ẩn nội dung blog khi người dùng truy cập blog bằng trình duyệt IE với các phiên bản nhỏ hơn 7.
6. Save template.
P/S: mở rộng ra ta có thể áp dụng thủ thuật này cho việc hiển thị từng tiện ích ở các trình duyệt khác nhau, như yêu cầu của bạn Tài đã nhờ mình.
Chúc các bạn thành công.
Không có nhận xét nào:
Đăng nhận xét