Tạo trang báo lỗi 404 hỗ trợ giao diện mobile cho blogspot

Tạo trang báo lỗi 404 hỗ trợ giao diện mobile cho blogspot
Trang báo lỗi 404 tác dụng của nó thế nào chắc ai cũng đều biết.Đối với các blogspot không chơi quảng cáo adsense của google thì vấn đề này không cần quan tâm lắm nhưng với blogspot có chơi google adsense thì vấn đề trang báo lỗi 404 nên cần quan tâm.

Mặc định của trang báo lỗi 404 là khi khách truy cập vào trang không tồn tại trên blogspot do đã bị xóa nó sẽ xuất hiện một trang không có nội dung với dòng chữ không tìm thấy bài viết trên blog này (đại loại thế) và với đầy đủ phần header,sidebar và footer...

Với blogspot chơi quảng cáo adsense thì header và sidebar là nơi đặt mã quảng cáo do vậy google sẽ cảnh báo bạn vi phạm nguyên tắc:
- Đặt mã quảng cáo trên trang không có nội dung.

Với cách tạo trang báo lỗi 404 TẠI ĐÂY
Có một nhược đểm là:
Sau khi cài đặt qua biến động thời gian của blogger ta vào kiểm tra thì code ta đặt nó không cánh mà bay như vậy trang báo lỗi lại trở về mặc định.

Khắc phục điều này ta cần cài code trực tiếp vào trong mẫu như vậy nó chẳng bay đi đâu được.Nhưng đã cài trong mẫu thì cần code gọn nhẹ đơn giản không làm cồng kềnh HTML trong mẫu.
Và sau đây chia sẻ cách tạo trang báo lỗi 404 hỗ trợ giao diện mobile cho blogspot rất đơn giản, thực dụng và không bao giờ phải lo bị mất,và không còn lo ăn gạch của google adsense.

Xem thử:

DEMO

Các bước tiến hành

Bạn vào chỉnh sửa mấu vad dán toàn bộ code sau vào trước thẻ </body> rồi lưu lại

MẪU 1

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>   
<style>
.fullpage {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 9999;
background:#fa4949;color:#fff;}
.container404{margin:8% auto 0 auto;max-width:768px;min-width:200px;line-height:normal;font-size:16px;backface-visibility:hidden;transition:all .3s}.boxi404 hr{background:transparent;display:block;border:none;border-bottom:4px solid rgba(255,255,255,.3)}.boxi404{padding:20px;font-size:110%;color:#fff;border-radius:5px 5px 0 0}.boxi404 h2,.boxi404 h3{color:#fff;display:block;font-weight:700;font-size:2.6rem;text-transform:uppercase}.boxi404 h2{position:absolute;font-size:20rem;color:rgba(255,255,255,.3);transform:rotate(-45deg);right:3%;bottom:8%}.boxi404 p{display:block;margin:10px 0}.boxi404 ul li{margin:0 0 8px 20px;list-style:initial;list-style-type:square}.boxi404 ul li a{color:#ff0}.boxi404 ul li a:hover{color:#222;text-decoration:underline}.copyright404{display:block;margin:auto;font-weight:normal;max-width:768px;min-width:200px;padding:0 20px}.copyright404 a{color:#ddd}.copyright404 a:hover{color:#fff}::-webkit-scrollbar{display:none}@media screen and (max-width:1024px){.boxi404 h2{font-size:10rem}.container404{margin:4% auto 0 auto}}@media screen and (max-width:640px){.boxi404 h3{font-size:1.6rem}.boxi404 h2{display:none}}
</style>
<div class="fullpage"><div class='container404'> <div class='boxi404'> <h2> 404 </h2> <h3> Không thể tìm thấy trang </h3> <hr/> <p> Trang bạn đang tìm kiếm có thể đã bị xóa, đổi tên hoặc tạm thời không có </p><p> Hãy thử các cách sau : </p><ul> <li> Nếu bạn gõ địa chỉ trang trên <strong> Thanh địa chỉ </strong> , đảm bảo rằng nó hoàn toàn chính xác. </li><li> Click <strong> <a expr:href='data:blog.homepageUrl'> Vào đây </a> </strong> Để trở lại trang chủ của chúng tôi. </li><li> Nếu bạn được liên kết với trang này, hãy liên hệ với quản trị viên và thông báo cho họ về vấn đề này. </li></ul> </div><div class='copyright404'> &#169; 2012 <a expr:href='data:blog.homepageUrl'> <data:blog.title/> </a> . All Rights Reserved. </div></div></div>
</b:if>

MẪU 2

Tạo trang báo lỗi 404 hỗ trợ giao diện mobile cho blogspot

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>/*<![CDATA[*/
*{margin:0;padding:0}
body{line-height:normal;font-family:Roboto,sans-serif;background:url(https://2.bp.blogspot.com/-UhauX6gXwkM/W7K1v9C6XCI/AAAAAAAACiY/p7qtg6EK5Zs-VAmyMeyg2W2oTPJpFzjdgCLcBGAs/s1600/404.jpg)no-repeat center 0;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;background-attachment:fixed}
.hh-404-row{width:65%;margin:0 auto}
.hh-404-nav{margin-top:3em}
.hh-404-nav ul{text-align:center}
.hh-404-nav ul li{display:inline-block;margin:0 1.2em}
.hh-404-nav ul li a{color:#fff;font-size:1em;text-decoration:none;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;transition:0.5s all}
.hh-404-nav ul li a:hover{color:#fbb034}
.hh-404-errortext{padding-top:4em;text-align:center}
.hh-404-errortext h1{font-family:Roboto,sans-serif;font-size:1.2em;color:#fff;font-weight:bold;line-height:1.8em}
p.hh-404-text{font-size:1em;color:#fff;line-height:1.8em;font-weight:400;width:65%;margin:1.5em auto 2.5em}
p.hh-404-text a{color:#fbb034;text-decoration:none}
p.hh-404-text a:hover{color:#ffffff}
.hh-404-search input[type="text"]{width:50%;padding:0.8em 1.5em;font-size:1em;color:#fff;outline:none;border:2px solid #fbb034;background:none;border-radius:50px;-webkit-appearance:none;-webkit-transition:0.5s all;-moz-transition:0.5s all;transition:0.5s all}
.hh-404-search input[type="submit"]{font-family:Roboto,sans-serif;letter-spacing:.02rem;outline:none;box-shadow:none;text-transform:uppercase;font-weight:bold;background:transparent;border:2px solid #fbb034;padding:.8em 2em;color:#fff;cursor:pointer;border-radius:30px;font-size:15px;margin-left:0.3em;-webkit-transition:0.5s all;-moz-transition:0.5s all;transition:0.5s all}
.hh-404-search input[type="submit"]:hover{color:#fff;background:#fbb034}
::-webkit-input-placeholder{color:#fff!important}
:-moz-placeholder{color:#fff!important}
::-moz-placeholder{color:#fff!important}
:-ms-input-placeholder{color:#fff!important}
.hh-404-errortext h2{font-family:Roboto,sans-serif;font-weight:bold;font-size:14em;letter-spacing:20px;color:#fff}
.hh-404-errortext span{color:#fbb034}
@media(max-width:1366px){p.hh-404-text{width:75%}}
@media(max-width:1080px){.hh-404-row{width:75%}}
@media(max-width:991px){p.hh-404-text{width:85%}}
@media(max-width:900px){.hh-404-row{width:85%}.hh-404-errortext{padding-top:5em;text-align:center}.hh-404-nav ul li{margin:0 1em}p.hh-404-text{width:95%}}
@media(max-width:667px){.hh-404-nav ul li{margin:0 0.5em}.hh-404-errortext h1{font-size:1em}p.hh-404-text{width:100%;line-height:2em}.hh-404-errortext h2{font-size:12em}}
@media(max-width:480px){.hh-404-nav{float:none;text-align:center}.hh-404-nav{margin-top:1.5em}.hh-404-nav ul li a{font-size:0.9em}.hh-404-nav ul li{margin:0 1em}.hh-404-errortext h1{font-size:0.9em}.hh-404-search input[type="text"],.hh-404-search input[type="submit"]{font-size:0.9em}}
@media(max-width:414px){.hh-404-errortext h2{font-size:9em}.hh-404-errortext{padding-top:2em}.hh-404-search input[type="text"]{width:80%;margin-bottom:1em}}
@media(max-width:384px){.hh-404-search input[type="text"]{width:85%}.hh-404-search input[type="submit"]{margin:0 0 0 0;padding:.7em 2em}.hh-404-row{width:87%}.hh-404-errortext{padding-top:4em}.hh-404-errortext h2{letter-spacing:10px}}
@media(max-width:320px){.hh-404-nav ul li a{font-size:0.85em}.hh-404-nav ul li{margin:0 0.6em}p.hh-404-text{margin:0.8em auto}.hh-404-nav{margin-top:1em}.hh-404-search input[type="submit"]{padding:.6em 2em}.hh-404-errortext h2{font-size:7em}}
/*]]>*/
</style>
<div class='hh-404-main'><div class='hh-404-row'><div class='hh-404-errortext'><h2>4<span>0</span>4</h2><h1>Sorry ! The page you were looking for could not be found</h1><p class='hh-404-text'>You have been clicked on a link that can not be found. Please check the url or go to <a expr:href='data:blog.homepageUrl'>Home page</a> or try to search something here</p><div class='hh-404-search'><form action='/search'><input id='search' name='q' placeholder='Type to search...' required='' type='text' />
<input type='submit' value='Search' />
<input name='max-results' type='hidden' value='9' /></form></div><div class='hh-404-nav'><ul><li><a expr:href='data:blog.homepageUrl'>Home</a></li><li><a href='#'>About</a></li><li><a href='#'>Contact</a></li><li><a href='#'>Sitemap</a></li></ul></div></div></div></div>
</b:if>

Code này trên tinh thần:
- Gọn nhẹ
- Thực dụng
- Chống ăn gạch của google.

Xem thêm:
Tự động chuyển hướng trang 404 về trang chủ
Thủ thuật blogspot - Tdb Blogspot
Facebook Comments
Blogger Comments