Chủ Nhật, 26 tháng 10, 2014

Lỗi 404 Error là liên kết bị hỏng và trang đó không tồn tại trong blog của chúng ta. Theo mặc định của blogger thì chúng ta thấy một trang trống khi gặp lỗi 404 Error. Cho nên Hôm nay Hồng Designer giới thiệu các bạn thiết kế một trang 404 Error bằng CSS.
+ Các ưu điểm của 404 Error này :
  • Full chiều rộng
  • - Thêm link trang chủ (là một liên kết để độc giả có thể chuyển hướng, nếu như không tìm thấy bài cần tìm)

Các bước tiến hành như sau :

Đăng nhập vào blogger => Template => Chỉnh sửa HTML, Trong code template bạn bấm ctrl + F và tìm đến thẻ </body>. Thêm đoạn code sau trên thẻ </body>.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
#error-not-found {
background: #ff0000;
text-align:center;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
padding-top:270px;
z-index:999999;
}
#error-not-found h1 {
font-size:640px!important;
position:absolute;
font-family:impact,sans serif!important;
top:70px;
left:50%;
letter-spacing: -8px;
margin-left:-502px!important;
width:960px;
z-index:-2;
color:rgba(0,0,0,.09)!important;
}
#error-not-found h2 {
font-family:arial,sans-serif;
text-transform:uppercase;
font-size:51px;
line-height:66px!important;
letter-spacing: -3px;
color:#fff!important;
margin:0!important;
padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
font-family:arial,sans-serif;
text-transform:uppercase;
font-size:56px;
line-height:40px!important;
border:none;
font-weight: bold;
color:rgba(0,0,0,.5)!important;
margin:0!important;
padding:0!important;
text-decoration:none!important;
}
</style>
<div id='error-not-found'>
<h1>404</h1> <h2>
Rất tiếc ....Điều bạn đang muốn tìm </h2>
<h2>
Không thể tìm thấy</h2><br/>
<p> <a href='/' title='
Ishare 247 Blog'>Về lại trang chủ</a></p>
</div>
</b:if>  
    
 Lưu template lại và kiểm ta thành quả. Chúc các bạn thành công. 

0 nhận xét:

Đăng nhận xét