PDA

View Full Version : 40 mẫu 404 Error Pages đẹp



bavuongduongpho
17-08-2010, 08:54 PM
40 mẫu 404 Error Pages đẹp
40 mẫu trang lỗi 404 not found, nhiều cái nhìn cũng hay, anh em coi thích cái nào thì zip nhé
agens (http://agens.no/404)

.http://webdesignledger.com/wp-content/uploads/2010/06/errorpages02.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages02.jpg)
Abduzeedo (http://abduzeedo.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages05.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages05.jpg)
Tobias Ahlin (http://tobiasahlin.com/404)

.http://webdesignledger.com/wp-content/uploads/2010/06/404_pages_1.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/404_pages_1.jpg)
Chris Jennings (http://chrisjennings.com/404)

.http://webdesignledger.com/wp-content/uploads/2010/06/errorpages07.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages07.jpg)
Mark Dijkstra (http://www.markdijkstra.eu/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages08.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages08.jpg)
futureofwebdesign.com (http://futureofwebdesign.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages09.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages09.jpg)
twurn (http://twurn.com/500)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages10.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages10.jpg)
IAMWW (http://iamww.com/404)

.http://webdesignledger.com/wp-content/uploads/2010/06/errorpages11.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages11.jpg)
amyherndonphotography.com (http://www.amyherndonphotography.com/blog/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages12.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages12.jpg)
designzillas.com (http://www.designzillas.com/404)

.http://webdesignledger.com/wp-content/uploads/2010/06/errorpages13.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages13.jpg)
xhtml kitchen (http://www.xhtmlkitchen.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages14.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages14.jpg)
Christopher Meeks (http://christophermeeks.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages15.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages15.jpg)
Drexler (http://drxlr.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages16.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages16.jpg)
Oroza (http://www.oroza.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages17.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages17.jpg)
Sandand Starfish (http://sandandstarfish.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages18.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages18.jpg)
Imaginaria Creative (http://imaginariacreative.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages19.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages19.jpg)
The Little Cake Parlour (http://www.thelittlecakeparlour.co.uk/404)
http://webdesignledger.com/wp-content/uploads/2010/06/errorpages20.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages20.jpg)
Carsonified (http://carsonified.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages01.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages01.jpg)
publicitweet (http://publicitweet.com/error?err=Ex)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages21.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages21.jpg)
Salt of the Earth (http://www.saltpgh.com/404)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages22.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages22.jpg)
Doorstep Dairy (http://www.doorstepdairy.com/404/)

http://webdesignledger.com/wp-content/uploads/2010/06/errorpages23.jpg (http://webdesignledger.com/wp-content/uploads/2010/06/errorpages23.jpg)

Kudo
19-08-2010, 06:57 AM
đẹp đó, thanks nha:MatCuoi (9):
Nhưng làm thế nào để đưa nó lên web của mình vậy các bạn:">

bavuongduongpho
24-08-2010, 09:42 PM
đẹp đó, thanks nha:MatCuoi (9):
Nhưng làm thế nào để đưa nó lên web của mình vậy các bạn:">

Trước hết bạn cần tạo một trang .htaccess trước đã.

1. Mở Notepad và copy đoạn code sau
ErrorDocument 404 /404.html
2. Nhấn Ctrl-S để lưu file lại ở ô File Name: bạn điền .htaccess

3.Tại ô Save as Type, nhấn vào mũi tên thả xuống và chọn All Files

4. Nhấn Save

5. Mở tiếp Notepad và tạo một file có tên là 404.html với nội dung tuỳ bạn

6. Upload 2 file này gồm .htaccess và 404.html vào thư mục gốc.

Dòng “ErrorDocument 404″ chỉ cho Apache server biết rằng khi nào nó không tìm được file nó cần trong thư mục của nó, nó sẽ sử dụng file được chỉ định từ trước.

Một file .htaccess ở thư mục gốc là đủ để hiển thị trang báo lỗi 404 cho toàn bộ trang web. Nhưng nếu bạn muốn có những trang báo lỗi khác nhau cho từng thư mục con, bạn có thể tải file .htaccess lên thư mục con đó. File .htaccess này sẽ override những file .htaccess ở thư mục gốc.
404 page error

Sau khi đã có 2 file .htaccess và 404.html, bạn upload cả 2 files này lên host và sau đó mở trình duyệt để kiểm tra xem nó có hoạt động hay không bằng cách gõ vào trình duyệt một trang mà bạn biết chắc không có trên host. Khi trang 404 của bạn đã hiện ra, bạn xem các đường link của nó có hoạt động như bạn đã làm từ trước không.

Chú ý: Bởi vì trang báo lỗi 404 có thể được đọc từ thư mục gốc hoặc các thư mục con của nó, thậm chí cả thư mục CGI-BIN. Do vậy khi đưa đường link vào trang báo lỗi 404, hình ảnh và logo. Bạn phải sử dụng URL đầy đủ mà không phải dạng tương đối

Ví dụ:

Top Post

Thay vì

Top Posts

Nói chung chúng ta nên hạn chế tối đa các đường link hỏng trên trang web, nhưng nếu chúng có xảy ra, chúng ta phải cố gắng hết sức để giữ chân người đọc mà phải vất vả lắm mới mời được họ đến. Nhìn chung người đọc khá dị ứng với trang báo lỗi mặc định, mỗi khi thấy nó là họ chỉ có nhấn nút Back và không đọc tiếp trang của bạn nữa.