Hướng dẫn thiết kế một trang báo lỗi 404 đẹp cho Blogger - Blogspot

Chào các bạn hôm nay mình lại viết thêm bài viết hướng dẫn các bạn tạo trang thông báo lỗi 404 cực dễ dàng để truyền tải được thông điệp mà bạn muốn thông báo cho độc giả của mình khi truy cập vào site của mình bởi những link đã bị die hay có sự nhầm lẫn kí tự từ người dùng

XEM DEMO

404 Not Found là lỗi xảy ra khi không tìm thấy nội dung mà người dùng yêu cầu. Đối với website/blog, khi người dùng đi tới một liên kết trong trang của bạn nhưng máy chủ cho biết không tìm thấy nội dung, họ sẽ được đưa tới một trang báo lỗi 404 để họ biết và có thể quay về trang chủ hoặc trang vừa xem trước đó. Bài viết này mình sẽ hướng dẫn các bạn thiết kế một trang báo lỗi 404 đẹp cho Blogger.

Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML.

Bước 2: Chèn đoạn code sau vào trước thẻ đóng </body

<!--Khắc phục lỗi 404 khi link die--> <b:if cond='data:blog.pageType == "error_page"'> <style> #error-not-found {background: #ff0000;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ldv1c-KqWTUXrrpX9QvPLXYVcJ__Ar36Vgv889AW3oDXmcXTPm_9eiapRVc4wsNMkuDVupd-00T_0Fo9JZEwNqlu5aHK8ZMsuEwOlHNTh7zSbBD87LvTTCsj6n8Pxeqrl8L9IiVCkyo/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%); background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ldv1c-KqWTUXrrpX9QvPLXYVcJ__Ar36Vgv889AW3oDXmcXTPm_9eiapRVc4wsNMkuDVupd-00T_0Fo9JZEwNqlu5aHK8ZMsuEwOlHNTh7zSbBD87LvTTCsj6n8Pxeqrl8L9IiVCkyo/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0, center 40%, 800, from(#ff0000), to(#880000) ); text-align:center; position:fixed; top:0px; right:0px; bottom:0px; left:0px; padding-top:270px; z-index:999999; } #error-not-found h1 { font-size:640px!important; position:absolute; font-family:Arial; top:70px; left:50%; letter-spacing: -8px; margin-left:-502px!important; width:960px; z-index:-2; color:rgba(0,0,0,.09)!important; } #error-not-found h2 { font-family:arial black; text-transform:normal; font-size:35px; line-height:66px!important; letter-spacing: -3px; color:#fff!important; margin:0!important; padding:0!important; } #error-not-found p a, #error-not-found p a:visited, #error-not-found p a:hover{ font-family:arial black; text-transform:normal; font-size:20px; line-height:40px!important; border:none; font-weight: bold; color:rgba(0,0,0,.5)!important; margin:0!important; padding:0!important; text-decoration:none!important; } </style> <div id='error-not-found'> <h1> 404</h1> <h2> IDICHVUMARKETING.COM xin lỗi vì sự bất tiện này</h2> <h2> Không tìm thấy trang theo truy vấn của bạn</h2> <br/> <p> <a href='/' title='Trở về trang chủ'>Bạn vui lòng CLICK tại đây để quay lại trang chủ bạn nhé !</a></p> </div> </b:if> <!--/Khắc phục lỗi 404 khi link die-->

Bước 3: Lưu lại và xem kết quả. Các bạn có thể kiểm tra trang báo lỗi bằng cách vào thử một trang không có trong blog của bạn, VD: http://yourblogurl/404 (yourblogurl là địa chỉ blog của bạn).


Chúc các bạn thành công !

Đừng Quên: Nhấn LIKE và CHIA SẺ để ủng hộ mình nếu bài viết có ích nhé !