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

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

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 !