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

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  trang 404
<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.tinhocvietnam.net/">Trang Chủ</a></p>
    </div>
</div>
thay www.tinhocvietnam.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.

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


1 comments:

  1. I dispatched your articles links to all my contacts and they all mate it including me. premium wordpress themes

    ReplyDelete

All the comments on the website Vietnam Informatics will be moderated before being published on the blog. Note: If you leave backlink to your website, as long as accompanied by comments of Management commented that it will be accepted. If you want to display HTML code, you need to convert before using the tool below.


- You are free to comment with your own words if that is your personality
- All your comments are not controlled and will be posted immediately.
- Post by the blog's author wrote this yourself, you are free to copy without due acknowledgment; blog posts by the collector, you specify the source as blogs were recorded.
- We are not responsible for your comment ...

Everyone commented on Vietnam Informatics website will be moderated before being published on the blog. Note: If you leave a backlink to your website, as long as accompanied by appropriate comments, the comments will still be accepted. If you want to display HTML code, you need to convert before using the tool below.

 
Top