Tạo trang báo lỗi Error 404 đẹp cho Blogger/Blogspot

Khi bạn truy cập vào một địa chỉ, một đường dẫn của một website hay một blog nào đó mà đường dẫn đó không còn tồn tại hoặc đả bị xóa thì bạn sẽ được đưa đến trang thông báo lỗi 404 Page Not Found, nó nhằm thông tin cho bạn rằng địa chỉ mà bạn đang truy cập hiện không còn tồn tại hoặc đả bị tác giả xóa. Nay xin chia sẽ cho bạn một giao diện thông báo lỗi 404 đơn giản và đẹp mắt cho blog khi bạn sử dụng blogspot

Huong dan tao trong bao loi 404 Page Not Found cho Blogger/Blogspot

Xem thêm: Blogger 404 Redirection - Chuyển hướng trang báo lỗi 404 cho Blogger

Nếu bạn thích giao diện thông báo lỗi 404 như trên, bạn có thể cài đặt nó cho blogspot của bạn bằng cách dưới đây.

Xem Demo

- Có nhiều cách để tạo trang thông báo lỗi cho Blogspot, ở đây ta sử dụng biểu thức điều kiện trong blogspot để tạo, nó có cấu trúc đơn giản như sau:

<body>
   <b:if cond='data:blog.pageType != "error_page"'>
      //Thành phần chính Blog của bạn
   </b:if>
   <b:if cond='data:blog.pageType == "error_page"'>
      //Nội dung thông báo lỗi 404 của bạn
   </b:if>
</body>

Xem thêm: Hướng dẫn cách sử dụng Biểu thức điều kiện if- else trong Blogspot

- Bước 1: Chèn đoạn css dưới đây vào template của bạn bằng cách vào Mẫu >> Chỉnh sửa HTML và chèn nó sau </b:skin>

<b:if cond='data:blog.pageType == "error_page"'>
#error-page{background-color:#142D3A;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-inner{margin:11% auto}
.box-404{position:relative;font-weight:bold;width:700px;height:210px;color:#fff;margin:0 auto;}
#error-inner h2{text-transform:uppercase;color:#fff;font-size:50px;margin:0 auto 20px;font-family:monospace;background-color:#34647E;margin:5px}
#error-inner h1{text-transform:uppercase;color:#FFB616;padding-top:10px}
#error-inner p{line-height:0.7em;font-size:15px;color:#999}
#social-icons li{float:left;width:147px;height:147px;margin:10px 6px 6px 0;padding:0 0 0 0;border-bottom:none;list-style:none}
#social-icons li a{line-height:1px;display:block}
#social-icons li a:hover img{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8}
#social-icons li a span{display:none!important}
</b:if>

- Bước 2: Sao chép mã dưới đây và đặt nó ngay dưới <body>

<b:if cond='data:blog.pageType != "error_page"'>

- Bước 3: Cuối cùng, copy đoạn HTML dưới đây và đặt nó trước thẻ đóng </body>

</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<h2>404: KHÔNG TÌM THẤY TRANG</h2>
<h1>RẤT TIẾT, TRANG KHÔNG TÌM THẤY</h1>
<p>Trang bạn đang tìm không tồn tại, hoặc có thể đả bị xóa<br/><br/> Quay lại trang chủ <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> hoặc liên hệ với tôi <a href="http://nhatchanh.info/p/contact-me.html" title="Liên hệ với tôi"><span style="color: blue;">tại đây</span></a></p>
<div class='box-404'>
<ul id='social-icons'>
<li class='rss-icon'><a href='http://feeds.feedburner.com/nhatchanh' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCKcydxlYKhswfHdaTtHrWyeiAdNa-_JtrFCRtrpbD7rTvKQOl-y3rIRmABzCh2PJE2PPf-tvJrq4C9v22XNk5jyre-qkEdrIHq_fMvwuF7nQ057afgeyMqn5Y59EMR91UKDNrFAI7_aXY/s1600/rss.png' width='147'/></a></li>
<li class='twitter-icon'><a href='http://www.twitter.com/tv0656m006' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hFy9kbq-sOAGnDuUV3xRYbvYIgRR52bWqg3fTBjUYoYGq0mKV40MHiL7Jv9n7tkmt2qnHqO_6Y_oUHw5whYikTct7aO_6IpMeUStX__udKezYPgr-Y01tXaUj8sOTYfsb7ygKg7LipOa/s1600/twitter.png' width='147'/></a></li>
<li class='facebook-icon'><a href='http://www.facebook.com/pnchanh' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzHLWAQxZRH-XnBkiVZGkuo-PG65aiVnbJfqqs4acX9mTvDKtTXhRda_fD681MKdtZ56Un2jLfY5Zi6H6nIc7VhQpnbOQzgZj-AtXjN-vf9Qp3q50a8zVSsSjc59hl-UCkMwUfzRUnvjMd/s1600/facebook.png' width='147'/></a></li>
<li class='google-icon'><a href='https://plus.google.com/113291429631989826321' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQ9RnrqORuZCO693Q6cFhD2vzYIc4cbgqoBXYW6eB-CBkTX7bb-6IELF3HHhShNaZdJY4DnYii5uD9CgXlWnEN7a5x00db2pJTqqEp5jZrTIMnje6VzNM1wUAboih7tQ0xWh9rRdO4BSy/s1600/google.png' width='147'/></a></li>
</ul>
</div>
</div></div>
</b:if>

- Bước 4: Là bước khó khăn và quan trọng nhất là Lưu lại và kiểm tra kết quả :D Chúc thành công!

Kiểm tra kết quả bằng cách gõ vào thanh địa chỉ một đường dẫn không đúng
VD: http://địa-chỉ-blog-của-bạn/abcdefghizklmn và nếu xuất hiện trang báo lỗi 404 là bạn thành công

Subscribe by:	RSS	Email
Follow me on:	Google+	Facebook	Twitter

Tạo trang báo lỗi Error 404 đẹp cho Blogger/Blogspot

5 comments:

Bài viết mới nhất

Có thể bạn thích