Tạo trang báo lỗi 404 Page Not Found cho blog

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:

XEM DEMO

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>:

<!--Error Page Not Found by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "error_page"'>
<style>
#error-not-found {background: #ff0000;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ3EIQaazsyedfOfWRHZIw33p8Uu0qx5hs5UkiB4YnJBnR2rkcSjuDMhBEZDhc-VbkxKXDM28kOKpUUO06D9vNjYkg14F0FyiK02tvNXCqWSmneJ8-ZzALHGaW4dvfGsP5LUFX5VPLVeU/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/AVvXsEgZ3EIQaazsyedfOfWRHZIw33p8Uu0qx5hs5UkiB4YnJBnR2rkcSjuDMhBEZDhc-VbkxKXDM28kOKpUUO06D9vNjYkg14F0FyiK02tvNXCqWSmneJ8-ZzALHGaW4dvfGsP5LUFX5VPLVeU/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>KJ Magic</h2>       <h2>Page Not Found !</h2><br/>      <p> <a href='/' title='Trở về trang chủ'>Back to home page</a></p>     </div>     </b:if>
<!--/Error Page Not Found by kjmagic.blogspot.com-->

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 !

Xem thêm thủ thuật: kjmagic.blogspot.com