Hướng dẫn tạo trang 404 thân thiện cho blogspot

Hướng dẫn tạo trang 404 thân thiện cho blogspot

Nếu các bạn đã đọc bài viết 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

Trang báo lỗi 404 nếu thân thiện 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 bài viết 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 mình viết 100% mà là rip từ một site ở nước ngoài khi mình vô tình vô trang 404 của họ.

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

<b:if cond='data:blog.pageType == "error_page"'><div id='error-page'><div id='error-404'><div class='box-404'>404</div><h1>Trang bạn tìm kiếm không tồn tại</h1><p>Có thể URL bị hỏng hoặc đã bị quản trị 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 gocblog.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 hoàn thành xong hãy lưu mẫu và kiểm tra xem đã thành công hay chưa bằng cách truy cập vào đường dẫn tầm bậy trong blog của bạn để kiểm tra.

Hy vọng bài viết hướng dẫn tạo trang 404 đẹp cho blogspot có ích cho bạn.

Unknown

Add Comment

Thủ-Thuật-Blogger

Wednesday, December 24, 2014

About Admin

Mang thế giới Template Blogger đến với bạn 1 cách hoàn thiện nhất. Chúng tôi chuyên sưu tầm template blogspot trên nguồn internet

Code Popup quảng cáo cho blogspot Code Popup quảng cáo cho blogspot Các bạn Sửa link http://gocbloc.blogspot.com/ thành đườ
Hướng dẫn tạo Tab comment Facebook, Google +1 , Dispus cho Blogspot Hướng dẫn tạo Tab comment Facebook, Google +1 , Dispus cho Blogspot Chắc hẳn các bạn xẽ hỏi
Tạo Biểu Mẫu Liên Hệ Cho Blogspot Tạo Biểu Mẫu Liên Hệ Cho Blogspot Để thực hiện thủ thuật Biểu mẫu liên hệ / Contact For
Tạo Hộp Đăng Kí Nhận Tin Mới Cho Blogsot Tạo Hộp Đăng Kí Nhận Tin Mới Cho Blogsot Tạo hộp Theo dõi qua Email / Follow by Email

About Admin

Related Posts