Thay thế trang 404 mặc định của Blogger

Lỗi 404 là lỗi thường gặp nhất ở mọi blog và website, lỗi này thường xảy ra khi người dùng truy cập vào một trang nào đó những trang đó đã bị xóa mất hoặc tạm thời bị lỗi từ máy chủ nên không thể hiển thị được. Chính vì lỗi này khá là phổ biến nên, mình nghĩ việc trang trí lại trang 404 mắc định của Blogger là điều nên làm, để dù cho khách truy cập gặp lỗi này, họ vẫn cảm thấy hài lòng hơn.


Chính vì thế mình tạo ra bài viết này để hướng dẫn các bạn làm thế nào để thay đổi trang 404 mặc định của Blogger, và chia sẻ giao diện trang 404 hiện tại mà Blogger mình đang sử dụng.

Hướng dẫn tạo tạo trang lỗi 404 cho Blogger

Hiện tại có rất nhiều hướng dẫn về cách làm một trang 404 cho Blogger trên mạng, nhưng mình cảm thấy một số hướng dẫn hơi dư vì loại bỏ khá nhiều trong template từ đó phải chèn thêm các đoạn mã không cần thiết vào template mặc định. Đây là hướng dẫn sơ lược lại của mình, để bạn có thể làm trang 404 tương tự như của mình, hầu hết hoạt động tốt với mọi Blogger template.

• http://kslzone.blogspot.com/404

Thực chất Blogger đã cung cấp cho chúng ta một tùy chỉnh thay thế trang 404 mặc định, bạn chỉ cần vào trang tổng quang của blog mà bạn muốn thay thế trang 404 mặc định, Cài đặt » Tùy chọn tìm kiếm

Tại phần Lỗi và chuyển hướng » Không tìm thấy trang tùy chỉnh » Nhấn vào chỉnh sửa rồi sử dụng html và css để tạo ra một trang 404 riêng cho mình.

Đây là đoạn mã mà mình sử dụng để làm ra trang 404 của KslZone.NET

<!-- Start - Error 404 Page -->
<style type='text/css'>
/* =============================
Error Page
============================= */
#iSearch {display: none;}
#errorpage {  width:400px;  text-align:center;  margin:20px auto;  text-transform:uppercase;}
#errorpage h1 {color: white;text-shadow: 0 0 7px #A2A2A2;font:99px Tahoma;}
#errorpage h3 {  font:20px Tahoma;  color:#555;}
#errorpage p {  font:9px Arial;  margin-top:5px;  border-top:1px dashed #DDD;  padding-top:10px; }
#searching {line-height: 1.5em;  float:right;  padding:2px;  width:auto;  overflow:hidden;}
#search input[type="text"] {  border: 1px solid #DDD;  border-radius:3px;  color: #777;  width: 180px;  padding: 7px;  font:normal 10px Tahoma, Arial;  text-transform:uppercase;  -webkit-transition: all 0.5s ease 0s;  -moz-transition: all 0.5s ease 0s;  -o-transition: all 0.5s ease 0s;  transition: all 0.5s ease 0s;}
#search input[type="text"]:focus { width: 220px;}
#searching -errorpage {  margin:0;  padding:13px 0;  width:auto;  overflow:hidden;}
#search-errorpage input[type="text"] {  border: 1px solid #DDD;  border-radius:3px;  color: #777;  width: 180px;  padding: 7px;  font:normal 10px Tahoma, Arial;  text-transform:uppercase;}
#search-errorpage input[type="text"]:focus {  border: 1px solid #DDD;}
#tophead, #menu, #main-wrapper, #sidebar-wrapper, #footer-wrapper{display: none;}
#content-wrapper {background:#00AEEF;padding: 15px 0 0;}
.content {width: 100%;} .sidebar {display:none;}
</style>
<div id='errorpage'>
<h1>404</h1>
<h3>Không tìm thấy trang</h3>
<p>TRANG BẠN ĐÃ YÊU CẦU KHÔNG THỂ ĐƯỢC HIỂN THỊ. TRANG KHÔNG TỒN TẠI, HOẶC ĐÃ BỊ XÓA HOẶC DO LỖI TẠM THỜI CỦA MÁY CHỦ.</p>
<h3>Trở về trang chủ <a href='http://kslzone.blogspot.com/'>KslZone.NET</a></h3>
<div id='searching -errorpage'>
<form action='/p/search.html' id='search' method='get'>
<input name='q' placeholder='TÌM KIẾM Ở ĐÂY' size='40' type='text'/>
</form></div></div>
<!-- End - Error 404 Page -->

thay thể kslzone.blogspot.com và KslZone.Net thành những thứ tương ứng với blog của bạn và tiếp tục thay

.content {width: 100%;} .sidebar {display:none;}

thành class của khu vực nội dung blog và sidebar trên blog của bạn, nếu bạn không biết thì để lại nhận xét mính sẽ kiểm tra dùm cho bạn.

Lời kết

Việc thay thế trang 404 mặc định của Blogger bằng một cái khác bắt mắt hơn với khung tìm kiếm tương tự như đoạn mã mà mình chia sẻ sẽ giúp cho khách truy cập ở lại trên website lâu hơn mặc dù gặp lỗi không tìm thấy do bất kì lý do nào.