This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 2 October 2018

Thiết kế trang báo lỗi 404 theo phong cách Mi Sốp


Tình cờ lạc vào trang 404 của Microsoft thấy thiết kế và trình bày rất hay. Ngoài việc thông báo lỗi 404 tới người dùng họ còn thêm vào một số kết quả tìm kiếm dạng gợi ý giúp người dùng có thể nhanh chóng chuyển hướng tới các liên kết tồn tại. Và giờ ta sẽ mang nó vào blogspot

Cụ thể list bài viết gợi ý ta có thể dùng thủ thuật random post/recent post/label post,... tùy theo mong muốn của webmaster. Trong bài viết này tôi sẽ sử dụng random post với layout giữ lại header và footer


Bước 1: xác định layout để đặt thẻ điều kiện


Tôi ví dụ layout trang của bạn như sau

<body>
    <div class="header">
        <!-- Nội dung header -->
    </div>
    <div class="main">
        <!-- Nội dung chính -->
    </div>
    <div class="footer">
        <!-- Nội dung footer -->
    </div>
</body>

Ta sẽ đặt thẻ điều kiện như sau để giữ lại header và footer trong trang 404 cũng như tối ưu code

<body>
    <div class="header">
        <!-- Nội dung header -->
    </div>

    <b:if cond='!data:view.isError'>
        <div class="main">
            <!-- Nội dung chính -->
        </div>
        <b:else/>
        <div class="error">
            <!-- Nội dung trang error -->
        </div>
    </b:if>

    <div class="footer">
        <!-- Nội dung footer -->
    </div>
</body>

Bước 2: Chèn code vào trang 404

Mã HTML

<div class='row'>
    <div class="non">
        <div class="mes">
            <div class="headline">
                404 - Page not found
            </div>
            <div class="suggest">
                <p> Hmm, we couldn't find this link, but here are some post that may be helpful</p>
                <div class="_suggest"></div>
            </div>
        </div>
        <div class="hero">
            <a href='/' title='Back to home page'><svg class="hero-image" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 270" style="" xml:space="preserve"><g><path class="st0" d="M116.3,255H34.3c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8h82.1c2.1,0,3.8,1.7,3.8,3.8C120.1,253.3,118.4,255,116.3,255z"></path><path class="st1" d="M73,251.1c-0.1-3.6-1.3-6.8-3.6-9.7c-2.4-3-5.4-4.9-9-5.6v-60h-7.2v60c-3.6,0.8-6.6,2.6-9,5.6c-2.3,2.9-3.5,6.1-3.6,9.7H73z"></path><path class="st1" d="M110.5,251.1c-0.1-3.6-1.3-6.8-3.6-9.7c-2.4-3-5.4-4.9-9-5.6v-60h-7.2v60c-3.6,0.8-6.6,2.6-9,5.6c-2.3,2.9-3.5,6.1-3.6,9.7H110.5z"></path><rect x="72.7" y="28.1" class="st2" width="5.8" height="46.7"></rect><rect x="26.9" y="58.3" class="st3" width="96.8" height="58.5"></rect><rect x="40.4" y="126.6" class="st2" width="69.8" height="35.3"></rect><path class="st2" d="M68.9,29.1c0.8,1.3,1.9,2.2,3.1,2.9h7.3c1.2-0.7,2.2-1.6,3.1-2.9c0.8-1.3,1.2-2.7,1.2-4.2c0-2.2-0.8-4.1-2.3-5.7c-1.6-1.6-3.4-2.3-5.7-2.3c-2.2,0-4.1,0.8-5.7,2.3c-1.6,1.6-2.3,3.4-2.3,5.7C67.6,26.4,68,27.8,68.9,29.1zM66.8,34.9c-1.4-1.3-2.6-2.9-3.3-4.6c-0.8-1.7-1.2-3.5-1.2-5.4c0-1.9,0.4-3.7,1.2-5.4c0.8-1.7,1.9-3.2,3.3-4.6L63.1,11c-1.9,1.7-3.4,3.7-4.5,6.2c-1.1,2.4-1.7,5-1.7,7.7c0,2.7,0.5,5.2,1.6,7.6c1.1,2.4,2.6,4.5,4.6,6.2L66.8,34.9z M73.7,22.9c0.5-0.5,1.1-0.7,1.9-0.7c0.8,0,1.4,0.3,1.9,0.7c0.5,0.5,0.7,1.1,0.7,1.9c0,0.8-0.2,1.4-0.7,1.9c-0.5,0.5-1.1,0.7-1.9,0.7c-0.8,0-1.4-0.3-1.9-0.7c-0.5-0.5-0.7-1.1-0.7-1.9C72.9,24.1,73.2,23.4,73.7,22.9z M84.4,34.9c1.4-1.3,2.6-2.9,3.3-4.6c0.8-1.7,1.2-3.5,1.2-5.4c0-1.9-0.4-3.7-1.2-5.4c-0.8-1.7-1.9-3.2-3.3-4.6l3.7-3.8c2,1.8,3.5,3.9,4.6,6.2c1.1,2.4,1.6,4.9,1.6,7.6c0,2.7-0.6,5.2-1.7,7.7C91.5,35,90,37,88.1,38.7L84.4,34.9z"></path><path class="st3" d="M110.2,161.1v7.5c0,8.7-6.7,15.8-15,15.8H56c-8.2,0-15-7.1-15-15.8v-7.5"></path><path class="st2" d="M51.4,145.2H39.5c-3,0-5.5,1-7.6,3.1c-2.1,2.1-3.1,4.6-3.1,7.6v14.2h-7.2v-14.2c0-4.9,1.8-9.2,5.3-12.7c3.5-3.5,7.7-5.3,12.7-5.3h11.9V145.2z"></path><path class="st4" d="M103.5,89H47.7c-3.9,0-7.2-3.2-7.2-7.2c0-3.9,3.2-7.2,7.2-7.2h55.7c3.9,0,7.2,3.2,7.2,7.2C110.6,85.8,107.4,89,103.5,89z"></path><g><path class="st2" d="M108,149.4h26.9c3,0,5.5-1,7.6-3.1c2.1-2.1,3.1-4.6,3.1-7.6v-9h7.2v9c0,4.9-1.8,9.2-5.3,12.7c-3.5,3.5-7.7,5.3-12.7,5.3H108V149.4z"></path><path class="st1" d="M152.9,125.2v12.6h-7.2v-12.6c-3.6-0.7-6.6-2.6-9-5.6c-2.4-3-3.6-6.4-3.6-10.1c0-4.4,1.5-8.1,4.5-11.2l5.1,5.1c-1.5,1.7-2.3,3.7-2.3,6.1c0,2.5,0.9,4.7,2.6,6.4c1.7,1.7,3.9,2.6,6.4,2.6c2.5,0,4.7-0.9,6.4-2.6c1.7-1.7,2.6-3.9,2.6-6.4c0-2.5-0.8-4.5-2.4-6.2l5.1-5.1c3,3.1,4.5,6.9,4.5,11.3c0,3.7-1.2,7.1-3.6,10.1C159.5,122.6,156.5,124.5,152.9,125.2z"></path></g><path class="st1" d="M21.6,182.1V162h7.2v20.1c3.6,0.7,6.6,2.6,9,5.6c2.4,3,3.6,6.4,3.6,10.1c0,4.4-1.5,8.1-4.5,11.2l-5.1-5.1c1.5-1.7,2.3-3.7,2.3-6.1c0-2.5-0.9-4.7-2.6-6.4c-1.7-1.7-3.9-2.6-6.4-2.6c-2.5,0-4.7,0.9-6.4,2.6c-1.7,1.7-2.6,3.9-2.6,6.4c0,2.5,0.8,4.5,2.4,6.2l-5.1,5.1c-3-3.1-4.5-6.9-4.5-11.3c0-3.7,1.2-7.1,3.6-10.1C15,184.7,18,182.8,21.6,182.1z"></path><circle class="st5" cx="47.5" cy="81.9" r="7.1"></circle><circle class="st5" cx="103.8" cy="81.9" r="7.1"></circle><g><path d="M78.1,55.8c3.1-5.3,7.4-9.5,12.7-12.7c5.3-3.1,11.1-4.7,17.4-4.7c6.3,0,12.1,1.6,17.4,4.7c5.3,3.1,9.5,7.4,12.6,12.7c3.1,5.3,4.6,11.1,4.6,17.4c0,7.9-2.6,15.2-7.9,21.8l37.9,37.9c0.7,0.6,1.1,1.4,1.1,2.5c0,1-0.3,1.9-1,2.6c-0.7,0.7-1.5,1-2.6,1c-1,0-1.9-0.4-2.5-1.1L129.9,100c-6.6,5.2-13.8,7.9-21.8,7.9c-6.3,0-12.1-1.5-17.4-4.6c-5.3-3.1-9.5-7.3-12.7-12.6c-3.1-5.3-4.7-11.1-4.7-17.4C73.4,67,74.9,61.2,78.1,55.8z M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path></g><path class="st1" d="M152.9,125.2v12.6h-7.2v-12.6c-3.6-0.7,1-6.7,3.6-6.7c2.5,0,4.7-0.9,6.4-2.6c1.7-1.7,2.6-3.9,2.6-6.4c0-2.5-0.8-4.5-2.4-6.2l5.1-5.1c3,3.1,4.5,6.9,4.5,11.3c0,3.7-1.2,7.1-3.6,10.1C159.5,122.6,156.5,124.5,152.9,125.2z"></path><path class="st2" d="M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path><g><defs><path id="SVGID_1_" d="M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" style=""></use></clipPath><g class="st6"><path class="st4" d="M108,88.9H72.3c-8.9,0-16.2-7.3-16.2-16.2c0-8.9,7.3-16.2,16.2-16.2H108c8.9,0,16.2,7.3,16.2,16.2C124.2,81.6,116.9,88.9,108,88.9z"></path><circle class="st5" cx="108.1" cy="73" r="16.1"></circle></g></g></g></svg></a>
        </div>
    </div>
</div>
<div class="clear" />

Mã CSS (giống demo, chưa responsive)

<style type='text/css'>/*<![CDATA[*/
.non{padding:3em 0 0;overflow:hidden}
.mes{box-sizing: border-box;float: left;width: 63%;padding: 3em 5em;}
.hero{text-align:center;float:right;width:35%}
.hero-image{max-width:275px;margin:0 auto}
.hero-image .st0{opacity:.2}
.hero-image .st1{fill:#2c3e58}
.hero-image .st2{fill:#b9d6f2}
.hero-image .st3{fill:#639ee1}
.hero-image .st4{opacity:.3;fill:#f6e768}
.hero-image .st5{fill:#f6e768}
.headline{font-weight:600;font-size:47px;margin:0 0 20px}
.suggest>p{font-size:20px;margin:0 0 20px}
._suggest a:hover{text-decoration:underline}
._suggest a{color:#333;font-size:16px;text-decoration:none}
._suggest{line-height:1.8;box-sizing:border-box;padding:0 0 0 1em}
/*]]>*/</style>

Mã JS

<script type="text/javascript">//<![CDATA[
// Random post by Hung1001
var _numPost = 8;
$.ajax({
    url: "/feeds/posts/summary",
    type: "get",
    data: {
        alt: "json",
        "max-results": 0
    },
    dataType: "jsonp",
    success: function(e) {
        for (var t = [], r = [], a = 0; a < e.feed.openSearch$totalResults.$t; a++) t.push(a + 1);
        function n(e) {
            var t = e[Math.floor(Math.random() * e.length)];
            return function(e, t) {
                for (var r = 0; r < e.length; r++)
                    if (e[r] == t) return !0;
                return !1
            }(r, t) ? n(e) : (r.push(t), t)
        }
        for (var s = 0; s < _numPost; s++)
            for (var f = 1; f <= 1; f++) $.ajax({
                url: "/feeds/posts/summary",
                type: "get",
                data: {
                    "start-index": n(t),
                    alt: "json",
                    "max-results": 1
                },
                dataType: "jsonp",
                success: function(e) {
                    for (var t = 0; t < e.feed.entry.length; t++) {
                        for (var r = 0; r < e.feed.entry[t].link.length; r++)
                            if ("alternate" === e.feed.entry[t].link[r].rel) {
                                var a = e.feed.entry[t].link[r].href;
                                break
                            } var n = e.feed.entry[t].title.$t;
                        $("._suggest").append("<li><a href='" + a + "' title='" + n + "'>" + n + "<a></li>")
                    }
                }
            })
    }
});
//]]></script>

Bạn có thể thay đổi giá trị biến _numPost để chỉ định số bài đăng hiển thị

Cuối cùng lưu mẫu lại và vào 1 trang 404 để xem thành quả

Chúc thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js