Tạo trang báo lỗi 404 bằng CSS tuyệt đẹp và chuyên nghiệp cho Blogspot
Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với blog Bác Sĩ Windows.
Theo yêu cầu của một bạn gửi đến BSW muốn mình chia sẻ trang báo lỗi mà hiện tại mình đang sử dụng trên blog này (click xem demo), đây là một style trang báo lỗi đẹp và đơn giản do mình thiết kế riêng cho Blogspot và chỉ sử dụng CSS & HTML nên sẽ không làm ảnh hưởng nhiều đến tốc độ tải trang cũng như không bị xung đột code.
Chỉ vài phút nghịch CSS mình đã cho ra một kiểu trang báo lỗi mới với phong cách vô cùng hiện đại và 'quý tộc' hahaa nói quá cho vui, mà mình thấy cũng khá đẹp!
Thôi không linh tinh luyên thuyên nữa, bắt đầu!
Bước 2. Tìm thẻ
Copy code sau và dán vào sau thẻ mở đó.
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.
Theo yêu cầu của một bạn gửi đến BSW muốn mình chia sẻ trang báo lỗi mà hiện tại mình đang sử dụng trên blog này (click xem demo), đây là một style trang báo lỗi đẹp và đơn giản do mình thiết kế riêng cho Blogspot và chỉ sử dụng CSS & HTML nên sẽ không làm ảnh hưởng nhiều đến tốc độ tải trang cũng như không bị xung đột code.
Chỉ vài phút nghịch CSS mình đã cho ra một kiểu trang báo lỗi mới với phong cách vô cùng hiện đại và 'quý tộc' hahaa nói quá cho vui, mà mình thấy cũng khá đẹp!
Thôi không linh tinh luyên thuyên nữa, bắt đầu!
Các bước thực hiện
Bước 1. Truy cập vào giao diện chỉnh sửa HTML của Blogspot.Bước 2. Tìm thẻ
<body> hoặc <bodyCopy code sau và dán vào sau thẻ mở đó.
<b:if cond='data:blog.pageType == "error_page"'>Bước 3. Lưu mẫu và... thưởng thức thôi!
<style>
body {overflow:hidden!important}
#error-page-bsw{position:relative;display:table;width:100%;height:100vh;margin:0!important;padding:0!important;z-index:999;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlqQkAyNEMDmSI4w3w4nB32JbAil1MfyVEsubJGlEhYN6MFg8A2zEA7nvhSAoItmbHQnk-JCpNJK6gVgevo_KO_VxyUKQU4Bl4cOMWXilCUhWgQOhfgVj9o036MhePT5rcTBv0QdcfQ9a/s1600/background_full_Intro_bacsiwindows-com.jpg) no-repeat center center!important;background-size:cover!important}
#error-page-bsw:before{content: ''; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#error-page-bsw:after{content:'';z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.error-page-bsw_content{position:relative;z-index:3}
.intro_label h2{font-size:45px;font-weight:700;color:rgba(255,255,255,.85);margin:0 0 .5em;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.btn-error-page {color: rgba(255,255,255,.5)!important; padding: 8px 25px; display: inline-block; margin: 1.5em .5em; border-radius: 50px; text-transform: uppercase; border: 1px solid rgba(255,255,255,.3); font-size: 14px; font-weight: 500;}
.btn-error-page:hover {background:rgba(255,255,255,.15)}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
</style>
<div id='error-page-bsw'>
<div class='meta_'>
<div class='error-page-bsw_content'>
<div class='intro_label'>
<h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/>404 - PAGE NOT FOUND<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p>Lỗi cmnr, sao bạn lạc trôi tới đây được vậy!?</p>
<a class='btn-error-page' href='/contact'>Liên hệ - báo lỗi</a><a class='btn-error-page' href='/'>Về trang chủ</a><a class='btn-error-page' href='#go_back' onclick='goBack()'>Quay lại trang trước</a>
</div>
</div></div>
</div>
<script> function goBack() { window.history.back(); } </script>
</b:if>
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é, nếu không thích hình ảnh hiện tại thì bạn có thể thay link ảnh màu đỏ thành link ảnh khác (nên chọn ảnh chất lượng cao để ảnh không bị vỡ). À yêu cầu blog phải có font Roboto, Roboto Condensed và Fone Awesome nữa nhé.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.
Join the conversation