Hướng dẫn tạo trang 404 thân thương cho blogger/blogspot

Nếu bạn đã đọc post các thẻ điều kiện if else trong blogspot rồi thì có thể áp dụng kiến thức ấy và một số kiến thức về html và css để tạo ra trang báo lỗi 404 full tùy biến cho mình.

Tạo trang báo lỗi 404 full width cho blogspot

Trang báo lỗi 404 nếu thân mật sẻ tạo đc cảm dễ chịu cho độc giả khi họ vào một trang nào đó bị lỗi. Với post này chỉ áp dụng thẻ điều kiện với trang 404 và một số kiến thức về html và css.

Code bài này không phải tôi viết 100% mà là rip từ một trang website ở nước ngoài khi tôi vô tình vô trang 404 của họ :3

Để tạo trang báo lỗi 404 bạn vào chỉnh fix HTML và thêm đoạn code sau đây vào trước thẻ đóng </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-404'>
<div class='box-404'>404</div>
<h1>Trang bạn search không tồn tại</h1>
<p>Có thể URL bị hỏng hoặc đã bị quản lý viên blog xóa bỏ</p>
<p>Trở về trang chủ <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
</div>
</div>
</b:if>

Tiếp theo bạn thêm css sau vào trước thẻ đóng </style> hoặc

/* Error 404 Rip By isharevietnam.blogspot.com*/
#error-page{background-color:#e9e9e9;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}#error-404{margin:11% auto}#error-404 .box-404{width:200px;height:200px;background:#21afa4;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative}#error-404 .box-404::after{content:"width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%}#error-404 h1{text-transform:uppercase}#error-404 p{line-height:1.7em;font-size:15px;font-family:arial}

Nếu ngừng xong hãy lưu mẫu và kiểm tra xem đã thành tích hay chưa bằng cách truy vấn vào url tầm bậy trong blog của bạn để kiểm tra.

Hy vọng post hướng dẫn tạo trang 404 đẹp cho blogger/blogspot hữu ích cho bạn.

Share!Tweet

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

Nội dung chính