TẠO TRANG BÁO LỖI 404 SẮC MÀU TUYỆT ĐẸP CHO BLOGSPOT

Xin chào các bạn , chào mừng các bạn đã quay trở lại Star Dũng Blog. Bài viết này mình sẽ hướng dẫn các bạn TẠO TRANG BÁO LỖI 404 SẮC MÀU TUYỆT ĐẸP CHO BLOGSPOT . Thôi không nói nhiều bắt đầu làm thôi!!!

Demo

CÁC BƯỚC THỰC HIỆN

B1. Truy cập vào giao diện chỉnh sửa HTML của Blogspot.
B2. Tìm thẻ <body> hoặc <body
Copy code sau và dán vào sau thẻ mở đó.

a<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-404'>
<div class='box-404'>404</div>
<span style='font-family:"Roboto", sans-serif; font-size:30px; color: #eee; font-weight:500;text-transform:uppercase'>Không tìm thấy trang mà bạn yêu cầu!</span>
<p style='font-size:20px'>Có thể bạn đã truy cập vào một URL bị hỏng hoặc trang đã bị xóa!</p>
<p><a onclick='history.back(-1)' style='cursor:pointer' title='Quay lại trang trước'><span class='back-to-home'><i class='fa fa-angle-left'/></span></a><a href='/' title='Trở về trang chủ'><span class='back-to-home'><i class='fa fa-home'/></span></a><a href='/lien-he'><span class='back-to-home'><i class='fa fa-comments-o'/> </span></a></p>
</div></div>
<style>::-webkit-scrollbar{display:none}#error-page{background-color:#069999;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;font-family:"Roboto",sans-serif;font-weight:normal;color:#fff;overflow:hidden;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}#error-404{margin:9% auto;overflow:hidden;width:50%;transition:.3s}#error-404 .box-404{color:#eee;font-size:250px;line-height:200px;margin:0 auto 40px;position:relative;font-weight:500}#error-404 h1{text-transform:uppercase;font-weight:400!important;color:#eee}#error-404 p{line-height:1.7em;font-size:18px;font-family:"Roboto",sans-serif;font-weight:400;color:#eee;margin:30px 0}.back-to-home{background:rgba(0,0,0,.05);padding:5px 40px;border-radius:20px;border:1px solid rgba(0,0,0,.07);transition:.3s;color:#fff;margin:0 10px}.back-to-home:hover{background:rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.1)}#error-page{animation:colorBackground 10s infinite;-webkit-animation:colorBackground 10s infinite;-moz-animatio</style>
</b:if>

Code

B3. Lưu mẫu và... thưởng thức thôi!

TỔNG KẾT

Trước khi áp dụng thủ thuật này bạn phải xóa hết các code của trang 404 cũ có trong blog nhé.

Chỉ 3 bước trên thôi chúng ta đã làm được trang báo lỗi 404 tuyệt đẹp rồi.

Nếu gặp lỗi trong quá trình thực hiện thì hãy bình luận bên dưới để được giúp đỡ nhé. Chúc các bạn thành công.

Bài viết của bạn được xem như một đề xuất cho bài viết của chúng tôi. Mẫu bài viết bạn đang chỉnh sửa sẽ được chúng tôi xem xét và update lên blog nếu nó hoàn hảo !

CHỈNH SỬA BÀI VIẾT
----------------------------------------
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle"      style="display:block; text-align:center;"      data-ad-layout="in-article"      data-ad-format="fluid"      data-ad-client="ca-pub-1638718759430999"      data-ad-slot="7561885392"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="separator" style="clear: both; text-align: left;">Xin chào các bạn , chào mừng các bạn đã quay trở lại <a href="http://www.stardungblog.xyz/" target="_blank">Star Dũng Blog</a>. Bài viết này mình sẽ hướng dẫn các bạn <a href="http://www.stardungblog.xyz/2017/11/tao-trang-bao-loi-404-cho-blogspot.html">TẠO TRANG BÁO LỖI 404 SẮC MÀU TUYỆT ĐẸP CHO BLOGSPOT</a> . Thôi không nói nhiều bắt đầu làm thôi!!!</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj28Jpb2KC8KkY3Oq4rXqpwK3jlYxNSn0wLcDVZvZd0xAAZr3GaqGCzJVao57EVkaaWbEZfIwi-EbVUHYk8gvec8iDFH39UDHOB4kIRhkzzIP0jIfZyUDe2Nh0uB4igjsJ30VMuC0co6HiW/s1600/gif.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="608" data-original-width="1328" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj28Jpb2KC8KkY3Oq4rXqpwK3jlYxNSn0wLcDVZvZd0xAAZr3GaqGCzJVao57EVkaaWbEZfIwi-EbVUHYk8gvec8iDFH39UDHOB4kIRhkzzIP0jIfZyUDe2Nh0uB4igjsJ30VMuC0co6HiW/s640/gif.gif" width="640" /></a></div><div style="text-align: center;">Demo</div><h2 style="background-color: white; border-bottom: 1px solid; color: #626492; display: table; font-family: roboto, sans-serif; font-size: 20px; font-stretch: normal; font-weight: 500; letter-spacing: 0.3px; line-height: normal; margin: 20px 0px; padding: 0px 0px 5px; text-transform: uppercase;">CÁC BƯỚC THỰC HIỆN</h2><div><b style="background-color: white; color: #444444; font-family: Roboto, sans-serif; font-size: 16px; text-align: justify;">B1</b><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;">. Truy cập vào giao diện chỉnh sửa HTML của Blogspot.</span><br /><b style="background-color: white; color: #444444; font-family: Roboto, sans-serif; font-size: 16px; text-align: justify;">B2</b><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;">. Tìm thẻ </span><code style="background-color: white; border-radius: 4px; border: 1px solid; color: #66689c; display: inline-block; font-size: 16px; font-stretch: normal; font-weight: 700; line-height: normal; margin: 0px 5px; padding: 0px 10px; position: relative; text-align: justify; transition: all 0.3s; user-select: all;"><body></code><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;"> hoặc </span><code style="background-color: white; border-radius: 4px; border: 1px solid; color: #66689c; display: inline-block; font-size: 16px; font-stretch: normal; font-weight: 700; line-height: normal; margin: 0px 5px; padding: 0px 10px; position: relative; text-align: justify; transition: all 0.3s; user-select: all;"><body</code><br /><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;">Copy code sau và dán vào sau thẻ mở đó.</span></div><div><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;"><br /></span></div><blockquote class="tr_bq" style="background: rgb(243, 243, 243); font-stretch: normal; line-height: 2; margin: 10px 0px; max-height: 400px; overflow: auto; padding: 12px; transition: 0.3s;"><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>a<b:if cond='data:blog.pageType == &quot;error_page&quot;'></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><div id='error-page'></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><div id='error-404'></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><div class='box-404'>404</div></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><span style='font-family:&quot;Roboto&quot;, sans-serif; font-size:30px; color: #eee; font-weight:500;text-transform:uppercase'>Không tìm thấy trang mà bạn yêu cầu!</span></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><p style='font-size:20px'>Có thể bạn đã truy cập vào một URL bị hỏng hoặc trang đã bị xóa!</p></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b>  <p><a onclick='history.back(-1)' style='cursor:pointer' title='Quay lại trang trước'><span class='back-to-home'><i class='fa fa-angle-left'/></span></a><a href='/' title='Trở về trang chủ'><span class='back-to-home'><i class='fa fa-home'/></span></a><a href='/lien-he'><span class='back-to-home'><i class='fa fa-comments-o'/> </span></a></p></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b></div></div></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b><style>::-webkit-scrollbar{display:none}#error-page{background-color:#069999;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;font-family:&quot;Roboto&quot;,sans-serif;font-weight:normal;color:#fff;overflow:hidden;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}#error-404{margin:9% auto;overflow:hidden;width:50%;transition:.3s}#error-404 .box-404{color:#eee;font-size:250px;line-height:200px;margin:0 auto 40px;position:relative;font-weight:500}#error-404 h1{text-transform:uppercase;font-weight:400!important;color:#eee}#error-404 p{line-height:1.7em;font-size:18px;font-family:&quot;Roboto&quot;,sans-serif;font-weight:400;color:#eee;margin:30px 0}.back-to-home{background:rgba(0,0,0,.05);padding:5px 40px;border-radius:20px;border:1px solid rgba(0,0,0,.07);transition:.3s;color:#fff;margin:0 10px}.back-to-home:hover{background:rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.1)}#error-page{animation:colorBackground 10s infinite;-webkit-animation:colorBackground 10s infinite;-moz-animatio</style></b></span></span><br /><span style="color: #444444; font-family: "arial" , "geneva" , sans-serif;"><span style="font-size: 15px;"><b></b:if></b></span></span></blockquote><div style="text-align: center;">Code</div><div style="text-align: left;"><b style="background-color: white; color: #444444; font-family: Roboto, sans-serif; font-size: 16px; text-align: justify;">B3</b><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;">. Lưu mẫu và... thưởng thức thôi!</span> </div><h2 style="background-color: white; border-bottom: 1px solid; color: #626492; display: table; font-family: roboto, sans-serif; font-size: 20px; font-stretch: normal; font-weight: 500; letter-spacing: 0.3px; line-height: normal; margin: 20px 0px; padding: 0px 0px 5px; text-transform: uppercase;">TỔNG KẾT</h2><div><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;">Trước khi áp dụng thủ thuật này bạn phải xóa hết các code của trang 404 cũ có trong blog nhé.</span></div><div><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;">Chỉ 3 bước trên thôi chúng ta đã làm được trang báo lỗi 404 tuyệt đẹp rồi.</span></div><div><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;">Nếu gặp lỗi trong quá trình thực hiện thì hãy bình luận bên dưới để được giúp đỡ nhé. Chúc các bạn thành công.</span><br /><span style="background-color: white; color: #444444; font-family: "roboto" , sans-serif; font-size: 16px; text-align: justify;"><br /></span></div> <br /><div class="addthis_inline_share_toolbox"></div>