Home »

Tạo trang báo lỗi 404 cho blogger

25 tháng 1, 2014

Làm sao để tạo trang báo lỗi chuyên nghiệp và chuyển hướng cho blogspot ?

Trong bài viết này Thế Giới Blog sẽ hướng dẫn bạn tạo trang báo lỗi cho blogger chuyên nghiệp.

Trước hết bạn nên tìm hiểu lỗi 404 là gì? Và tại sao chúng ta nhìn thấy lỗi 404 blogspot? Lỗi 404 là liên kết bị hỏng và trang đó không tồn tại trong blog của chúng ta. Theo mặc định của blogger thì chúng ta thấy một trang trống khi gặp lỗi 404, bởi vì vậy hôm nay mình chia sẻ một thủ thuật blogspot nhỏ đến bạn, đó là tạo trang báo lỗi 404 chuyên nghiệp cho blogspot . Thủ thuật blogger này thực hiện như thế nào thì bạn cùng Thế Giới Blog tìm hiểu nhé.

Làm thế nào để tùy chỉnh trang lỗi 404?

Chúng ta có thể dễ dàng tùy chỉnh 404 trong blogspot 
Đăng nhập Blog --> Cài đặt --> Tùy chỉnh chuyển hướng (lỗi và chuyển hướng )

Ở đây mình sử dụng CSS và HTML, nếu như có câu hỏi làm sao để tạo ra một trang báo lỗi 404 nhanh nhất? Thì đây đúng là điểu bạn đang cần tìm.

Các tính năng của trang báo lỗi 404 này:

- Full chiều rộng
- Thêm link trang chủ (là một liên kết để độc giả có thể chuyển hướng, nếu như không tìm thấy bài cần tìm)

Tạo trang báo lỗi 404 cho blogger

- Đăng nhập blog -- Mẫu -- Chỉnh sửa HTML 
- Tìm </body> và thêm đoạn code sau vào trước nó

 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <style>
    #error-not-found {
        background: #ff0000;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47KDbk0bOsJv9316wN5SxU_8tvRDREIJ8PzhcQuYbsaPEQwy-fyamRHEtkUq3krgfkANE6M3ACdM-8QVZgG_tW7gFmiFTJ3jBEVsdZU8p-1MkV3EwLirslNZtdpHY9NXma3eVHl0RQVw/s1600/vusteven+loi+404.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAijkhutkZUn1Fpqn4uP5HsdfgI-jBro1AuBgIqpO5E22OkA6xgthQ8ZUzt4rCdvQ4ehOxbdLh64oylD-_Sv__pO7Y8DwvYvWXnPnYy35z5LGyaxYFQegQcORJb3II3sinBpgt2obPbE/s1600/loi+404+blogger+vusteven.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );  
            text-align:center;
            position:fixed;
            top:0px;
            right:0px;
            bottom:0px;
            left:0px;
            padding-top:270px;
            z-index:999999;
    }
    #error-not-found  h1 {
            font-size:640px!important;
            position:absolute;
            font-family:impact,sans serif!important;
            top:70px;
            left:50%;
            letter-spacing: -8px;
            margin-left:-502px!important;
            width:960px;
            z-index:-2;
            color:rgba(0,0,0,.09)!important;
    }
    #error-not-found  h2 {
            font-family:arial,sans-serif;
            text-transform:uppercase;
            font-size:51px;
            line-height:66px!important;
            letter-spacing: -3px;
            color:#fff!important;
            margin:0!important;
            padding:0!important;
    }
    #error-not-found p a,
    #error-not-found p a:visited,
    #error-not-found p a:hover{
            font-family:arial,sans-serif;
            text-transform:uppercase;
            font-size:56px;
            line-height:40px!important;
            border:none;
            font-weight: bold;
            color:rgba(0,0,0,.5)!important;
            margin:0!important;
            padding:0!important;
            text-decoration:none!important;
    }
    </style>
    <div id='error-not-found'>
     <h1>404</h1> <h2>Rất tiếc ....Điều bạn đang muốn tìm </h2>
      <h2>Không thể tìm thấy</h2><br/>
     <p> <a href='#' title='thegioiblogs.blogspot.com'>Về lại trang chủ</a></p>
    </div>
    </b:if>

Bạn thay thế các chữ màu đỏ để cho phù hợp với Site của bạn.

Chúc bạn thành công!


Tags: , ,

Comments[ 0 ]


Đăng nhận xét