×Thông báo: Các liên kết ngoài website trong bài đăng đang gặp lỗi, bạn vui lòng comment ở bài đăng để thông báo cho Admin và team fix. Team đang cố gắng fix từng ngày

Admin đang tạo một form khảo sát về nội dung bạn mong muốn admin làm, click tại đây để tham gia

Quảng cáo

Home
SEO

Cách tạo và chuyển hướng trang chính sang trang 403 cho Blogspot 2020

HHNguyen
HHNguyen Đăng vào: 25 Jun, 2020 8:57 PM 0 Nhận xét

Cập nhật vào: 12 May, 2021
Change another language

Đôi lúc trang web của bạn, hoặc của mình bị lỗi, trục trặc gì đó hoặc có gì đó cần tối ưu mà muốn mọi người không thể xem nội dung trong web và load trang web chính sang trang thông báo là trang đang bảo trì ( đó gọi là trang 403 ). Việc tạo trang đó giúp chúng ta có thời gian để bảo trì website và giúp thông báo cho độc giả của bạn biết rằng website của bạn đang bảo trì và sẽ mở lại vào khoảng thời gian nào đó



Đặc biệt là những trang được tạo bằng mã nguồn HTML 5 (Blogspot) rất khó để có thể dựng lên được 1 trang như thế và chuyển hướng,... vì mã nguồn HTML 5 cần bạn phải hiểu biết một kiến thức nhất định về HTML, CSS, Javascript,... Chính vì thế nếu bạn là lập trình viên thì có thể tham khảo thêm cách để có thể tạo trang 403 và chuyển hướng của mình. Và ở bài viết này mình sẽ hướng dẫn cho các bạn cách để tạo trang 403 và chuyển hướng sang trang đó trên nền tảng viết blog Blogspot ( Blogger)

Cách làm như sau : 


Bước 1 : Tạo blog mới và đặt tên miền

Bạn tạo 1 blog mới và đặt tên miền, nếu như chưa biết cách tạo và đặt tên miền, bạn có thể xem video sau :


Bước 2 : Chỉnh sửa HTML và lấy template trắng - chỉnh sửa trang 403

Nếu bạn đã làm thành công bước trên thì bước tiếp theo để lấy template trắng do mình chia sẻ, bạn có thể vào link sau để tải template trắng nhé 😊

Bước 3 : Lần lượt thêm các code sau...

Template trắng bạn tải về mình đã có chú thích 1 vài cái trong đó để bạn nhận biết sơ lược. 

Đầu tiên, bạn thay lại thẻ <body> thành thẻ <body class='loading'>, thẻ này thường được nằm ở giữa template trắng của mình, bạn bấm tổ hợp phím Ctrl + F rồi gõ từ tìm kiếm cho nhanh

Tiếp theo thêm đoan code dưới vào trong cặp thẻ <body class='loading'></body> 

<h1>403</h1>
  <h2>Trang đang bảo trì, bạn vui lòng quay lại sau nhé <b>:)</b></h2>
  <div class='gears'>
    <div class='gear one'>
      <div class='bar'/>
      <div class='bar'/>
      <div class='bar'/>
    </div>
    <div class='gear two'>
      <div class='bar'/>
      <div class='bar'/>
      <div class='bar'/>
    </div>
    <div class='gear three'>
      <div class='bar'/>
      <div class='bar'/>
      <div class='bar'/>
    </div>
  </div>
  <script src='https://code.jquery.com/jquery-1.10.2.js'/>
  <script src='js/main.js' type='text/javascript'/>





Đoạn code trên là đoạn code tham khảo, nếu biết về code bạn có thể chính sửa thêm...



Tiếp theo, chèn đoạn CSS bên dưới vào trong cặp thẻ <b:skin><![CDATA[/*   ]]></b:skin> 




/**/
:root {
  --main-color: #66CCFF;
  --stroke-color: black;

}
/**/
body {
  background: var(--main-color);
}
h1 {
  margin: 100px auto 0 auto;
  color: var(--stroke-color);
  font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
  font-size: 10rem; line-height: 10rem;
  font-weight: 200;
  text-align: center;
}
h2 {
  margin: 20px auto 30px auto;
  font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
  font-size: 1.5rem;
  font-weight: 200;
  text-align: center;
}
h1, h2 {
  -webkit-transition: opacity 0.5s linear, margin-top 0.5s linear; /* Safari */
  transition: opacity 0.5s linear, margin-top 0.5s linear;
}
.loading h1, .loading h2 {
  margin-top: 0px;
  opacity: 0;
}
.gears {
  position: relative;
  margin: 0 auto;
  width: auto; height: 0;
}
.gear {
  position: relative;
  z-index: 0;
  width: 120px; height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--stroke-color);
}
.gear:before{
  position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;
  z-index: 2;
  content: "";
  border-radius: 50%;
  background: var(--main-color);
}
.gear:after {
  position: absolute; left: 25px; top: 25px;
  z-index: 3;
  content: "";
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 5px solid var(--stroke-color);
  box-sizing: border-box;
  background: var(--main-color);
}
.gear.one {
  left: -130px;
}
.gear.two {
  top: -75px;
}
.gear.three {
  top: -235px;
  left: 130px;
}
.gear .bar {
  position: absolute; left: -15px; top: 50%;
  z-index: 0;
  width: 150px; height: 30px;
  margin-top: -15px;
  border-radius: 5px;
  background: var(--stroke-color);
}
.gear .bar:before {
  position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;
  z-index: 1;
  content: "";
  border-radius: 2px;
  background: var(--main-color);
}
.gear .bar:nth-child(2) {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
}
.gear .bar:nth-child(3) {
  transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
}
@-webkit-keyframes clockwise {
  0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg);}
}
@-webkit-keyframes anticlockwise {
  0% { -webkit-transform: rotate(360deg);}
  100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes clockwiseError {
  0% { -webkit-transform: rotate(0deg);}
  20% { -webkit-transform: rotate(30deg);}
  40% { -webkit-transform: rotate(25deg);}
  60% { -webkit-transform: rotate(30deg);}
  100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes anticlockwiseErrorStop {
  0% { -webkit-transform: rotate(0deg);}
  20% { -webkit-transform: rotate(-30deg);}
  60% { -webkit-transform: rotate(-30deg);}
  100% { -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes anticlockwiseError {
  0% { -webkit-transform: rotate(0deg);}
  20% { -webkit-transform: rotate(-30deg);}
  40% { -webkit-transform: rotate(-25deg);}
  60% { -webkit-transform: rotate(-30deg);}
  100% { -webkit-transform: rotate(0deg);}
}
.gear.one {
  -webkit-animation: anticlockwiseErrorStop 2s linear infinite;
}
.gear.two {
  -webkit-animation: anticlockwiseError 2s linear infinite;
}
.gear.three {
  -webkit-animation: clockwiseError 2s linear infinite;
}
.loading .gear.one, .loading .gear.three {
  -webkit-animation: clockwise 3s linear infinite;
}
.loading .gear.two {
  -webkit-animation: anticlockwise 3s linear infinite;
}







Tiếp theo chèn đoạn Javascript vào trước thẻ </body>



<script>//<![CDATA[
    $(function() {
  setTimeout(function(){
    $('body').removeClass('loading');
  }, 1000);
});
      //]]></script>




Quay lại trang chính bạn muốn bảo trì, vào mục chỉnh sửa Chủ đề ---> Dấu 3 chấm dọc ---> Chỉnh sửa HTML để thêm đoạn Javascript bên dưới vào trước thẻ </head>



<script>
window.location.replace("https://ten-mien-403-cua-ban.blogspot.com");
</script>








Link demo tại đây



Chỉ bấy nhiêu đó bước thôi mà bạn đã có thể tạo trang 403 rồi, thật đơn giản phải không ? Nếu thấy hay thì hãy share bài viết này cho những người bạn của bạn biết nhé 😊



Mong bạn làm được ❤️



Writer - 2020


















DMCA.com Protection Status








Đề xuất




















































Comments







Bạn chỉ có thể bình luận khi đăng nhập tài khoản Google, hãy bình luận có văn hóa và liên quan đến nội dung bài viết. Mọi bình luận đều được kiểm duyệt. 


Các liên kết chỉ có thể xuất bản nếu phù hợp với nội dung bài viết hoặc đã được cho phép.