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).

Hướng dẫn tạo trang 404 hiển thị đầy đủ cho Blogger

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 != &quot;error_page&quot;'>
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 == &quot;error_page&quot;'>
        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 != &quot;error_page&quot;'> 
        THÀNH PHẦN CỦA WEBSITE
</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        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


Hướng dẫn tạo trang 404 hiển thị đầy đủ cho Blogger

<style type="text/css" >
body {background:white url('http://1.bp.blogspot.com/-_nW7TmIkEWw/T3SZ9EjpeLI/AAAAAAAADcw/jhYv2i9hE30/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


Hướng dẫn tạo trang 404 hiển thị đầy đủ cho Blogger
Ả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://kslzone.blogspot.com/">Trang Chủ</a></p>
    </div>
</div>
thay kslzone.blogspot.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.

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.

4 bình luận

  1. avatar says

    lúc 22:38 7 tháng 7, 2015

    Lâu lắm rồi mới có thời gian làm thủ thuật này, cám ơn em nhé.

    Demo Trang 404 Trên iZdesigner

  2. avatar says

    lúc 09:28 8 tháng 7, 2015

    Quá đẹp anh :D

  3. avatar says

    lúc 09:32 8 tháng 7, 2015

    Kết hợp với thủ thuật sử dụng google drive làm hosting của em đấy. Tuyệt vời ông mặt trời. Ai mà ngờ được toàn bộ Code hiển thị trang 404 của anh lại nằm ở đây:
    https://7b7a02a5323f1aa9a4b5feb3d60ea20f5def3dce.googledrive.com/host/0B2l0BaezKpPXfkFXVnNlNkhoemFKRk1nelhBdVk0am16bkF6LUJPdG9ZUnR0WjFXa2tGUm8/

  4. avatar says

    lúc 12:22 18 tháng 6, 2016

    ch làm này rất hay ạ, cảm ơn bạn chia sẻ

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.