Hướng dẫn tạo trang 404 hiển thị đầy đủ cho Blogger
Hiện tại thì có rất rất nhiều hướng dẫn về cách tạo một trang 404 hiển thị đầy đủ không bao gồm các thành phần khác của blog cho Blogger trên mạng, nhưng mình cảm thấy tất cả những thủ thuật trên đều tương tự lấy của nhau và đặc biệt là không hợp thời nữa (chỉ sử dụng CSS thì khá mất công mần cho những người không biết).
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"'>
</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/AVvXsEiH8V2Q2i_E2REZm_JML34M2Bfa_7nNlMCAigZGuwDg8pp3h3Ik6ObBedcHPKr5VKPsTMSImZZ2XqLebjyE5KIPe2QLLYwjafqD-pBlFu4Qcx5wag0ZtTq2rreEFEwoISVDjTTFjSth0Jk/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 tổng hợp nhiều hình ảnh về trang 404 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
<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.kslzone.net/">Trang Chủ</a></p>
</div>
</div>
thay www.kslzone.net 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.
Lời kết
Đã kết thúc phần hướng dẫn của mình, nếu bạn làm đúng như hướng dẫn của mình thì thông thường nó hoạt động tốt ở mọi template đặc biệt sẽ không phá vỡ các thành phần khác của blog. Mọi thắc mắc và đóng góp ý kiến bạn có thể để lại tại phần nhận xét ở dưới, mình sẽ thu nhận và giải đáp cho các bạn.
"nguồn bài viết từ KslZone.NET".
0 nhận xét:
Đăng nhận xét