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, 404 page not found blogspot, error 404 blogger. Thiết kế trang báo lỗi cho blogspot.

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.

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 == "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&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 !

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

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

Tùy chỉnh

Lời kết

Anh Trai Nắng

Đăng nhận xét

Share template blogspot chuẩn SEO được Google yêu thích

LIÊN KẾT

CHUYÊN MỤC

Search

BÌNH LUẬN

Most Recent

SeoPro Blogger Template Premium bản mua share miễn phí

Chia sẻ Feeds Blogger Template tổng hợp Blogspot

Liên Kết Bạn Bè cùng Anh Trai Nắng Blogger

Made with Love by

#buttons=(Thanks!) #days=(7)

Contact form

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Chèn hình ảnh

Định dạng chữ

Chèn một đoạn Code

Khác