Tạo trang báo lỗi 404 chuyên nghiệp cho blogspot - p2

Trước kia mình có viết một bài là Tạo trang báo lỗi 404 Page Not Found chuyên nghiệp. Thì hôm nay lại tiếp tục hướng dẫn làm thêm một mẫu mới hấp dẫn hơn.

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 mình sẽ hướng dẫn các bạn tạo 1 trang báo lỗi 404 đẹp và chuyên nghiệp.

Live Preview

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 == "error_page"'> 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>

<b:else/>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&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 !