Tùy chỉnh trang báo lỗi không tìm thấy 404 theo ý mình trong Blogspot

Traidatmui.com – Thông thường khi bạn truy cập vào 1 đường link nào đó trên blogspot mà đường dẫn đó sai hay không tồn tại trong blog của bạn, bạn sẽ nhận được thông báo lỗi từ blog hay còn gọi là lỗi 404. Trong giao diện mới của blogger đã cung cấp cho bạn thêm tính năng tùy chỉnh cho dòng thông báo này thay cho dòng thông báo mặc định của blogspot. Và bài viết hôm nay mình chia sẻ cùng các bạn cách để có thể tùy chỉnh và tạo trang thông báo lỗi 404 cho blogger của mình hoàn toàn theo ý tưởng của mình. Với tùy chỉnh này thì bạn có thể tự thiết kế cho mình trang thông báo lỗi không tìm thấy này thật đẹp và mang phong cách riêng của mình.

Hình ảnh thông báo mặc định

Hình ảnh thông báo sau khi tùy chỉnh

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ </head>

<style><b:if cond='data:blog.pageType == &quot;error_page&quot;'>
.erropage {box-shadow:0 0 150px #ddd inset;text-shadow:0 1px #fff;padding:0px 10px 20px 10px;text-align:center;font-size:14px;border:1px solid #f25d03;border-radius:8px;}
.erropage h2{background:url(https://lh3.googleusercontent.com/-4K6DDwFg8Mc/US4O2wAlqBI/AAAAAAAAARQ/vFVQfokdKAE/s130/ErrorIcon.png) no-repeat 0 5px;text-align:right;margin:0 150px 0 0px;padding:20px 0 0 0;line-height:0.9;color:#f25d03;font-size:22px;}
.erropage h2 .num{margin:0px;padding:0;font-size:100px;}</b:if>
</style>

5. Tùy chỉnh thông báo 404

Đó mới chỉ là chèn css để hình thành khung thông báo lỗi, bây giờ là việc bạn vào tùy chỉnh nội dung thông báo lỗi khi không tìm thấy trang

5.1 Bạn vào phần cài đặt (Settings)
5.2 Click vào mục "Tùy chọn tìm kiếm" (Search preferences)
5.3 Tiếp theo bạn chèn code bên dưới vào ô "Lỗi và chuyển hướng" (Errors and redirections)

<div class="erropage">
<h2><div class="num">404</div>ERROR</h2>
<br/>Thật xin lỗi trang bạn đang tìm không tồn tại trên webblog.<br/>

Bạn vui lòng click <a href="http://sauciu.blogspot.com">vào đây</a> để trở lại trang chủ</div>

Bạn có thể thao khảo hình ảnh minh họa bên dưới

Ở đây mình chỉ hướng dẫn các bạn các bước để tùy chỉnh và ở trên là code trang 404 mà mình tạo theo ý tưởng của mình. Bạn hoàn toàn có thể thêm các class, nội dung và tùy chỉnh lại css để có 1 trang 404 cho riêng blog của mình.

Chúc bạn thành công!