Xin chào các bạn mình đã quay lại rồi đây đã lâu rồi mình không đăng bài thì hôm nay mình xin chia sẻ chút thủ thuật nhỏ, tạo trang báo lỗi 404 giống Twitter cực ngầu.
 |
| Tạo Trang Báo Lỗi 404 Giống Twitter |
<body><b:if cond='data:blog.pageType == "error_page"'>Lưu HTML và xem kết quả.
<style>
body {overflow:hidden!important}
#fb-error-page{position:relative;display:table;width:100%;height:100vh;margin:0!important;padding:0!important;z-index:999;background:#1DA1F3;}
.fb-error-page_content{position:relative;z-index:3}
.intro_label h2{font-size:40px;font-weight:500;color:#fff;font-family:"Roboto",sans-serif;}
.intro_label p{font-size: 16px; font-weight: 400; color: #f3f3f3; margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:2}
.btn-error-page {color: #fff!important; display: inline-block; margin: 1.5em 3px; font-size: 14px; font-weight: 500;}
.btn-error-page:after{content:'\f111';font-family:fontawesome;color:#fff!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:#fff!important}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
.intro_label img{position: inherit;display: table;margin-left: 40%;}
.intro_label a:hover{color:#fff;text-decoration:underline;}
</style>
<div id='fb-error-page'>
<div class='meta_'>
<div class='fb-error-page_content'>
<div class='intro_label'>
<h2 class='_title'>Rất tiếc, trang đó không tồn tại!</h2>
<p>
<span style='color: white;'>Bạn có thể</span> <a href='https://www.nguyenngocquidz.tk/' rel='nofollow' target='_blank'><span style='color: white;'>tìm kiếm trên Nguyễn Ngọc Quí Đz</span></a> <span style='color: white;'>bằng cách sử dụng ô tìm kiếm bên dưới hoặc</span><a href='https://www.nguyenngocquidz.tk/' rel='nofollow' target='_blank'> <span style='color: #f9f9f9;'>quay lại trang chủ.</span></a>
</p>
<br/>
<style>
#abt-search-btn {
background: none repeat scroll 0 0 #359BED;
border: 0 none;
border-radius: 0 0 0 0;
color: #FFFFFF;
font-weight: 700;
padding: 10px 20px;
}
#abt-search-box {
border: 1px solid #d2d2d2;
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
width: 186px;
}
</style>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='abt-search-box' name='q' placeholder='Nhập chữ có dấu...' size='40' type='text'/>
<input id='abt-search-btn' type='submit' value='Tìm kiếm'/>
</form>
<br/>
<a class='btn-error-page' href='#go_back' onclick='goBack()' title='Quay lại trang trước'>Quay lại trang trước</a><a class='btn-error-page' href='/' title='Đi tới Bảng tin'>Đi tới Bảng tin</a><a class='btn-error-page' href='/lienhe' title='Truy cập Trung tâm trợ giúp của chúng tôi'>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>
