Trước đây mình cũng có hướng dẫn một thủ thuật tạo trang 404, và như mình đã nói nó sử dụng css để bỏ vào phần cài đặt mặc định của Blogger là nhiều. Do đó hôm nay mình xin được mạn phép hướng dẫn lại các bạn thủ thuật tạo một trang 404 hiển thị đầy đủ cho các bạn.
Hướng dẫn tạo trang 404 hiển thị đầy đủ cho Blogger
Đối với phần hướng dẫn tạo trang 404 này, mình sẽ không sử dụng phần cài đặt mặc định của Blogger nữa mà chúng ta sẽ đi thẳng vào chỉnh sửa cấu trúc template của chúng.Như chúng ta đã biết thì mọi thành phần dùng để hiển thị một website lúc nào cũng nằm trong cặp thẻ sau
<body> THÀNH PHẦN CỦA WEBSITE </body>lợi dụng điểm này và thẻ điều kiện của Blogger mình đã nảy ra ý tưởng tốt hơn về cách tạo ra một trang 404 đầy đủ.
Đầu tiên bạn chèn đoạn mã sau vào sau thẻ <body>
<b:if cond='data:blog.pageType != "error_page"'>tiếp đến bạn chèn đoạn mã sau vào lên trên thẻ </body>
</b:if> <b:if cond='data:blog.pageType == "error_page"'> NỘI DUNG TRANG 404 </div> </b:if>sau khi hoàn thành thì template của chúng ta sẽ có dạng như sau
<body> <b:if cond='data:blog.pageType != "error_page"'> THÀNH PHẦN CỦA WEBSITE </b:if> <b:if cond='data:blog.pageType == "error_page"'> NỘI DUNG TRANG 404 </b:if> </body>Chắc các bạn nhìn qua cũng hiểu, những thành phần của blog sẽ không xuất hiện khi gặp trang 404 thay vào đó sẽ là đoạn mã mặc định cho trang của chúng ta.
Bạn có thể thay thế NỘI DUNG TRANG 404 bằng đoạn mã trang trí cho trang 404 mặc định của bạn hoặc sử dụng một trong 2 đoạn mã ví dụ sau đây của mình.
Sử dụng CSS hiển thị body bằng hình ảnh
<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMh2TUGNtP-kspWYxl195s63O45PJQRuLiCG1sMZbu3GfdJSAXNl5RSzNj26zJwRdRaDcVwtt-myMu4h-U5EisTAFEwILPdhzGHWsW0LJ5XKEqUGokn9hhdR2Z-lJAWM2z49raf21V7Q/s1600/1.PNG') no-repeat fixed center !important;}
</style>
bạn có thể thay link ảnh khác, hiện tại có cả ngàn bức hình trang 404 trên mạng bạn có thể down về xài, mình sẽ có bài viết thống kê một vài hình ảnh cho các bạn lựa chọn.Sử dụng vừa CSS vừa HTML tạo trang 404 chuyên nghiệp hơn
 |
| Ảnh minh họa |
<style>
#error-page {
background-color:#e9e9e9;
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
#error-inner {
margin:11% auto;
}
#error-inner .box-404 {
width:200px;
height:200px;
background:#21afa4;
color:#fff;
font-size:80px;
line-height:200px;
border-radius:10px;
margin:0 auto 50px;
position:relative;
}
#error-inner .box-404::after {
content:" ";
width:0;
height:0;
bottom:-8px;
border-color:#21afa4 transparent transparent;
border-style:solid;
border-width:9px 9px 0;
position:absolute;
left:47%;
}
#error-inner h1 {
text-transform:uppercase;
}
#error-inner p {
line-height:0.7em;
font-size:15px;
}
</style>
<div id="error-page">
<div id="error-inner">
<div class="box-404">404</div>
<h1>KHÔNG TÌM THẤY TRANG</h1>
<p>Trang có thể đã bị xóa hoặc địa chỉ url không đúng.</p>
<p>Trở về <a href="http://www.vnnmath.com">Trang Chủ</a></p>
</div>
</div>
thay www.vnnmath.com bằng địa chỉ blog của bạn. Ngoài ra bạn cũng có thể sử dụng đoạn mã ở hướng dẫn tạo trang 404 trước của mình.
No comments:
Post a Comment