Home BLOGGER Code

Tạo Trang Báo Lỗi 404 Bằng CSS với JS Đơn Giản Cho Blogspot

Tác giả : Zaii
Cập Nhật :
Hello anh em, lâu lắm blog Phố Nhỏ chưa có bài thủ thuật blogspot mới nào rồi nhỉ và để bù đắp thì mình sẽ share cho anh em code Trang Báo Lỗi 404 được mình lấy bên CodePen.
​
CÁC BƯỚC THỰC HIỆN :
Bước 1. Truy cập vào giao diện chỉnh sửa HTML của Blogspot.
Bước 2. Dán đoạn code dưới đâysau thẻ <body> hoặc <body
Bước 3. Lưu lại
CSS: 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300);

body {
    background-color: #335B67;
    background: -ms-radial-gradient(ellipse at center,  #335B67 0%, #2C3E50 100%) fixed no-repeat;
    background: -moz-radial-gradient(ellipse at center,  #335B67 0%, #2C3E50 100%) fixed no-repeat;
    background: -o-radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
    background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #335B67), color-stop(1, #2C3E50));
    background: -webkit-radial-gradient(ellipse at center,  #335B67 0%, #2C3E50 100%) fixed no-repeat;
    background: radial-gradient(ellipse at center, #335B67 0%, #2C3E50 100%) fixed no-repeat;
    font-family: &#39;Source Sans Pro&#39;, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0px;
}

::selection {
    background-color: rgba(0,0,0,0.2);
}

::-moz-selection {
    background-color: rgba(0,0,0,0.2);
}
    

a {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    margin-right: 10px;
}

a:last-child { margin-right: 0px; }

a:hover {
    text-shadow: 0px 0px 1px rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,1);
}

#noscript-warning {
    width: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.2);
    font-weight: 300;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

#top-nav, .top-header, .sidebar-area, #footer-wrapper {
    display: none;
}

/* === WRAP === */

#wrap {
    width: 80%;
    max-width: 1400px;
    margin:0 auto;
    height: auto;
    position: relative;
    margin-top: 8%;
    overflow: hidden;

}



/* === MAIN TEXT CONTENT === */

#main-content {
    float: right;
    max-width: 45%;
    color: white;
    font-weight: 300;
    font-size: 18px;
    padding-bottom: 40px;
    line-height: 28px;
}

#main-content h1 {
    margin: 0px;
    font-weight: 400;
    font-size: 42px;
    margin-bottom: 40px;
    line-height: normal;
}



/* === NAVIGATION BUTTONS === */

#navigation { margin-top: 2%; }

#navigation a.navigation {
    display: block;
    float: left;
    background-color: rgba(0,0,0,0.2);
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    height: 41px;
    line-height: 41px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    margin-right: 2%;
    margin-bottom: 2%;
    border-bottom: none;
}

#navigation a.navigation i { line-height: 41px; }

#navigation a.navigation:hover {
    background-color: rgba(26,188,156,0.7);
    border-bottom: none;
}



/* === WORDSEARCH === */

#wordsearch {
    width: 45%;
    float: left;
}

#wordsearch ul {
    margin: 0px;
    padding: 0px;
}

#wordsearch ul li {
    float: left;
    width: 12%;
    background-color: rgba(0,0,0,.2);
    list-style: none;
    margin-right: 0.5%;
    margin-bottom: 0.5%;
    padding: 0;
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    overflow: hidden;
    font-size: 24px;
    font-size: 1.6vw;
    font-weight: 300;
    transition: background-color 0.75s ease;
    -moz-transition: background-color 0.75s ease;
    -webkit-transition: background-color 0.75s ease;
    -o-transition: background-color 0.75s ease;
}

#wordsearch ul li.selected {
    background-color: rgba(26,188,156,0.7);
    color: rgba(255,255,255,1);
    font-weight: 400;
}



/* === SEARCH FORM === */

#search { margin-top: 30px; }

#search input[type=&#39;text&#39;] {
    width: 88%;
    height: 41px;
    padding-left: 15px;
    padding-rigt: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: rgba(0,0,0,0.2);
    border: none;
    outline: none;
    -webkit-appearance: none;
    font-size: 16px;
    font-weight: 300;
    color: white;
    font-family: &#39;Source Sans Pro&#39;, sans-serif;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    border-radius: 0px;
}

#search .input-search {
    width: 10%;
    float: right;
    height: 41px;
    background-color: rgba(0,0,0,0.2);
    outline: none;
    border: none;
    -webkit-appearance: none;
    font-family: &#39;Source Sans Pro&#39;, sans-serif;
    color: white;
    font-weight: 300;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    text-align: center;
}

#search .input-search:hover {
    background-color: rgba(26,188,156,0.7);
}
/* === RESPONSIVE CSS === */
@media all and (max-width: 899px) {
    #wrap { width: 90%; }
}
@media all and (max-width: 799px) {
    #wrap { width: 90%; height: auto; margin-top: 40px; top: 0%; }
    #wordsearch { width: 90%; float: none; margin:0 auto; }
    #wordsearch ul li { font-size: 4vw; }
    #main-content { float: none; width: 90%; max-width: 90%; margin:0 auto; margin-top: 30px; text-align: justify; }
    #main-content h1 { text-align: left; }
    #search input[type=&#39;text&#39;] { width: 84%; }
    #search .input-search { width: 15%; }
}

@media all and (max-width: 499px) {
    #main-content h1 { font-size: 28px; }
}
</style>
  <div id='wrap'>
    <div id='wordsearch'>
      <ul>
        <li>k</li>

        <li>v</li>

        <li>n</li>

        <li>z</li>

        <li>i</li>

        <li>x</li>

        <li>m</li>

        <li>e</li>

        <li>t</li>

        <li>a</li>

        <li>x</li>

        <li>l</li>

        <li class='one'>4</li>

        <li class='two'>0</li>

        <li class='three'>4</li>

        <li>y</li>

        <li>y</li>

        <li>w</li>

        <li>v</li>

        <li>b</li>

        <li>o</li>

        <li>q</li>

        <li>d</li>

        <li>y</li>

        <li>p</li>

        <li>a</li>

        <li class='four'>p</li>

        <li class='five'>a</li>

        <li class='six'>g</li>

        <li class='seven'>e</li>

        <li>v</li>

        <li>j</li>

        <li>a</li>

        <li class='eight'>n</li>

        <li class='nine'>o</li>

        <li class='ten'>t</li>

        <li>s</li>

        <li>c</li>

        <li>e</li>

        <li>w</li>

        <li>v</li>

        <li>x</li>

        <li>e</li>

        <li>p</li>

        <li>c</li>

        <li>f</li>

        <li>h</li>

        <li>q</li>

        <li>e</li>
        <li class='eleven'>f</li>
        <li class='twelve'>o</li>
        <li class='thirteen'>u</li>
        <li class='fourteen'>n</li>
        <li class='fifteen'>d</li>
        <li>s</li>
        <li>w</li>
        <li>q</li>
        <li>v</li>
        <li>o</li>
        <li>s</li>
        <li>m</li>
        <li>v</li>
        <li>f</li>
        <li>u</li>
      </ul>
    </div>
    <div id='main-content'>
      <h1>Lỗi 404 Rồi</h1>
      <p>
Rất tiếc, trang bạn đang tìm kiếm không thể tìm thấy. Nó có thể
      tạm thời không có hoặc không còn tồn tại.</p>
      <p>
Kiểm tra URL bạn đã nhập và thử lại. Ngoài ra, tìm kiếm
      cho bất cứ điều gì là mất tích hoặc có một cái nhìn xung quanh phần còn lại của trang web của chúng tôi.</p>
      <div id='search'>
        <form>
          <input placeholder='Search' type='text'/>
        </form>
      </div>

      <div id='navigation'>
        <a class='navigation' href='/'>Home</a><a class='navigation' href='/p/gioithieu.html'>Thông Tin
        Us</a>
        <a class='navigation' href='https://www.ttitvn.com/p/sitemap.html'>Site Map</a>
        <a class='navigation' href='https://www.ttitvn.com/p/lienhe.html'>Liên Hệ</a>
      </div>
    </div>
  </div>
<script>$(function () {
    var liWidth = $(&quot;li&quot;).css(&quot;width&quot;);
    $(&quot;li&quot;).css(&quot;height&quot;, liWidth);
    $(&quot;li&quot;).css(&quot;lineHeight&quot;, liWidth);
    var totalHeight = $(&quot;#wordsearch&quot;).css(&quot;width&quot;);
    $(&quot;#wordsearch&quot;).css(&quot;height&quot;, totalHeight);
});
causeRepaintsOn = $(&quot;h1, h2, h3, p&quot;);
$(window).resize(function () {
    causeRepaintsOn.css(&quot;z-index&quot;, 1);
});
$(window).on(&#39;resize&#39;, function () {
    var liWidth = $(&quot;.one&quot;).css(&quot;width&quot;);
    $(&quot;li&quot;).css(&quot;height&quot;, liWidth);
    $(&quot;li&quot;).css(&quot;lineHeight&quot;, liWidth);
    var totalHeight = $(&quot;#wordsearch&quot;).css(&quot;width&quot;);
    $(&quot;#wordsearch&quot;).css(&quot;height&quot;, totalHeight);
});



$(function () {
    /* 4 */
    $(this).delay(1500).queue(function () {
        $(&quot;.one&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* 0 */
    .delay(500).queue(function () {
        $(&quot;.two&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* 4 */
    .delay(500).queue(function () {
        $(&quot;.three&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* P */
    .delay(500).queue(function () {
        $(&quot;.four&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* A */
    .delay(500).queue(function () {
        $(&quot;.five&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* G */
    .delay(500).queue(function () {
        $(&quot;.six&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* E */
    .delay(500).queue(function () {
        $(&quot;.seven&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* N */
    .delay(500).queue(function () {
        $(&quot;.eight&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* O */
    .delay(500).queue(function () {
        $(&quot;.nine&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* T */
    .delay(500).queue(function () {
        $(&quot;.ten&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* F */
    .delay(500).queue(function () {
        $(&quot;.eleven&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* O */
    .delay(500).queue(function () {
        $(&quot;.twelve&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* U */
    .delay(500).queue(function () {
        $(&quot;.thirteen&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* N */
    .delay(500).queue(function () {
        $(&quot;.fourteen&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue();
    })
    /* D */
    .delay(500).queue(function () {
        $(&quot;.fifteen&quot;).addClass(&quot;selected&quot;);
        $(this).dequeue()
    });
});
</script>
</b:if>
...
  • Do thiếu hụt kinh phí nên chúng tôi buộc phải chạy quảng cáo để duy trì website. Chúng tôi rất xin lỗi về sự bất tiện này! !
  • Mọi thứ trên website đều là miễn phí.Được Leech Từ Nhiều Nguồn , Nếu Có Vấn Đề Bản Quyền Hãy Liên Hệ Với Chúng Tôi!
  • Tuyệt đối không click spam (click tặc quảng cáo). Hãy là một người sử dụng internet thông minh và có văn hóa! Xin cảm ơn.
BÀI VIẾT CÙNG CHUYÊN MỤC

Chúc mừng, bạn là người đầu tiên!

CÓ THỂ BẠN ĐANG TÌM