[TUT] - Cách Tạo Trang Báo Lỗi 404 Cho Xenforo Cực Đẹp Và Rất Hay

Thảo luận trong 'Development Tutorials' bắt đầu bởi ITCAnhDuy, 23/8/13.

1votes
5/5, 1 vote

  1. ITCAnhDuy

    ITCAnhDuy Member

    Bài viết:
    423
    Likes :
    142
    ( Đầu tiên cho mình xin lỗi vì đặt cái Topic có phần quá trớn nhé . Làm SEO riết nó nhiễm rồi :D )

    Xin chào các bạn . Hôm nay Andy xin hướng dẫn các bạn tạo trang báo lổi 404 cho Xenforo . Thay cho trang mặc định của xenforo . Với trang báo lỗi này sẽ giúp các bạn tạo được thiện cảm với khách hàng hơn . Khi họ gặp phải trang báo lỗi 404 mặc định vừa " xấu xí " vừa khô khan :D . Và sau đây là Demo + Hình Ảnh .

    Demo : http://vnitech.net/NguyenDangAnhDuy

    [​IMG]

    Nào bắt đầu .

    Đầu tiên các bạn cần tạo một trang báo lổi và đặt tên cho nó tùy ý . Ở đây Andy đặt cho nó là 404.html . Và đoạn Code mà Andy đang dùng như sau :

    Mã:
    <html>
    <head><title>404 Not Found</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    body
    {
      font-family:Segoe UI;
    }
    </style>
    </head>
    <body bgcolor="white">
    <center><h1>404 Not Found - Trang Bạn Tìm Kiếm Không Tồn Tại</h1></center>
    <hr>Địa chỉ mà bạn vừa truy cập có thể đã bị xóa hoặc thay đổi . Hãy kiểm tra lại xem có đúng không ?<br>
    <br>
    Nếu bạn chắc chắn rằng đã đánh đúng địa chỉ . Việc hiễn thị ra trang này là lỗi của chúng tôi <br>
    <br>
    Hãy bắt đầu từ <font color=red><b><a href="http://vnitech.net">Trang Chủ</a></b></font> và sử dụng chức năng <b>Tìm Kiếm</b>
    <br>
    <br>
    Nếu vẫn chưa được . Bạn có thể liên hệ với chúng tôi qua thông tin sau<br>
    <font color=blue><b>Yahoo : anhduy.bluesky
    | Email : itc.anhduy@gmail.com
    | Phone : 01658 198 197</b>
    </font>
    <br>
    <br><b>Xin lỗi bạn vì sự bất tiện này :) !</b>
    <br>
    <center><a href="http://vnitech.net"><img src="https://vnitech.googlecode.com/files/404.jpg" height=300 width=600></a></center>
    </body>
    </html>
    Sau đó các bạn Save lại và úp lên Host ở thư mục gốc nhé :P

    Tiếp đó các bạn vào AdminCP -> Appearance -> Search Phrases và tìm :
    Mã:
    Route {route} could not be found.
    Sau đó click vào : route_x_not_found

    Các bạn thêm đoạn Code sau vào trên đầu :
    Mã:
    <meta http-equiv='refresh' content="0; url=http://vnitech.net/404.html">
    
    [​IMG]

    Save lại !

    Tiếp theo các bạn vào Search Phrases và tìm tiếp :

    Mã:
    The requested forum could not be found.
    Các bạn click vào : requested_forum_not_found

    Các bạn thêm đoạn Code sau vào trên đầu :
    Mã:
    <meta http-equiv='refresh' content="0; url=http://vnitech.net/404.html">
    
    [​IMG]

    Save lại !

    Lưu ý : Nhớ đổi http://vnitech.net . Thành tên miền của website bạn nhé :P
    - Có thể Pharse sẽ khác nhau giữa ngôn ngữ English và Tiếng Việt . Các bạn nhớ lưu ý và tùy chỉnh cho đúng nhé.

    Vậy là xong . Bây giờ forum của bạn đã được chuyển hướng sang trang 404.html khi bị lỗi 404 .

    Rất mong sau bài viết này các bạn sẽ biến hóa lỗi 404 sang một trang do chính các bạn sáng tạo nhầm đem lại sự thú vị cho khách hàng khi gặp lỗi này ;)

    Cập nhật ngày 9/4 : Các bạn tìm thêm phasre: requested_link_forum_not_found
    và thêm vào nhé . Cãm ơn bạn @huydn117 đã chỉ mình


    Bài viết này do Andy thuộc diễn đàn http://vnitech.net viết . Nếu bạn sao chép bài viết đi nơi khác . Xin vui lòng để lại nguồn bài viết . Xin cãm ơn :)
     
    Last edited: 4/9/13
    Đang tải...
  2. Coolboyhn

    Coolboyhn Member

    Bài viết:
    503
    Likes :
    138
    hay đó, mà mất công vậy thì thay nội dung file html kia vào lang đó cho khỏi mất công được không nhỉ
     
  3. ITCAnhDuy

    ITCAnhDuy Member

    Bài viết:
    423
    Likes :
    142

    Mình chưa thử :D . Nên chưa biết bạn à :P
     
    Last edited: 23/8/13
  4. Imma Kun

    Imma Kun Verified User

    Bài viết:
    1,298
    Likes :
    781
    này bên Xen có add-on nè ..
     
  5. ITCAnhDuy

    ITCAnhDuy Member

    Bài viết:
    423
    Likes :
    142
    Addons Duy cài không hoạt động . Nên mới mày mò làm cách này nè =((
     
  6. unicorn280489

    unicorn280489 Member

    Bài viết:
    103
    Likes :
    6
    Mình sử dụng xfr 1.1.5 mà vào search đủ cách, mà không kiếm ra được cái route_x_not_found bạn ơi @ITCAnhDuy
     
  7. Imma Kun

    Imma Kun Verified User

    Bài viết:
    1,298
    Likes :
    781
    Route hỗ trợ sẵn cho 1.2.x còn route của 1.1.x thì cài addon bạn
     
  8. unicorn280489

    unicorn280489 Member

    Bài viết:
    103
    Likes :
    6
    Mình chưa hiểu ý nghĩa cái Route đó lắm, vậy mặc định xfr 1.1.5 chưa có thì mình cài cũng được, nhưng cài cái route đó ngoài tác dụng để làm cái lỗi 404 này nó có tác dụng gì khác nữa không. Bạn cho mình cái link download addon Route đó với nhé
     
  9. ITCAnhDuy

    ITCAnhDuy Member

    Bài viết:
    423
    Likes :
    142
    Bạn cho mình xin link website của bạn . Nếu bạn làm không được . Pm qua Yahoo của mình : anhduy.bluesky

    Mình sẽ TeamViewer và giúp bạn >:D<
     
  10. p3iu18

    p3iu18 Member

    Bài viết:
    298
    Likes :
    123
    Xen nó đã nặng rồi chơi Add-on làm nó nặng thêm. Cái gì viết tay thì nên ưu tiên hàng đầu :P
     
    ITCAnhDuy thích bài này.
  11. unicorn280489

    unicorn280489 Member

    Bài viết:
    103
    Likes :
    6
    http://thienduongcacanh.com
    ok mình add nick bạn rồi
     
    ITCAnhDuy thích bài này.
  12. ITCAnhDuy

    ITCAnhDuy Member

    Bài viết:
    423
    Likes :
    142
    unicorn280489 thích bài này.
  13. thuatdl

    thuatdl Member

    Bài viết:
    672
    Likes :
    182
    Vote + Follow để lúc nào làm ^^
     
  14. hacobi1102

    hacobi1102 Member

    Bài viết:
    145
    Likes :
    76
    Dùng htaccess là chuẩn nhất cho cả SEO
     
  15. ITCAnhDuy

    ITCAnhDuy Member

    Bài viết:
    423
    Likes :
    142
    Anh dùng .htaccess chuyển được thì chỉ em với :D
     
    unicorn280489 thích bài này.
  16. SangNguyen2603

    SangNguyen2603 Member

    Bài viết:
    192
    Likes :
    63
    Mình copy code html trên bỏ vào pharse requested_page_not_found và requested_forum_not_found thế là xong.
    Tks bác vì ý tưởng mới này :D
     
    Coolboyhn thích bài này.
  17. Coolboyhn

    Coolboyhn Member

    Bài viết:
    503
    Likes :
    138
    vụ htaccess này trên XF mình từng thử mà không ăn thua, hướng dẫn 1 bài đi bạn!
     
    unicorn280489 thích bài này.
  18. huydn117

    huydn117 New Member

    Bài viết:
    58
    Likes :
    4
    Search Phrases chứ ko phải template nhé bạn

    => pharse requested_page_not_found
    => requested_forum_not_found
    => requested_link_forum_not_found
     
  19. SangNguyen2603

    SangNguyen2603 Member

    Bài viết:
    192
    Likes :
    63
    xf 1.1.5 làm gì có route_x_not_found mà search :))
     
  20. H.B.T_Binh

    H.B.T_Binh Member

    Bài viết:
    108
    Likes :
    108
    Cho các bác cái dễ hơn , demo : http://vietek.tk/forums/dsadasdasd ( bất cứ trang gì không có là được rồi :) )

    Vào tìm Template error và hay toàn bộ bằng code này :

    Mã:
    <div class="container">
        <div class="row">
            <div class="content">
                <div class="wrap-decor">
                    <span>4</span><img alt="no activity" src="styles/404.png"><span>4</span>
                </div>
                    <h2>Không có gì ở đây cả!</h2>
                    <p>
                    Chúng tôi không thể tìm thấy trang mà bạn muốn đến. Bạn hãy thử:
                    <br />
                    <a href="/" class="call-to-action">Quay lại trang chủ</a> hoặc <a href="" class="call-to-action">Đi ra chỗ khác</a> nhé !
                    </p>
            </div>
        </div>
    </div>
    tiếp tục với template error.css hay toàn bộ bằng code sau :

    Mã:
    .page-body .content{
        margin: auto;
        margin-top: 54px;
        min-height: 500px;
    }
    
    
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .row {
        width: 100%;
        max-width: 1140px;
        min-width: 755px;
        margin: 0 auto;
        overflow: hidden;
    }
    
    .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
        margin-right: 3.8%;
        float: left;
        min-height: 1px;
    }
    
    .row .onecol {
        width: 4.85%;
    }
    
    .row .twocol {
        width: 13.45%;
    }
    
    .row .threecol {
        width: 22.05%;
    }
    
    .row .fourcol {
        width: 30.75%;
    }
    
    .row .fivecol {
        width: 39.45%;
    }
    
    .row .sixcol {
        width: 48%;
    }
    
    .row .sevencol {
        width: 56.75%;
    }
    
    .row .eightcol {
        width: 65.4%;
    }
    
    .row .ninecol {
        width: 74.05%;
    }
    
    .row .tencol {
        width: 82.7%;
    }
    
    .row .elevencol {
        width: 91.35%;
    }
    
    .row .twelvecol {
        width: 100%;
        float: left;
    }
    
    .last {
        margin-right: 0px;
    }
    
    img, object, embed {
        max-width: 100%;
    }
    
    img {
        height: auto;
    }
    
    
    .container .row{
        text-align: center;
    }
    
    .container .row .content{
        padding-top: 10%;
        color: #333;
    }
    
    .wrap-decor{
        margin: 5% 0 2% 0;
    }
    .wrap-decor img{
        position: relative;
        top: -12px;
        margin: 0 20px;
    
        animation-name: indicator;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;   
        animation-direction: normal;
        animation-delay: 0;
        animation-play-state: running;
        animation-fill-mode: forwards;
    
        -webkit-animation-name: indicator;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 20;   
        -webkit-animation-direction: normal;
        -webkit-animation-delay: 0;
        -webkit-animation-play-state: running;
        -webkit-animation-fill-mode: forwards;
    }
    .wrap-decor span{
        font-size: 10em;
        line-height: 136px;
        color: #cecece;
        font-weight: bold;
    }
    
    .content h2{
        font-size: 3em;
        line-height: 2em;
    }
    
    .content p{
        line-height: 1.75em;
    }
    .content .call-to-action{
        display: inline-block;
        padding: 5px 15px;
        margin: 10px;
        color: #fff;
        background: #f15a24;
        border-radius: 40px;
        -moz-border-radius: 40px;
        -webkit-border-radius: 40px;
        font-size: 0.875em;
        font-weight: bold;
    }
    
    .content .call-to-action:hover{
        background-color: #8fbf00;
    }
    
    @keyframes indicator {
    
        0% {
        top: -6px;
    }
    
    25% {
        top: 0px;
    }
    
    50% {
        top: 12px;
    }
    
    75%{
        top: 0px;
    }
    
    100% {
        top: -6px;
    }
    
    }
    
    @-webkit-keyframes indicator {
    
        0% {
        top: -6px;
    }
    
    25% {
        top: 0px;
    }
    
    50% {
        top: 12px;
    }
    
    75%{
        top: 0px;
    }
    
    100% {
        top: -6px;
    }
    
    }
    
    /* Smaller screens */
    
    @media only screen and (max-width: 1023px) {
        body {
            font-size: 0.8em;
            line-height: 1.5em;
        }
    
    }
    
    
    /* Mobile */
    
    @media handheld, only screen and (max-width: 767px) {
    
        body {
            font-size: 16px;
            //-webkit-text-size-adjust: none;
            overflow: hidden;
        }
    
        .row, body, .container {
            width: 100%;
            min-width: 0;
            margin-left: 0px;
            margin-right: 0px;
            padding-left: 0px;
            padding-right: 0px;
        }
    
        .row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
            width: auto;
            float: none;
            margin-left: 0px;
            margin-right: 0px;
            padding-left: 20px;
            padding-right: 20px;
            overflow: hidden;
        }
    
    
        /*Content Responsive*/
        .content{
            margin-top: 0px;
        }
        .wrap-decor{
            margin: 0 0 10px 0;
        }
        .wrap-decor img{
    
        }
        .wrap-decor span{
    
        }
    
        .content h2{
    
        }
    
        .content p{
    
        }
        .content .call-to-action{
    
        }
    
        .content .call-to-action:hover{
    
        }
    
    }
    
    
    @media handheld, only screen and (max-width: 481px) {
        body{
            font-size: 14px;
        }
    
        .row{
            padding: 0 20px;
            width: auto;
        }
    
        .container .row .content{
            padding-top: 8%;   
        }
        .wrap-decor{
    
        }
        .wrap-decor img{
            width: 90px;
            margin: 0 10px;
        }
        .wrap-decor span{
            font-size: 6em;
            line-height: 90px;
        }
    
        .content h2{
            font-size: 1.5em;
            line-height: 2.5em;
        }
    }
    Tải file 404.zip được file 404.png up lên thư mục styles/
    Hiện thị tốt trên điện thoại :D

    Các bạn tự chỉnh sửa lại cho phù hợp với style của bạn :)
     

    Các file đính kèm:

    • 404.zip
      Kích thước:
      6.6 KB
      Đọc:
      16
    SangNguyen2603 thích bài này.
comments powered by Disqus

Chia sẻ trang này

Đang tải...