Tạo trang báo lỗi 404 Page Not Found chuyên nghiệp

Anh Trai Nắng
personAnh Trai Nắng
18 tháng 8
0
Đối với blog hoặc website nào cũng cần phải có trang báo lỗi 404 Page Not Found. Hôm nay, anhtrainang.com sẽ hướng dẫn các bạn tạo một trang 404 cực kỳ chuyên nghiệp.
404 Page Not Found thường được coi là không mong muốn và ảnh hưởng theo chiều hướng xấu đến quá trình làm SEO của một website. Vì vậy chúng ta cần phải tạo một trang báo lỗi 404 để giảm thiểu đến điều này.

Tạo trang báo lỗi 404 Page Not Found chuyên nghiệp

Create 404 Page Not Found

Bước 1: Truy cập vào giao diện chỉnh sửa HTML của Blogspot.
Bước 2: Dán đoạn code dưới đâysau thẻ <body> hoặc </body>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300);
body {
    background-color: #335B67;
    background: -ms-radial-gradient(ellipse at center,  #335B67 0%, #2C3E50 100%) fixed no-repeat;
    background: -moz-radial-gradient(ellipse at center,  #335B67 0%, #2C3E50 100%) fixed no-repeat;
    background: -o-radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
    background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #335B67), color-stop(1, #2C3E50));
    background: -webkit-radial-gradient(ellipse at center,  #335B67 0%, #2C3E50 100%) fixed no-repeat;
    background: radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
    font-family: &#39;Source Sans Pro&#39;, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0px;
}
::selection {
    background-color: rgba(0,0,0,0.2);
}
::-moz-selection {
    background-color: rgba(0,0,0,0.2);
}
 
a {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    margin-right: 10px;
}
a:last-child { margin-right: 0px; }
a:hover {
    text-shadow: 0px 0px 1px rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,1);
}
#noscript-warning {
    width: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.2);
    font-weight: 300;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}
#top-nav, .top-header, .sidebar-area, #footer-wrapper {
    display: none;
}
/* === WRAP === */
#wrap {
    width: 80%;
    max-width: 1400px;
    margin:0 auto;
    height: auto;
    position: relative;
    margin-top: 8%;
    overflow: hidden;
}


/* === MAIN TEXT CONTENT === */
#main-content {
    float: right;
    max-width: 45%;
    color: white;
    font-weight: 300;
    font-size: 18px;
    padding-bottom: 40px;
    line-height: 28px;
}
#main-content h1 {
    margin: 0px;
    font-weight: 400;
    font-size: 42px;
    margin-bottom: 40px;
    line-height: normal;
}


/* === NAVIGATION BUTTONS === */
#navigation { margin-top: 2%; }
#navigation a.navigation {
    display: block;
    float: left;
    background-color: rgba(0,0,0,0.2);
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    height: 41px;
    line-height: 41px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    margin-right: 2%;
    margin-bottom: 2%;
    border-bottom: none;
}
#navigation a.navigation i { line-height: 41px; }
#navigation a.navigation:hover {
    background-color: rgba(26,188,156,0.7);
    border-bottom: none;
}


/* === WORDSEARCH === */
#wordsearch {
    width: 45%;
    float: left;
}
#wordsearch ul {
    margin: 0px;
    padding: 0px;
}
#wordsearch ul li {
    float: left;
    width: 12%;
    background-color: rgba(0,0,0,.2);
    list-style: none;
    margin-right: 0.5%;
    margin-bottom: 0.5%;
    padding: 0;
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    overflow: hidden;
    font-size: 24px;
    font-size: 1.6vw;
    font-weight: 300;
    transition: background-color 0.75s ease;
    -moz-transition: background-color 0.75s ease;
    -webkit-transition: background-color 0.75s ease;
    -o-transition: background-color 0.75s ease;
}
#wordsearch ul li.selected {
    background-color: rgba(26,188,156,0.7);
    color: rgba(255,255,255,1);
    font-weight: 400;
}


/* === SEARCH FORM === */
#search { margin-top: 30px; }
#search input[type=&#39;text&#39;] {
    width: 88%;
    height: 41px;
    padding-left: 15px;
    padding-rigt: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: rgba(0,0,0,0.2);
    border: none;
    outline: none;
    -webkit-appearance: none;
    font-size: 16px;
    font-weight: 300;
    color: white;
    font-family: &#39;Source Sans Pro&#39;, sans-serif;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    border-radius: 0px;
}
#search .input-search {
    width: 10%;
    float: right;
    height: 41px;
    background-color: rgba(0,0,0,0.2);
    outline: none;
    border: none;
    -webkit-appearance: none;
    font-family: &#39;Source Sans Pro&#39;, sans-serif;
    color: white;
    font-weight: 300;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    text-align: center;
}
#search .input-search:hover {
    background-color: rgba(26,188,156,0.7);
}
/* === RESPONSIVE CSS === */
@media all and (max-width: 899px) {
    #wrap { width: 90%; }
}
@media all and (max-width: 799px) {
    #wrap { width: 90%; height: auto; margin-top: 40px; top: 0%; }
    #wordsearch { width: 90%; float: none; margin:0 auto; }
    #wordsearch ul li { font-size: 4vw; }
    #main-content { float: none; width: 90%; max-width: 90%; margin:0 auto; margin-top: 30px; text-align: justify; }
    #main-content h1 { text-align: left; }
    #search input[type=&#39;text&#39;] { width: 84%; }
    #search .input-search { width: 15%; }
}
@media all and (max-width: 499px) {
    #main-content h1 { font-size: 28px; }
}
</style>
  <div id='wrap'>
    <div id='wordsearch'>
      <ul>
        <li>k</li>
        <li>v</li>
        <li>n</li>
        <li>z</li>
        <li>i</li>
        <li>x</li>
        <li>m</li>
        <li>e</li>
        <li>t</li>
        <li>a</li>
        <li>x</li>
        <li>l</li>
        <li class='one'>4</li>
        <li class='two'>0</li>
        <li class='three'>4</li>
        <li>y</li>
        <li>y</li>
        <li>w</li>
        <li>v</li>
        <li>b</li>
        <li>o</li>
        <li>q</li>
        <li>d</li>
        <li>y</li>
        <li>p</li>
        <li>a</li>
        <li class='four'>p</li>
        <li class='five'>a</li>
        <li class='six'>g</li>
        <li class='seven'>e</li>
        <li>v</li>
        <li>j</li>
        <li>a</li>
        <li class='eight'>n</li>
        <li class='nine'>o</li>
        <li class='ten'>t</li>
        <li>s</li>
        <li>c</li>
        <li>e</li>
        <li>w</li>
        <li>v</li>
        <li>x</li>
        <li>e</li>
        <li>p</li>
        <li>c</li>
        <li>f</li>
        <li>h</li>
        <li>q</li>
        <li>e</li>
        <li class='eleven'>f</li>
        <li class='twelve'>o</li>
        <li class='thirteen'>u</li>
        <li class='fourteen'>n</li>
        <li class='fifteen'>d</li>
        <li>s</li>
        <li>w</li>
        <li>q</li>
        <li>v</li>
        <li>o</li>
        <li>s</li>
        <li>m</li>
        <li>v</li>
        <li>f</li>
        <li>u</li>
      </ul>
    </div>
    <div id='main-content'>
      <h1>Lỗi 404 Rồi</h1>
      <p>
Rất tiếc, trang bạn đang tìm kiếm không thể tìm thấy. Nó có thể
      tạm thời không có hoặc không còn tồn tại.</p>
      <p>
Kiểm tra URL bạn đã nhập và thử lại. Ngoài ra, tìm kiếm
      cho bất cứ điều gì là mất tích hoặc có một cái nhìn xung quanh phần còn lại của trang web của chúng tôi.</p>
      <div id='search'>
        <form>
          <input placeholder='Search' type='text'/>
        </form>
      </div>
      <div id='navigation'>
        <a class='navigation' href='/'>Home</a><a class='navigation' href='/p/gioithieu.html'>Thông Tin
        Us</a>
        <a class='navigation' href='https://www.ttitvn.com/p/sitemap.html'>Site Map</a>
        <a class='navigation' href='https://www.ttitvn.com/p/lienhe.html'>Liên Hệ</a>
      </div>
    </div>
  </div>
<script>$(function () {
    var liWidth = $(&quot;li&quot;).css(&quot;width&quot;);
    $(&quot;li&quot;).css(&quot;height&quot;, liWidth);
    $(&quot;li&quot;).css(&quot;lineHeight&quot;, liWidth);
    var totalHeight = $(&quot;#wordsearch&quot;).css(&quot;width&quot;);
    $(&quot;#wordsearch&quot;).css(&quot;height&quot;, totalHeight);
});
causeRepaintsOn = $(&quot;h1, h2, h3, p&quot;);
$(window).resize(function () {
    causeRepaintsOn.css(&quot;z-index&quot;, 1);
});
$(window).on(&#39;resize&#39;, function () {
    var liWidth = $(&quot;.one&quot;).css(&quot;width&quot;);
    $(&quot;li&quot;).css(&quot;height&quot;, liWidth);
    $(&quot;li&quot;).css(&quot;lineHeight&quot;, liWidth);
    var totalHeight = $(&quot;#wordsearch&quot;).css(&quot;width&quot;);
    $(&quot;#wordsearch&quot;).css(&quot;height&quot;, totalHeight);
});


$(function () {
    /* 4 */
    $(this).delay(1500).queue(function () {
        $(&quot;.one&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* 0 */
    .delay(500).queue(function () {
        $(&quot;.two&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* 4 */
    .delay(500).queue(function () {
        $(&quot;.three&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* P */
    .delay(500).queue(function () {
        $(&quot;.four&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* A */
    .delay(500).queue(function () {
        $(&quot;.five&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* G */
    .delay(500).queue(function () {
        $(&quot;.six&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* E */
    .delay(500).queue(function () {
        $(&quot;.seven&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* N */
    .delay(500).queue(function () {
        $(&quot;.eight&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* O */
    .delay(500).queue(function () {
        $(&quot;.nine&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* T */
    .delay(500).queue(function () {
        $(&quot;.ten&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* F */
    .delay(500).queue(function () {
        $(&quot;.eleven&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* O */
    .delay(500).queue(function () {
        $(&quot;.twelve&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* U */
    .delay(500).queue(function () {
        $(&quot;.thirteen&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* N */
    .delay(500).queue(function () {
        $(&quot;.fourteen&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* D */
    .delay(500).queue(function () {
        $(&quot;.fifteen&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue()
    });
});
</script>
</b:if>
Bước 3: Lưu lại và xem kết quả.

Rất đơn giản để tạo một trang báo lỗi 404 Page Not Found đúng không nào? Hy vọng sẽ có ích cho các bạn trọng quá trình SEO blog.
Tags
Anh Trai Nắng

Anh Trai Nắng

Không muốn hoặc không thích. Không tồn tại hoặc không thể! facebook twitter youtube instagram external-link

    Hiện thêm

    Đăng nhận xét

    HƯỚNG DẪN BÌNH LUẬN

    0 Nhận xét

    Đăng nhận xét (0)

    #buttons=(Thanks!) #days=(7)

    À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
    Ok, Go it!
    Chia sẻ với ứng dụng khác
    Copy Post Link

    HƯỚNG DẪN BÌNH LUẬN

    Chèn link

    Sử dụng công cụ Tạo link

    Chèn hình ảnh

    LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

    Định dạng chữ

    <b>Chữ in đậm</b>
    <i>Chữ in nghiêng</i>
    <u>Chữ gạch chân</u>
    <strike>Chữ gạch ngang</strike>

    Chèn một đoạn Code

    Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
    Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

    Khác

    Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
    Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
    Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
    Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

    Đã hiểu