Thiết kế trang báo lỗi 404 theo phong cách chuyên nghiệp

Lỗi không tìm thấy trang (page not found) xuất hiện khi người dùng truy cập vào một đường dẫn nào đó trên website, tuy nhiên máy chủ không tìm thấy và trả trả về nội dung không tồn tại (mã phản hồi 404). Lỗi này có thể xuất hiện ở bất kì website nào, trong bài viết này hung1001 sẽ hướng dẫn các bạn tạo 1 trang báo lỗi 404 đẹp và chuyên nghiệp

Xem demo

 DEMO
Bắt đầu thủ thuật ! Trước hết bạn cần xóa code 404 cũ của template đi bằng cách tìm đến thẻ điều kiện <b:if cond='data:blog.pageType == &quot;error_page&quot;'> hoặc <b:if cond='data:view.isError'>

Khai báo thẻ meta, chèn code trước thẻ </head>

<b:if cond='data:view.isError'>
<meta content='Sorry, the page you were looking for in this blog does not exist' name='description'/>
<meta content='noindex, nofollow' name='robots'/>
</b:if>

Chèn đoạn code SAU thẻ mở <body...>

<b:if cond='!data:view.isError'>

Chèn code TRƯỚC thẻ đóng </body...> hoặc &lt;!--</body>--&gt; &lt;/body&gt; (trường hợp tắt js mặc định)

<b:else/>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=latin-ext,vietnamese' rel='stylesheet' type='text/css'/>
<style type='text/css'>/*<![CDATA[*/
*{margin:0;padding:0}
body{line-height:normal;font-family:Roboto,sans-serif;background:url(https://i.imgur.com/aPGRAV2.jpg)no-repeat center 0;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;background-attachment:fixed}
.hh-404-row{width:65%;margin:0 auto}
.hh-404-nav{margin-top:3em}
.hh-404-nav ul{text-align:center}
.hh-404-nav ul li{display:inline-block;margin:0 1.2em}
.hh-404-nav ul li a{color:#fff;font-size:1em;text-decoration:none;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;transition:0.5s all}
.hh-404-nav ul li a:hover{color:#fbb034}
.hh-404-errortext{padding-top:4em;text-align:center}
.hh-404-errortext h1{font-family:Roboto,sans-serif;font-size:1.2em;color:#fff;font-weight:bold;line-height:1.8em}
p.hh-404-text{font-size:1em;color:#fff;line-height:1.8em;font-weight:400;width:65%;margin:1.5em auto 2.5em}
p.hh-404-text a{color:#fbb034;text-decoration:none}
p.hh-404-text a:hover{color:#ffffff}
.hh-404-search input[type="text"]{width:50%;padding:0.8em 1.5em;font-size:1em;color:#fff;outline:none;border:2px solid #fbb034;background:none;border-radius:50px;-webkit-appearance:none;-webkit-transition:0.5s all;-moz-transition:0.5s all;transition:0.5s all}
.hh-404-search input[type="submit"]{font-family:Roboto,sans-serif;letter-spacing:.02rem;outline:none;box-shadow:none;text-transform:uppercase;font-weight:bold;background:transparent;border:2px solid #fbb034;padding:.8em 2em;color:#fff;cursor:pointer;border-radius:30px;font-size:15px;margin-left:0.3em;-webkit-transition:0.5s all;-moz-transition:0.5s all;transition:0.5s all}
.hh-404-search input[type="submit"]:hover{color:#fff;background:#fbb034}
::-webkit-input-placeholder{color:#fff!important}
:-moz-placeholder{color:#fff!important}
::-moz-placeholder{color:#fff!important}
:-ms-input-placeholder{color:#fff!important}
.hh-404-errortext h2{font-family:Roboto,sans-serif;font-weight:bold;font-size:14em;letter-spacing:20px;color:#fff}
.hh-404-errortext span{color:#fbb034}
@media(max-width:1366px){p.hh-404-text{width:75%}}
@media(max-width:1080px){.hh-404-row{width:75%}}
@media(max-width:991px){p.hh-404-text{width:85%}}
@media(max-width:900px){.hh-404-row{width:85%}.hh-404-errortext{padding-top:5em;text-align:center}.hh-404-nav ul li{margin:0 1em}p.hh-404-text{width:95%}}
@media(max-width:667px){.hh-404-nav ul li{margin:0 0.5em}.hh-404-errortext h1{font-size:1em}p.hh-404-text{width:100%;line-height:2em}.hh-404-errortext h2{font-size:12em}}
@media(max-width:480px){.hh-404-nav{float:none;text-align:center}.hh-404-nav{margin-top:1.5em}.hh-404-nav ul li a{font-size:0.9em}.hh-404-nav ul li{margin:0 1em}.hh-404-errortext h1{font-size:0.9em}.hh-404-search input[type="text"],.hh-404-search input[type="submit"]{font-size:0.9em}}
@media(max-width:414px){.hh-404-errortext h2{font-size:9em}.hh-404-errortext{padding-top:2em}.hh-404-search input[type="text"]{width:80%;margin-bottom:1em}}
@media(max-width:384px){.hh-404-search input[type="text"]{width:85%}.hh-404-search input[type="submit"]{margin:0 0 0 0;padding:.7em 2em}.hh-404-row{width:87%}.hh-404-errortext{padding-top:4em}.hh-404-errortext h2{letter-spacing:10px}}
@media(max-width:320px){.hh-404-nav ul li a{font-size:0.85em}.hh-404-nav ul li{margin:0 0.6em}p.hh-404-text{margin:0.8em auto}.hh-404-nav{margin-top:1em}.hh-404-search input[type="submit"]{padding:.6em 2em}.hh-404-errortext h2{font-size:7em}}
/*]]>*/
</style>

<div class='hh-404-main'>
    <div class='hh-404-row'>
        <div class='hh-404-errortext'>
            <h2>4<span>0</span>4</h2>
            <h1>Sorry ! The page you were looking for could not be found </h1>
            <p class='hh-404-text'>You have been clicked on a link that can not be found. Please check the url or go to <a href='/'>main page</a> or try to search something here</p>
            <div class='hh-404-search'>
              <form action='/search'>
                    <input id='search' name='q' placeholder='Type to search...' required='' type='text'/>
                    <input type='submit' value='Search'/>
                </form>
            </div>
            <div class='hh-404-nav'>
                <ul>
                    <li><a href='/'>Home</a></li>
                    <li><a href='/p/about.html'>About</a></li>
                    <li><a href='/p/contact.html'>Contact</a></li>
                    <li><a href='/p/sitemap.html'>Sitemap</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</b:if>

Tùy chỉnh

• Action của form được mặc định là /search (chức năng tìm kiếm query của blog), nếu bạn dùng google tìm kiếm tùy chỉnh có thể sửa (ví dụ <form action='/p/search.html'>)
• Bạn tự fix id hoặc class trùng để tránh xung đột css
• Có thể thẻ h1, h2 sẽ bị ảnh hưởng bởi template của bạn, nếu bị ảnh hưởng bạn tự căn chỉnh cho hợp lý

Ok, vậy thôi thủ thuật rất đơn giản, không dùng tới js nên không xoắn mấy

Để lại bình luận nếu bạn gặp khó khăn nhé ! Good Luck