Tạo trang báo lỗi Error 404 đẹp cho Blogger/Blogspot
4 tháng trước
Khi bạn truy cập vào một địa chỉ, một đường dẫn của một website hay một blog nào đó mà đường dẫn đó không còn tồn tại hoặc đả bị xóa thì bạn sẽ được đưa đến trang thông báo lỗi 404 Page Not Found, nó nhằm thông tin cho bạn rằng địa chỉ mà bạn đang truy cập hiện không còn tồn tại hoặc đả bị tác giả xóa. Nay xin chia sẽ cho bạn một giao diện thông báo lỗi 404 đơn giản và đẹp mắt cho blog khi bạn sử dụng blogspot
- Có nhiều cách để tạo trang thông báo lỗi cho Blogspot, ở đây ta sử dụng biểu thức điều kiện trong blogspot để tạo, nó có cấu trúc đơn giản như sau:
- Bước 2: Sao chép mã dưới đây và đặt nó ngay dưới <body>
Xem thêm: Blogger 404 Redirection - Chuyển hướng trang báo lỗi 404 cho BloggerNếu bạn thích giao diện thông báo lỗi 404 như trên, bạn có thể cài đặt nó cho blogspot của bạn bằng cách dưới đây.
- Có nhiều cách để tạo trang thông báo lỗi cho Blogspot, ở đây ta sử dụng biểu thức điều kiện trong blogspot để tạo, nó có cấu trúc đơn giản như sau:
1 | <body> |
2 | <b:if cond='data:blog.pageType != "error_page"'> |
3 | //Thành phần chính Blog của bạn |
4 | </b:if> |
5 | <b:if cond='data:blog.pageType == "error_page"'> |
6 | //Nội dung thông báo lỗi 404 của bạn |
7 | </b:if> |
8 | </body> |
Xem thêm: Hướng dẫn cách sử dụng Biểu thức điều kiện if- else trong Blogspot- Bước 1: Chèn đoạn css dưới đây vào template của bạn bằng cách vào Mẫu >> Chỉnh sửa HTML và chèn nó sau </b:skin>
| <b:if cond='data:blog.pageType == "error_page"'> |
| #error-page{background-color:#142D3A;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999} |
| #error-inner{margin:11% auto} |
| .box-404{position:relative;font-weight:bold;width:700px;height:210px;color:#fff;margin:0 auto;} |
| #error-inner h2{text-transform:uppercase;color:#fff;font-size:50px;margin:0auto 20px;font-family:monospace;background-color:#34647E;margin:5px} |
| #error-inner h1{text-transform:uppercase;color:#FFB616;padding-top:10px} |
| #error-inner p{line-height:0.7em;font-size:15px;color:#999} |
| #social-icons li{float:left;width:147px;height:147px;margin:10px 6px 6px0;padding:0 0 0 0;border-bottom:none;list-style:none} |
| #social-icons li a{line-height:1px;display:block} |
| #social-icons li a:hover img{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8} |
| #social-icons li a span{display:none!important} |
| </b:if> |
<b:if cond='data:blog.pageType != "error_page"'>- Bước 3: Cuối cùng, copy đoạn HTML dưới đây và đặt nó trước thẻ đóng </body>
</b:if> <b:if cond='data:blog.pageType == "error_page"'> <div id='error-page'> <div id='error-inner'> <h2>404: KHÔNG TÌM THẤY TRANG</h2> <h1>RẤT TIẾT, TRANG KHÔNG TÌM THẤY</h1> <p>Trang bạn đang tìm không tồn tại, hoặc có thể đả bị xóa<br/><br/> Quay lại trang chủ <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> hoặc liên hệ với tôi <a href="http://nhatchanh.info/p/contact-me.html" title="Liên hệ với tôi"><span style="color: blue;">tại đây</span></a></p> <div class='box-404'> <ul id='social-icons'> <li class='rss-icon'><a href='http://feeds.feedburner.com/nhatchanh' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTs8amMmXVzFe-qcR-UYBn60rzuE_6EUzI01-O70x_3HvBQ-yGT0cGAXBdkKLNrenWlViDW8zBpg2Nd0QPNzm9lCsRNZHBGB-cvx05zj755-AIVJQ64fqg2g_pW0MGKG924T4gOre3iZZx/s1600/rss.png' width='147'/></a></li> <li class='twitter-icon'><a href='http://www.twitter.com/tv0656m006' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_izgNA_khyphenhyphen34bJ_o8B4XiBmfvNuc2xjpeKVoJYlAiNYmdsDt5zlaU7Gu_dP9DdmqvEfuw5pOy0AYL6tSSNaQ-g0cnZ6gsRjUIDJkGn0kaNhX-Qt5s25jnkkcu573OA_UY5fdbI0G5Nhw/s1600/twitter.png' width='147'/></a></li> <li class='facebook-icon'><a href='http://www.facebook.com/pnchanh' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs8ONJcxYeaWuWdio7tgafnxe-8F8-WYLAod-cUrHmaQxF69mDyV4ddy-cg7gPMXdDmKK8gLoESm6rxeFzA3zL8OwDbkYi6ytAf431ebLD5a6hpi6qDSSPNc7xr573TDdiFFzsJGQZ5-T/s1600/facebook.png' width='147'/></a></li> <li class='google-icon'><a href='https://plus.google.com/113291429631989826321' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnYEPMsaOmS6nik7nlJHpI4-PNHGN54QX6JZgL8i4WUMkXBh6JuHWNUSMoFp83Ftwrmhg-4eHoM4hT2dMoQFXG1j6yrfR_aOxXvShG38ICg38xVw38-OHuyv3fS2T_jddo25FGDvZEJkE0/s1600/google.png' width='147'/></a></li> </ul> </div> </div></div> </b:if>- Bước 4: Là bước khó khăn và quan trọng nhất là Lưu lại và kiểm tra kết quả :D Chúc thành công!
Kiểm tra kết quả bằng cách gõ vào thanh địa chỉ một đường dẫn không đúng
VD: http://địa-chỉ-blog-của-bạn/abcdefghizklmn và nếu xuất hiện trang báo lỗi 404 là bạn thành công
VD: http://địa-chỉ-blog-của-bạn/abcdefghizklmn và nếu xuất hiện trang báo lỗi 404 là bạn thành công
Sưu tầm
No comments:
Post a Comment