Style 404 dạng metro dành cho blogspot

Hôm trước thiết kế weblog có giới thiệu đến các bạn một STYLE 404 ĐẸP VÀ CHUẨN RESPONSIVE DÀNH CHO BLOGGER  . Hôm nay mình sẽ giới thiệu đến các bạn một kiểu trang báo lỗi 404 nữa nhưng là 404 dạng metro. Cách thực hiên rất đơn giản thôi, bạn có thể xem demo tại clip bên dưới.




Bước 1 bạn thao tác giống bước 1 ở STYLE 404 ĐẸP VÀ CHUẨN RESPONSIVE DÀNH CHO BLOGGER

Bước 2: Đặt đoạn code sau lên bên phía trên thẻ đóng </body>

</b:if><b:if cond='data:blog.pageType == &quot;error_page&quot;'>


<style type='text/css'>
#navbar-iframe, .status-msg-wrap, feeds, .feed-links, .Attribution, .date-header { display: none; }
 .loading { background: url(&quot;http://3.bp.blogspot.com/-LdnrbVgFX00/U3OclWLMZkI/AAAAAAAABAc/28BthEiXk1w/s1600/404.jpg&quot;)no-repeat center center fixed  #393939; background-size: cover; z-index:1000; }  .error-wrap.error-wrap-404 { width: 875px; margin: 12% auto 0; color: #fff; text-align: center; }  .error-wrap .metro.big { float: left; width: 340px; height: 340px; margin: 0 10px 10px 0; font-family: &quot;Oswald&quot;; }  .error-wrap.error-wrap-404 .metro.double { float: left; width: 340px; height: 165px; margin: 0 10px 10px 0; font-family: &quot;Oswald&quot;; }  .error-wrap.error-wrap-404 .home { color: #fff; font-size: 70px; text-decoration: none; margin-top: 40px; display: inline-block; }  .error-wrap .metro.double .page-txt { font-family: &quot;Oswald&quot;; font-size: 30px; }  .error-wrap.error-wrap-404 .metro { float: left; }  .error-wrap.error-wrap-404 .metro.big span { padding-top: 130px; }  .error-wrap.error-wrap-404 .terques { background: rgba(75,183,192,0.8); }  .error-wrap.error-wrap-404 .red { background: rgba(232,104,127,0.8); }  .error-wrap.error-wrap-404 .gray { background: rgba(89,88,88,0.5); }  .error-wrap { width: 100%; margin: 12% auto 0; color: #fff; text-align: center; }  .error-wrap .metro { width: 165px; height: 165px; display: inline-block; margin: 0 10px 10px 0; }  .error-wrap .metro span { font-size: 70px; padding-top: 70px; display: inline-block; } .error-wrap  p { font-family: &quot;Oswald&quot;; padding-top: 20px; font-size: 16px; } .error-wrap  p a { color: #48cffe; } .error-wrap .green { background: rgba(142,191,72,0.8); } .error-wrap .yellow { background: rgba(245,193,70,0.8); } .error-wrap .purple { background: rgba(175,94,197,0.8); } @media (min-width: 768px) and (max-width: 979px) { .error-wrap.error-wrap-404 { width: 100%; }  .error-wrap.error-wrap-404 .metro.big { width: 98% !important; } .error-wrap.error-wrap-404 .metro { width: 31.8%;  } .error-wrap.error-wrap-404 .metro.double { height: 165px !important; width: 98% !important; } } @media (max-width: 767px) { .error-wrap.error-wrap-404 { width: 100%; }  .error-wrap.error-wrap-404 .metro.big { width: 98% !important; } .error-wrap.error-wrap-404 .metro { width: 31.2%;  } .error-wrap.error-wrap-404 .metro.double { height: 165px !important; width: 98% !important; } } @media (max-width: 430px) { .error-wrap.error-wrap-404 { width: 98%; }  .error-wrap.error-wrap-404 .metro { width: 31.2%; } .error-wrap.error-wrap-404 .metro.double { height: 120px !important; width: 98% !important; } } @media (max-width: 385px) { .error-wrap.error-wrap-404 { width: 100%; }  .error-wrap.error-wrap-404 .metro.big, .error-wrap.error-wrap-404 .metro.double, .error-wrap.error-wrap-404 .metro { width: 98%; }  .error-wrap.error-wrap-404 .metro.double { height: 165px !important; }  } @media (max-width: 320px) { .error-wrap.error-wrap-404 { width: 100%; }  .error-wrap.error-wrap-404 .metro.big, .error-wrap.error-wrap-404 .metro.double, .error-wrap.error-wrap-404 .metro { width: 98%; } }
</style>


</b:if><b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='error-wrap error-wrap-404'>
<div class='metro big terques'>
<span> OOPS! </span>
</div>
<div class='metro green'>
<span> 4 </span>
</div>
<div class='metro yellow'>
<span> 0 </span>
</div>
<div class='metro purple'>
<span> 4 </span>
</div>
<div class='metro double red'>
<span class='page-txt'> Page Not Found </span>
</div>
<div class='metro gray'>
<a class='home' href='/'>&lt;==
</a>
</div>
</div>
</b:if>

Lưu lại mẫu là xong, chúc bạn thiết kế được một weblog đẹp theo ý của chính bản thân.