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

LongAnIT 10/30/2018
Thiết kế trang báo lỗi 404 theo phong cách Mi Sốp Blogger

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

<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 !

Nguồn: https://www.hung1001.blog

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây