Header Ads Widget

Ticker

6/recent/ticker-posts

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

GroupMMO tháng 12 07, 2023

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.

Tạo trang báo lỗi 404 chuyên nghiệp cho Blogspot
Tạo trang báo lỗi 404 chuyên nghiệp cho Blogspot.

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.

(getButton) #text=(Xem Demo) #icon=(link)

Các bước thực hiện

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>

<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>Rất tiếc ! Không thể tìm thấy trang bạn đang tìm kiếm </h1>
            <p class='hh-404-text'>Bạn đã nhấp vào một liên kết không thể tìm thấy. Vui lòng kiểm tra url hoặc vào <a href='/'>trang chính</a> hoặc thử tìm kiếm thứ gì đó ở đây</p>
            <div class='hh-404-search'>
              <form action='/search'>
                    <input id='search' name='q' placeholder='Nhập để tìm kiếm...' 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ý
  • Lưu ý là làm đúng theo các bước nhé!

Lời kết

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 !

Tags:

Đăng nhận xét