TẠO TRANG BÁO LỖI 404 GIỐNG FACEBOOK TUYỆT ĐẸP CHO BLOGSPOT

Xin chào các bạn , chào mừng các bạn đã quay trở lại Star Dũng Blog.Theo yêu cầu của các bạn hôm nay mình sẽ đăng bài mới. 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 GIỐNG FACEBOOK TUYỆT ĐẸP CHO BLOGSPOT . okkk





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ở đó.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
body {overflow:hidden!important}
  .back-top,.back-home,.back-bottom{display:none}
#fb-error-page{position:relative;display:table;width:100%;height:100vh;margin:0!important;padding:0!important;z-index:999;background:#fff;}
.fb-error-page_content{position:relative;z-index:3}
.intro_label h2{font-size:45px;font-weight:700;color:#000;margin:0 0 .5em;padding:0;font-family:&quot;Roboto&quot;,sans-serif;}
.intro_label p{font-size: 16px; font-weight: 400; color: #000; margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.btn-error-page {color: #365899!important; display: inline-block; margin: 1.5em 3px; font-size: 14px; font-weight: 500;}
.btn-error-page:after{content:&#39;\f111&#39;;font-family:fontawesome;color:#365899!important;font-size:3px;vertical-align: middle;margin-left: 5px;}
.btn-error-page:last-child:after{display:none!important}
.btn-error-page:hover {text-decoration:underline!important;color:#365899!important}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
</style>
<div id='fb-error-page'>
<div class='meta_'>
<div class='fb-error-page_content'>
<div class='intro_label'>
<h2 class='_title'>Trang này không khả dụng</h2>
  <p>Liên kết bạn truy cập có thể bị hỏng hoặc trang có thể đã bị xóa.</p><br/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMINZDvQuFZVIWS_YZK_Ti0FSsCgbM1Xvly3isrLkstN9bEvMOTB3iyvEmrdb_26TiXOaw5au60Azxra-69DWcWDFvlayEYyb062kTnCQOD68sCh7BrivJxSVw_0oaQhawXCaTlSI4uZUr/s1600/UmVRFlQVwwy.png' style='position: inherit;display: table;margin-left: 40%;'/>
<a class='btn-error-page' href='#go_back' onclick='goBack()'>Quay lại trang trước</a><a class='btn-error-page' href='/'>Đi tới Bảng tin</a><a class='btn-error-page' href='/p/lienhe.html'>Truy cập Trung tâm trợ giúp của chúng tôi</a>
</div>
</div></div>
</div>
<script> function goBack() { window.history.back(); } </script>
</b:if>
Code
Thay /p/lienhe.html Thành địa chỉ liên hệ của bạn
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.
Code by: Phú Cường Blogger 

0 bình luận

Mã Hóa Code