Tạo trang báo lỗi 404 cho blogspot

Xin chào các bạn , hôm nay Cenz xin được giới thiệu đôi chút về trang 404 . Thì gần đây , blogger đã cập nhật 1 số tính năng mới và việc tạo dựng 1 trang 404 đã trở nên dễ dàng hơn , chúng ta sẽ bắt đầu công việc ngay bay giờ

Demo

1.Cách thứ nhất:

Tìm trong temp đoạn mã : <b:includable id='main' var='top'> và thêm vào sau nó đoạn code

<b:if cond='data:numPosts == 0'>
 <data:navMessage/>
</b:if>

Để thiết kế cho trang 404 bạn vào Cài đặt → Tùy chọn tìm kiếm. Ở mục Lỗi và chuyển hướng chọn Chỉnh sửa và viết dòng thông báo bạn muốn hiển thị (hỗ trợ cả mã HTML) hoặc sử dụng đoạn mã dưới đây để hiển thị giống blog demo.

<!-- Start-->   
 <b:if cond='data:blog.pageType == "error_page"'>
<style>
#error-not-found {
    background: #5cffbe;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySxKyxXfMBvAe-Oo6ndolTEEs-mY9TWzu0DUUdvs9YwT9wXb7ky09tyYvUnY2Fz7E32EqGV5TW1AWmvO5Z-m17ZMQGjp1KU0-3OhFtAYj64NAprMGOpF1mHrOTeY_XIlN5VT0toMZYOA/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #5cffbe 0%, #880000 100%);
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySxKyxXfMBvAe-Oo6ndolTEEs-mY9TWzu0DUUdvs9YwT9wXb7ky09tyYvUnY2Fz7E32EqGV5TW1AWmvO5Z-m17ZMQGjp1KU0-3OhFtAYj64NAprMGOpF1mHrOTeY_XIlN5VT0toMZYOA/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#5cffbe), 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:impact,sans serif!important;
        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,sans serif!important;
        text-transform:uppercase;
        font-size:81px;
        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,sans serif!important;
        text-transform:uppercase;
        font-size:56px;
        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>Oops..sorry</h2>
 <h2>Page Not Found</h2>
 <p> <a href="http://www.vngreenzone.com/"> Back Home page</a></p>
            </div>
</b:if>                <!-- end-->

2.Cách thứ hai:
Tìm trong template </body> vào thêm đoạn code sau trước nó:

<!-- Start-->   
 <b:if cond='data:blog.pageType == "error_page"'>
<style>
#error-not-found {
    background: #5cffbe;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySxKyxXfMBvAe-Oo6ndolTEEs-mY9TWzu0DUUdvs9YwT9wXb7ky09tyYvUnY2Fz7E32EqGV5TW1AWmvO5Z-m17ZMQGjp1KU0-3OhFtAYj64NAprMGOpF1mHrOTeY_XIlN5VT0toMZYOA/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #5cffbe 0%, #880000 100%);
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgySxKyxXfMBvAe-Oo6ndolTEEs-mY9TWzu0DUUdvs9YwT9wXb7ky09tyYvUnY2Fz7E32EqGV5TW1AWmvO5Z-m17ZMQGjp1KU0-3OhFtAYj64NAprMGOpF1mHrOTeY_XIlN5VT0toMZYOA/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#5cffbe), 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:impact,sans serif!important;
        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,sans serif!important;
        text-transform:uppercase;
        font-size:81px;
        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,sans serif!important;
        text-transform:uppercase;
        font-size:56px;
        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>Oops..sorry</h2>
 <h2>Page Not Found</h2>
 <p> <a href="http://www.vngreenzone.com/"> Back Home page</a></p>
            </div>
</b:if>                <!-- end-->

Nếu làm cách thứ hai thì khỏi làm cách thứ nhất và ngược lại.
Để đổi màu chúng ta chỉ việc thay đổi mã màu đã được tô đỏ trong các đoạn code

Nguồn: http://urangkurai.blogspot.com