Huỳnh Hoài Bảo - Bảo Shady Blog
Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với blog Bảo Shady Blog.
Theo yêu cầu của một bạn gửi đến BSW muốn mình chia sẻ trang báo lỗi mà hiện tại mình đang sử dụng trên blog này (click xem demo), đây là một style trang báo lỗi đẹp và đơn giản do mình thiết kế riêng cho Blogspot và chỉ sử dụng CSS & HTML nên sẽ không làm ảnh hưởng nhiều đến tốc độ tải trang cũng như không bị xung đột code.



Chỉ vài phút nghịch CSS mình đã cho ra một kiểu trang báo lỗi mới với phong cách vô cùng hiện đại và 'quý tộc' hahaa nói quá cho vui, mà mình thấy cũng khá đẹp!
Thôi không linh tinh luyên thuyên nữa, bắt đầu!

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. Tìm thẻ <body> hoặc <body
Copy code sau và dán vào sau thẻ mở đó.
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
body {overflow:hidden!important}
#error-page-bsw{position:relative;display:table;width:100%;height:100vh;margin:0!important;padding:0!important;z-index:999;background:url(https://4.bp.blogspot.com/-Puc43u-sEYM/Wf3Fat9-PCI/AAAAAAAAACk/z4qrDlCMk-M8-28KILqGlRwE5-_B1O6WQCLcBGAs/s1600/background_full_Intro_bacsiwindows-com.jpg) no-repeat center center!important;background-size:cover!important}
#error-page-bsw:before{content: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#error-page-bsw:after{content:&#39;&#39;;z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.error-page-bsw_content{position:relative;z-index:3}
.intro_label h2{font-size:45px;font-weight:700;color:rgba(255,255,255,.85);margin:0 0 .5em;padding:0;font-family:&quot;Roboto Condensed&quot;,sans-serif;text-transform:uppercase}
.intro_label p{text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.btn-error-page {color: rgba(255,255,255,.5)!important; padding: 8px 25px; display: inline-block; margin: 1.5em .5em; border-radius: 50px; text-transform: uppercase; border: 1px solid rgba(255,255,255,.3); font-size: 14px; font-weight: 500;}
.btn-error-page:hover {background:rgba(255,255,255,.15)}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
</style>
<div id='error-page-bsw'>
<div class='meta_'>
<div class='error-page-bsw_content'>
<div class='intro_label'>
<h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/>404 - PAGE NOT FOUND<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p>Lỗi cmnr, sao bạn lạc trôi tới đây được vậy!?</p>
<a class='btn-error-page' href='/contact'>Liên hệ - báo lỗi</a><a class='btn-error-page' href='/'>Về trang chủ</a><a class='btn-error-page' href='#go_back' onclick='goBack()'>Quay lại trang trước</a>
</div>
</div></div>
</div>
<script> function goBack() { window.history.back(); } </script>
</b:if>
Bước 3. 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é, nếu không thích hình ảnh hiện tại thì bạn có thể thay link ảnh màu đỏ thành link ảnh khác (nên chọn ảnh chất lượng cao để ảnh không bị vỡ). À yêu cầu blog phải có font Roboto, Roboto Condensed và Fone Awesome nữa nhé.
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.
Nguồn: Bác Sĩ Windows
18 nhận xét:
  1. Lâu không ghé thăm blog chú nhể ? comment cái nhé

    Trả lờiXóa
    Trả lời
    1. Hình như sáng có vào comment bài viết share temp của bác Hưng á :v

      Xóa
  2. cái CSS tui dùng bên blog để nhưng thánh nào F12 hay Ctrl + U nó sẽ chuyển hướng qua link bản quyền :v không tin bác qua blog tui F12 hoặc Ctrl + U xem :v hihe

    Trả lờiXóa
    Trả lời
    1. Cho tôi xin được không Hưng :v

      Xóa
    2. . Vạy hả Hưng :v
      https://uphinhnhanh.com/images/2017/11/16/image70640.png

      Xóa
    3. Huy về ổ nè :v đi lung tung thế :v

      Xóa
    4. bác cho em xin mail mấy

      Xóa
    5. bác cho em gmail với. cmt nhầm

      Xóa
    6. Bác Hưng xin gmail em thì đây nè [email protected] nha

      Xóa
    7. có chút chuyện muốn nhờ

      Xóa
    8. Bác nhờ em chuyện gì nói đi :v

      Xóa
  3. Đừng quên thằng làm giúp chú cái khung comment này nhá :3

    Trả lờiXóa
    Trả lời
    1. Bác Tính làm hả :v

      Xóa
    2. Thế em cám ơn bác nhé (3)

      Xóa
    3. :v 1k comments rồi có event tri ân gì không :v

      Xóa
1. Chèn ảnh: [img]Link ảnh[/img]
2. Chèn video: [youtube]ID Video[/youtube]
Hướng dẫn lấy ID Video từ Youtube

Ví dụ video có link trực tiếp: https://www.youtube.com/watch?v=BUaLnDL3f-M, ta sẽ lấy BUaLnDL3f-M và thay vào vị trí ID Video ở cú pháp trên.

Nội quy chung Bảo Shady Blog

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Bảo Shady Blog - Life Is Share
- Thành lập: 01/08/2017
- Nội dung: Blog chủ yếu viết về những thủ thuật blog, và các thủ thuật khác. Ngoài ra, blog thi thoảng còn chia sẻ một vài bài viết về đời sống, share ảnh đẹp, tin tức về đời sống...
- Tác giả blog: Huỳnh Hoài Bảo hiện đang là học sinh cấp 2 THCS Lê Thị Cẩm Lệ, Bạc Liêu.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!