Tạo trang lỗi 404 chuyên nghiệp trên Blogger

Vài ngày trước, chúng ta cùng nhau tìm hiểu về vấn đề Làm sao để nhúng bài viết trên Google Plus vào Blogger, Tạo Widget đăng ký nhận bản tin qua email trong blogger, Thêm thẻ Meta Description vào mỗi bài viết trong blog. Hôm nay, tôi trở lại đây với một hướng dẫn tuyệt vời về chủ đề một trang báo lỗi 404 chuyên nghiệp. Sau khi đọc tiêu đề của bài viết, bạn đã hiểu về chủ đề ngày hôm nay của tôi chứ? Vì vậy, chúng hãy bắt đầu cuộc tìm hiểu.

Một vài năm trước đây, chúng ta sử dụng blog với giao diện Blogger cũ nên không thể tạo ra một trang lỗi tùy chỉnh được, nhưng bây giờ nó lại hoàn toàn có thể. Bởi vì bây giờ tùy chọn đó cũng có sẵn trong tùy chọn thiết lập tìm kiếm. Với thiết kế giao diện blog củ, khi ai đó nhập vào trình duyệt một địa chỉ URL không có thật, thì trang sẽ báo lỗi không tìm thấy ở giao diện trang trắng bị lỗi. Rất nhiều người sử dụng các cách hiển thị trang lỗi hoàn toàn khác nhau từ trang gốc. Có người chỉ hiển thị Page not found tức là không tìm thấy trang, có người lại chuyển hướng đến một trang khác ngoài blog này..vv..Nhưng với bài viết này, tôi sẽ giới thiệu đến các bạn cách tạo một trang lỗi 404 rất chuyên nghiệp cho blogger mà không làm mất đi lượng truy cập của đọc giả, đồng thời không ảnh hưởng đến thứ hạng của trang web trên các công cụ tìm kiếm. Vâng, đây là một trong  những lỗi đã tồn tại từ rất lâu và phổ biến hầu như mọi người làm web đều phải đối diện. Nhưng bây giờ nó là mối quan tâm hàng đầu của những người làm Seo. Những người không biết về trang 404 lỗi có thể đọc các đoạn văn dưới đây để hiểu nó.

                     Đọc thêm:     Thêm nút xã hội nằm ngang dưới chân tiêu đề

Trang lỗi 404 là gì?

Trang lỗi 404 là một trang web không có sẵn trong thực tế được hiển thị các lỗi trang trắng, không tìm thấy trang hoặc trang tự động điều hướng đến trang khác khi một ai đó nhập vào trình duyệt một liên kết URL bị hỏng hoặc gõ sai địa chỉ. Nói cách khác, khi bạn nhập một địa chỉ trang không chính xác thì trang đó sẽ báo lỗi và không xuất hiện.

Vậy tạo trang lỗi chuyên nghiệp là gì?

Ở đây tôi sẽ thiết kế một trang báo lỗi 404 chuyên nghiệp hơn, hoặc không tìm thấy trang cho tất cả các blogger. Trang này được xem là chuyên nghiệp bởi vì nó được thiết kế trên nền CSS3 và nó có tích hợp một số lựa chọn tuyệt vời cho chuyển hướng tốt hơn hoặc đọc giả có thể quay về lại trang gốc mà không phải tắt trang web đang truy cập. Ví dụ: khi có ai đó gõ vào trình duyệt trang web của bạn với URL bị sai ở phần đuôi, dẫn đến trang web bị lỗi 404. Nhưng thay vì tắt trang này đi, người đó sẽ được gợi ý chuyển đến bài viết khác trong cùng website.

Về tính năng

Trang này có một số tính năng tốt mà tôi đã liệt kê dưới đây.

• Trang đầy đủ Width:  Trang này có đầy đủ chiều rộng mà sẽ ẩn phần widget sidebar, vì thế mà làm cho trang này chuyên nghiệp hơn.

• Thân thiện lời nhắn: Nó chứa một thông điệp thân thiện mà sẽ nói với đọc giả rằng họ đã nhập vào một trang lỗi.

• Go Back Link (JavaScript Link):  Go back link là chức năng tuyệt vời và nó cũng được thêm vào trang nếu người đọc đang đọc một bài báo, vì vô tình người đọc đã nhấp vào một liên kết bị hỏng và với sự giúp đỡ của Go back link người đọc sẽ tự động quay trở lại bài viết trước một cách dễ dàng.

• Báo cáo sự cố với trang liên hệ (Chuyển người đọc đến trang liên hệ):  Lý do của việc thêm liên kết đến trang liên hệ là nếu bất kỳ trang blog nào của bạn bị xóa, thì người dùng có thể báo cáo cho bạn thông qua trang liên hệ.

• Go To chủ (Link): Đây là một cách để liên kết trang chủ khi người đọc không tìm thấy trang mong muốn.

• Hộp tìm kiếm Stylish: Tôi đã thêm một hộp tìm kiếm phong cách trong trang lỗi mà nếu khách truy cập vào trang web để tìm một cái gì đó thì họ có thể tìm kiếm nó một cách dễ dàng trên hộp tìm kiếm.

• Big 404 Logo: Tính năng cuối cùng, trong trang này có logo 404 lớn nằm ở vị trí giữa trang, nhằm thông báo cho độc giả biết rằng họ đã nhập vào một liên kết bị hỏng hoặc không tìm thấy trang.

Làm sao để cài đặt trang này?

Thật tuyệt, sau khi tìm hiểu về tính năng của trang trang lỗi 404 chuyên nghiệp, bây giờ tôi dám khẳng định rằng mọi người rất muốn cài đặt nó vào blog của mình. Vì vậy, dưới đây là chia sẽ miễn phí cho tất cả mọi người có thể dễ dàng cài đặt nó bằng cách làm theo các bước đơn giản dưới đây.

• Đăng  nhập vào Blogger - chọn Cài đặt - vào phần  Tùy chọn Tìm kiếm

• Trong mục Lỗi và chuyển hướng có mục Không tìm thấy trang tùy chỉnh

• Sau đó bạn Click vào "Chỉnh sửa".

• Giờ đây, một hộp thoại sẽ xuất hiện, nơi bạn sẽ dán đoạn mã sau.

Mã để dán vào

<!—Weblog 247 404 Page

-->

  <p style='line-height:
30px'><strong>

<font color='#ff0000'
size='5'>

Oops!

</font> <font
color='#666666'>

Looks like you either clicked
a broken link or a page that you were looking for doesn't 

exist. <br/> Kindly do
one of the followings:

</font></strong></p>

  <ol style='line-height: 25px'>

    <li><a
href='javascript:history.go(-1)'>&#171; Go Back</a> </li>

    <li>Report the Problem to us by <a
href='CONTACT PAGE URL'>Clicking 

Here</a>&#160;&#160;&#160;
(<em>This will help us serve you even better</em>) </li>

    <li>Go To Homepage by <a
href='HOMEPAGE URL'>Clicking Here</a>

      <br/></li>

<li>Search Anything
Using Below Search Box</li>

  </ol>

<br />

 <center><form _lpchecked='1'
action='/search' class='search-form' id='search_mini_form' 

method='get'>

<input id='searchinput'
name='q' onblur='if (this.value == &apos;&apos;) {this.value = 

&apos;Type Here & Hit
Enter&apos;;}' onfocus='if (this.value == &apos;Search the
site&apos;) 

{this.value =
&apos;&apos;;}' type='text' value='Type Here & Hit Enter'/>

<input id='searchbutton'
style='vertical-align: top;' type='submit' value='Search!'/>

</form></center>

  <p>

    <br/>

    <br/>

    <br/></p>

<p
align='center'><font size='5'>Page Not Found!</font></p>

<br /> <br />
<br />

<p align='center'>
<font style='font-size:150px; font-weight:bold;' color='red'> 404 

</font></p>

<style>

.status-msg-wrap {

    font-size: 100%;

    margin: none;

    position: static;

    width: 100%;

}

.status-msg-border {

    display:none

}

.status-msg-body {

    padding: none;

    position: static;

    text-align: inherit;

    width: 100%;

    z-index: auto;

}

.status-msg-wrap a {

    padding: none;

    text-decoration: inherit;

}

#sidebar-wrapper,
#midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, 

.post-footer ,
#rsidebar-wrapper { display:none !important;} #main-wrapper { 

width:98%!important;} .post {
width:98%!important; }

#searchinput {

background: #FFF 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jI4iaxoZ5vLNnC0Gv9jTesUxQFG3e-KfxIZAGNjAnfhqC7kzoHaZhCnbkk4giZf-IVEf2J612-tX-kBppml46wwu9hq6CekG60TMPK_fjegm_ewwFt56pfhpf5wHtfOq9N2nYgDiXPud/s0/search.pn

g) no-repeat 7px 8px;

background-color: #FFF;

border: 1px solid #ddd;

color: #A0A0A0;

display: inline-block;

font-family:arial;

font-size: 12px;

font-weight:bold;

height: 24px;

width:300px;

margin: 0;

margin-top: 5px;

padding: 5px 15px 5px 28px;

vertical-align: top;

}

#searchinput:hover{

border: 1px solid #bebebe;

box-shadow: 0 1px 2px rgba(5,
95, 255, .1);

padding: 5px 15px 5px 28px;

}

#searchbutton {

background:#444;

color:#fff;

height:35px;

border-radius:5px 5px 5px 5px;

box-shadow:1px 2px 1px 1px
#ABABAB;

border:1px solid #fff;

margin-top:3px;

padding:8px;

}

#searchbutton:hover{background:#555;}

</style>

Thay thế  CONTACT PAGE URL bằng URL trang liên hệ của bạn
Thay thế  HOMEPAGE URL bằng URL trang chủ của bạn.
Ấn nút "Lưu thay đổi" thế là xong.

Kiểm tra trang lỗi 404 vừa tạo như thế nào?

Bạn vừa mới tạo mã chuyển hướng 404 cho website, bây giờ có thể thử xem nó hoạt động như thế nào thì làm sao đây? Bạn vào trang chủ mà bạn vừa dán code trên và thêm phía sau nó những ký tự tùy ý thì bạn sẽ cảm nhận được điều tuyệt vời này. Ví dụ bạn vào trang web của bạn vừa mới dán code:

http://abcd.com/sdfjksd

Những ký tự màu hồng là không có thật và bạn sẽ thấy nó chuyển hướng sang trang khác hoặc thông báo cho bạn biết đó là trang lỗi.

                       Đọc thêm:    Cách cài đặt Google Analytics Trong Blogger