TẠO TRANG BÁO LỖI 404 SẮC MÀU TUYỆT ĐẸP CHO BLOGSPOT

Cộng tác viên tháng 11 28, 2017 #Thủ Thuật #Thủ Thuật Blog

Xin chào các bạn , chào mừng các bạn đã quay trở lại Star Dũng Blog. Bài viết này mình sẽ hướng dẫn các bạn TẠO TRANG BÁO LỖI 404 SẮC MÀU TUYỆT ĐẸP CHO BLOGSPOT . Thôi không nói nhiều bắt đầu làm thôi!!!

Demo

CÁC BƯỚC THỰC HIỆN

B1. Truy cập vào giao diện chỉnh sửa HTML của Blogspot.
B2. Tìm thẻ <body> hoặc <body
Copy code sau và dán vào sau thẻ mở đó.

a<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-404'>
<div class='box-404'>404</div>
<span style='font-family:"Roboto", sans-serif; font-size:30px; color: #eee; font-weight:500;text-transform:uppercase'>Không tìm thấy trang mà bạn yêu cầu!</span>
<p style='font-size:20px'>Có thể bạn đã truy cập vào một URL bị hỏng hoặc trang đã bị xóa!</p>
<p><a onclick='history.back(-1)' style='cursor:pointer' title='Quay lại trang trước'><span class='back-to-home'><i class='fa fa-angle-left'/></span></a><a href='/' title='Trở về trang chủ'><span class='back-to-home'><i class='fa fa-home'/></span></a><a href='/lien-he'><span class='back-to-home'><i class='fa fa-comments-o'/> </span></a></p>
</div></div>
<style>::-webkit-scrollbar{display:none}#error-page{background-color:#069999;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;font-family:"Roboto",sans-serif;font-weight:normal;color:#fff;overflow:hidden;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}#error-404{margin:9% auto;overflow:hidden;width:50%;transition:.3s}#error-404 .box-404{color:#eee;font-size:250px;line-height:200px;margin:0 auto 40px;position:relative;font-weight:500}#error-404 h1{text-transform:uppercase;font-weight:400!important;color:#eee}#error-404 p{line-height:1.7em;font-size:18px;font-family:"Roboto",sans-serif;font-weight:400;color:#eee;margin:30px 0}.back-to-home{background:rgba(0,0,0,.05);padding:5px 40px;border-radius:20px;border:1px solid rgba(0,0,0,.07);transition:.3s;color:#fff;margin:0 10px}.back-to-home:hover{background:rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.1)}#error-page{animation:colorBackground 10s infinite;-webkit-animation:colorBackground 10s infinite;-moz-animatio</style>
</b:if>

Code

B3. Lưu mẫu và... thưởng thức thôi!

TỔNG KẾT

Trước khi áp dụng thủ thuật này bạn phải xóa hết các code của trang 404 cũ có trong blog nhé.

Chỉ 3 bước trên thôi chúng ta đã làm được trang báo lỗi 404 tuyệt đẹp rồi.

Nếu gặp lỗi trong quá trình thực hiện thì hãy bình luận bên dưới để được giúp đỡ nhé. Chúc các bạn thành công.

47 bình luận

Chia sẻ

HƯỚNG DẪN ĐĂNG BÀI VIẾT HOẶC CÂU HỎI LÊN BLOG

Xuống hàng

Chèn hình ảnh

Định dạng chữ

Chèn một đoạn Code

Hướng dẫn bình luận

Chèn link