Tạo trang 404 chuyên nghiệp trong Blogspot

Một hướng dẫn tuyệt vời và một trang lỗi 404 chuyên nghiệp.
Sau khi đọc tiêu đề của bài viết, Bạn đã biết về chủ đề hôm nay của chúng tôi.
Vì vậy, hãy bắt đầu thảo luận.Những người không biết về 404 trang Lỗi có thể đọc các đoạn văn dưới đây để hiểu nó.

Lỗi 404 trang là gì?

Đây là một trang web đang được sử dụng bởi tất cả các trang web để hiển thị các thông báo lỗi khi một người nào đó nhập vào một vị trí bị hỏng hoặc không tìm thấy. Nói cách khác, khi bạn nhập một địa chỉ không chính xác sau đó mới xuất hiện. Về cơ bản, trong trang thông báo lỗi và một số tùy chọn được thêm vào để điều hướng tốt hơn.

Tạo trang Lỗi chuyên nghiệp

Mình đã mang lại một trang báo lỗi 404 chuyên nghiệp hoặc trang không tìm thấy cho tất cả các blogger. Trang này là chuyên nghiệp vì nó được thiết kế với CSS3 và nó có chứa một số lựa chọn tuyệt vời để điều hướng tốt hơn. Trước hết xem nó như thế nào.
Demo page 404

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 đủ Chiều rộng: Trang này có đầy đủ chiều rộng mà sẽ ẩn các vật dụng bên web của bạn và đó là những gì mà làm cho trang này chuyên nghiệp hơn.
• Người dùng thân thiện tin nhắn: Nó chứa một thông điệp thân thiện người sử dụng mà sẽ cho độc giả của bạn rằng họ đã nhập vào một trang báo lỗi.
• Trở lại Liên kết (JavaScript liên kết) :  Tới liên kết cũng được thêm vào để nếu độc giả của bạn đã được đọc một bài viết sau đó vô tình anh / cô ấy nhấp vào bất kỳ liên kết bị hỏng và với sự giúp đỡ của Go trở lại liên kết anh / cô ấy sẽ nhận được bài viết của bạn lại dễ dàng .
• Báo cáo vấn đề để chúng tôi (liên kết đến liên hệ Trang) :  Lý do của việc thêm liên hệ liên kết trang là nếu bất kỳ trang nào của blog của bạn sẽ bị xóa sau đó người dùng có thể báo cáo cho bạn dịch vụ tốt hơn.
• Về Trang chủ (Link): Vì vậy, đây là một liên kết trang web phổ biến để điều hướng tốt hơn.
• Phong cách Hộp tìm kiếm: Chúng tôi đã thêm một hộp tìm kiếm phong cách trong trang mà bạn rằng nếu khách truy cập của bạn là về để tìm một cái gì đó sau đó anh / cô ấy có thể tìm kiếm một cách dễ dàng với hộp tìm kiếm.
• Lớn 404 Logo: Trong cuối cùng, trang này có 404 biểu tượng lớn mà để cho độc giả của bạn biết rằng họ đã hạ cánh trên một liên kết bị hỏng hoặc không tìm thấy trang.

Làm thế nào để cài đặt trang này?

Bây giờ mọi người có thể muốn cài đặt nó trong blog của mình. Vì vậy, đây là miễn phí cho tất cả mọi người và bạn 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.

• Về Blogger Cài đặt  Tùy chọn tìm kiếm
• Trong Lỗi và chuyển hướng và Click vào "Chỉnh sửa".
• Giờ đây, một hộp thoại sẽ xuất hiện, nơi bạn có để dán đoạn mã sau.


<!-- Blogger Yard 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/AVvXsEgPMR58BOaK2cbiuAqklumBAibmkWlhY4t_LltK2b5cKRnQmqk_yCl1oN3b7mSMXHr6N-uW0JZEaq2upkt0gjLPwudhxB4RQmHWotfkdSbTRUD3bYAwOzI-5U29d55_lvWnYCs_-3fDGFDo/s0/search.png) 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>

Xin giới thiệu các bạn template blogspot miễn phí