technology

business

Cách tạo trang báo lỗi 404 giống Twitter cực ngầu

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.

Cách tạo trang báo lỗi 404 giống Twitter cực ngầu
Cách 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
Bước 1: Chèn đoạn code bên dưới sau thẻ <body>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<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:&quot;Roboto&quot;,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:&#39;\f111&#39;;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>
Lưu HTML và xem kết quả.
Post A Comment
  • Blogger Comment using Blogger
  • Facebook Comment using Facebook
  • Disqus Comment using Disqus

18 nhận xét :

  1. Bác Quí bỏ cái link rút gọn chỗ liên kết tui đi

    Trả lờiXóa
  2. Tương tác nhé <3

    Trả lờiXóa
  3. đã quay lại rồi à, bài viết hữu ích lắm !

    Trả lờiXóa
  4. Trả lời
    1. Đúng rồi :( Blogger bị gì á vô Template là đứng đơ tab

      Xóa


three columns

cars

grids

health