Tạo Trang 404 Tuyệt Đẹp Cho Blogger

đã xuất bản

Mở đầu

Xin chào anh em ! Cũng khá lâu rồi không ra bài thủ thuật blogspot nhỉ :P tại dạo này bận nhiều việc với lại không có ý tưởng để viết bài cho anh em nên mình đã dạo một vòng công viên codepen.io và thấy có 1 style rất đẹp và mình đã mod lại sau đó sử dụng trực tiếp trên blog mình và thấy nó khá chất nên đem share cho anh em :P.

Cách làm

Đầu tiên bạn truy cập vào trang quản trị blogger bằng đường dẫn https://www.blogger.com, sau đó bạn tiến hành vào phần chủ đề trên thanh menu bên trái.
Ở đây bạn sẽ thấy một giao diện hiện ra, bạn tiến hành vào chế độ chỉnh sửa HTML bằng cách nhất vào Chỉnh Sửa HTML dưới phần Live on Blog.
Sau khi vào chế độ chỉnh sửa HTML xong kế tiếp bạn nhấn tổ hợp phím Ctrl + F và tìm từ khóa <body>, sau đó đặt toàn bộ code bên dưới vào thẻ vừa tìm được.
<b:if cond='data:blog.pageType == &quot;error_page&quot;'> 
<style>
#error-page {
background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
.tv{
  display:inline-block;
  vertical-align:bottom;
  margin:10px 300px 20px;
}
.tv-60 .tv-frame{
  width:27.1em;
  height:15.7em;
}
.tv-frame{
  background:#222;
  border:1px solid #222;
  width:100%;
  height:100%;
  padding:5px;
}
.tv-viewport{
  font-size:15px;
  background:#444;
  background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #2c2c2c 46%, #2b2b2b 53%, #333333 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4c4c4c), color-stop(46%,#2c2c2c), color-stop(53%,#2b2b2b), color-stop(100%,#333333)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #4c4c4c 0%,#2c2c2c 46%,#2b2b2b 53%,#333333 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #4c4c4c 0%,#2c2c2c 46%,#2b2b2b 53%,#333333 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #4c4c4c 0%,#2c2c2c 46%,#2b2b2b 53%,#333333 100%); /* IE10+ */
background: linear-gradient(135deg, #4c4c4c 0%,#2c2c2c 46%,#2b2b2b 53%,#333333 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#4c4c4c&#39;, endColorstr=&#39;#333333&#39;,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  width:100%;
  height:100%;

  position:relative;
}
.tv-viewport-size{
  color:#f8f8f8;
  text-align:center;
  width:100%;
  margin-top:10px;
  display:block;
  height:20px;
  position:absolute;
  font-size:1.1em;
  font-weight:bolder;
}
.tv-stand{
  width:50%;
  height:.6em;
  background:#333;
  margin:0 auto;
}
.eror{color:#00a5ad;
font-size:100px;
animation-name: blinker;
    animation-duration: 1.75s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1.75s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
span[class*=&quot;l-&quot;] {
height: 4px; width: 4px;
background: #00909e;
display: inline-block;
margin: 12px 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
-ms-animation: loader 4s infinite;
-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-ms-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;
}
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
@-ms-keyframes loader {
0% {-ms-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-ms-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}
}
.pesan-eror{padding-left:3px;
width:80%;
margin:10px auto 40px;
background:#54A5C5;
color:#FFFFFF;
font-size:15px;
border-radius:1%;
position:relative;
text-alignt:justify;
padding:5px;
}
.pesan-eror::after {
content:&quot; &quot;;
width:0;
height:0;
bottom:-17px;
border-color:#54A5C5 transparent transparent;
border-style:solid;
border-width:20px 20px 0;
position:absolute;
left:5%;
}
.ghost {margin-left:15%;
background-image: -webkit-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -webkit-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -webkit-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-image: -moz-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -moz-linear-gradient(315deg, transparent 50%, #2C2C2C 50%), -moz-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-image: -o-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -o-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -o-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-image: -ms-linear-gradient(45deg, transparent 50%, #2C2C2C 50%), -ms-linear-gradient(135deg, transparent 50%, #2C2C2C 50%), -ms-linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-image: linear-gradient(45deg, transparent 50%, #2C2C2C 50%), linear-gradient(315deg, transparent 50%, #2C2C2C 50%), linear-gradient(#2C2C2C 50%, #2C2C2C 50%);
background-position: 50% 100%, 50% 100%, 50% 0;
background-repeat: repeat-x;
-webkit-background-size: 1em 1em;
-moz-background-size: 1em 1em;
background-size: 1em 1em;
position: relative;
        margin-top: 1.5em;
height: 1.5em;
width: 3em;
  animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s; -webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes floating {
0% {
transform: translateY(0%); }
50% {
transform: translateY(8%); } 100% {
transform: translateY(0%);
} }
@-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%); }
50% {
-webkit-transform: translateY(8%); } 100% {
-webkit-transform: translateY(0%);
} }
.ghost:after,.ghost:before {
background-image: -webkit-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -moz-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -o-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: -ms-radial-gradient(transparent 35%, #2C2C2C 35%);
background-image: radial-gradient(transparent 35%, #2C2C2C 35%);
border-top: .5em solid #2C2C2C;
content: &#39;&#39;;
height: 1em;
position: absolute;
top: -1.5em;
width: 1em;
}
.ghost:after {
background-position: 75% 75%;
border-left: .5em solid #2C2C2C;
border-radius: 3em 0 0 0;
left: 0;
}
.ghost:before {
background-position: 0% 100%;
border-right: .5em solid #2C2C2C;
border-radius: 0 3em 0 0;
right: 0;
}
.wrapper{
  width: 150px;
  height: 150px;
  position: absolute;
  top: calc(30% - 75px);
  left: calc(80% - 75px);
}
.cloud{
  position: absolute;
  bottom: 12px;
  left: 8px;
  z-index: 2;
  opacity: 0;
  animation: cloud 10s 0s linear infinite;
}
.cloud .cloud1:not(.c_shadow) ul li{
  animation: cloudi 10s 0.1s linear infinite;
}
.cloud .cloud1:not(.c_shadow):before{
  animation: cloudi 10s 0s linear infinite;
}
.cloud_s{
  position: absolute;
  bottom: 70px;
  left: 150px;
  transform: scale(0.7,0.7) matrix(-1, 0, 0, 1, 0, 0);
  z-index: 1;
  opacity: 0;
  animation: cloud_s 10s 0s linear infinite;
}
.cloud_s .c_shadow{
  transform: scale(1.02,1.02);
}
.cloud_vs{
  position: absolute;
  bottom: 90px;
  left: 30px;
  transform: scale(0.5,0.5);
  z-index: 0;
  opacity: 0;
  animation: cloud_vs 10s 0s linear infinite;
}
.c_shadow{
  z-index: 4 !important;
  left: -5px;
  bottom: -3px !important;
}
.c_shadow:before{
  background: #33495f !important;
}
.c_shadow ul li{
  width: 60px !important;
  height: 60px !important;
  background: #33495f !important;
  float: left;
  position: absolute;
  bottom: -2px !important;
  border-radius: 360px;
}
.c_shadow ul li:nth-child(2){
  width: 80px !important;
  height: 80px !important;
  background: #33495f !important;
  float: left;
  border-radius: 360px;
  position: absolute;
  bottom: 16px !important;
  left: 25px !important;
}
.c_shadow ul li:nth-child(3){
  width: 70px !important;
  height: 70px !important;
  background: #33495f !important;
  float: left;
  border-radius: 360px;
  position: absolute;
  bottom: 6px !important;
  left: 60px !important;
}
.c_shadow ul li:last-child{
  width: 60px !important;
  height: 60px !important;
  background: #33495f !important;
  float: left;
  border-radius: 360px;
  position: absolute;
  bottom: 0px;
  left: 90px;
}

.cloud1{
  position: absolute;
  bottom: 0px;
  z-index: 5;
}
.cloud1:before{
  content: &#39;&#39;;
  position: absolute;
  bottom: 0px;
  left: 28px;
  width: 90px;
  height: 20px;
  background: #fff;
}
.cloud1 ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.cloud1 ul li{
  width: 50px;
  height: 50px;
  background: #fff;
  float: left;
  border-radius: 360px;
}
.cloud1 ul li:nth-child(2){
  width: 70px;
  height: 70px;
  background: #fff;
  float: left;
  border-radius: 360px;
  position: absolute;
  bottom: 18px;
  left: 25px;
}
.cloud1 ul li:nth-child(3){
  width: 60px;
  height: 60px;
  background: #fff;
  float: left;
  border-radius: 360px;
  position: absolute;
  bottom: 8px;
  left: 60px;
}
.cloud1 ul li:last-child{
  width: 50px;
  height: 50px;
  background: #fff;
  float: left;
  border-radius: 360px;
  position: absolute;
  bottom: 0px;
  left: 90px;
}
.thunder{
  position: absolute;
  bottom: 100px;
  left: 65px;
  width: 12px;
  height: 12px;
  background: #f9db62;
  transform: skew(-25deg);
  opacity: 0;
  animation: thunder 10s 0s linear infinite;
}
.thunder:before{
  content: &#39;&#39;;
  position: absolute;
  top: 11px;
  left: 0px;
  width: 25px;
  height: 8px;
  background: #f9db62;
}
.thunder:after{
  content: &#39;&#39;;
  position: absolute;
  width: 0;
  height: 0;
  top: 18px;
  right: -14px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-top: 20px solid #f9db62;
  transform: skew(5deg);
}
@keyframes cloud{
  0%{
    transform: scale(0.8);
    left: 120px;
    bottom: 35px;
    opacity: 0;
  }
  2%{
    opacity: 1;
  }
  3.5%{
    bottom: 35px;
    left: 10px;
    opacity: 1;
  }
  16%{
    transform: scale(0.8);
  }
  18%{
    transform: scale(0.95);
  }
  19%{
    transform: scale(0.9);
  }
  48%{
    opacity: 1;
    bottom: 35px;
  }
  50%{
    bottom: 70px;
  }
  64%{
 
  }
  96%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    bottom: 70px;
    left: 10px;
  }
}
@keyframes cloud_s{
  0%{
    transform: scale(0.6);
    opacity: 0;
    bottom: 40px;
    left: 18px;
  }
  23%{
    opacity: 0;
  }
  24%{
    opacity: 1;
    bottom: 40px;
    left: 30px;
  }
  28%{
    opacity: 1;
    bottom: 85px;
    left: 60px;
  }
  32%{
    transform: scale(0.6);
  }
  34%{
    transform: scale(0.75);
  }
  35%{
    transform: scale(0.7);
  }
  48%{
    opacity: 1;
  }
  49%{
    opacity: 0;
  }
  100%{
    transform: scale(0.7);
    opacity: 0;
    bottom: 85px;
    left: 60px;
  }
}
@keyframes cloud_vs{
  0%{
    opacity: 0;
    bottom: 85px;
    left: 60px;
  }
  39%{
    opacity: 0;
  }
  40%{
    opacity: 1;
    bottom: 85px;
    left: 60px;
  }
  42%{
    bottom: 125px;
    left: 10px;
  }
  43%{
    bottom: 120px;
    left: 15px;
  }
  48%{
    opacity: 1;
  }
  49%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    bottom: 120px;
    left: 15px;
  }
}
@keyframes cloudi{
  0%{
    background: #fff;
  }
  56%{
    background: #fff;
  }
  57%{
    background: #92a4b6;
  }
  100%{
    background: #92a4b6;
  }
}
@keyframes thunder{
  0%{
    opacity: 0;
    bottom: 100px;
    left: 65px;
  }
  62%{
    opacity: 0;
    bottom: 100px;
    left: 65px;
  }
  64%{
    opacity: 1;
    bottom: 50px;
    left: 60px;
  }
  65%{
    opacity: 1;
    bottom: 55px;
    left: 61px;
  }
  72%{
    opacity: 1;
    bottom: 55px;
    left: 61px;
  }
  73%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    bottom: 55px;
  }
}
@keyframes fade_in{
  0%{
    opacity: 0;
  }
  8%{
    opacity: 1;
  }
  9%{
    opacity: 1;
  }
  11%{
    opacity: 1;
  }
  12%{
    opacity: 0;
  }
  100%{
    oapcity: 0;
  }
}
</style>
<div id='error-page'>
      <div class='pesan-eror'>Trang bạn đang tìm có thể không khả dụng, bạn có thể liên hệ admin để sửa lỗi này.</div>
<div class='ghost'/>
<div class='tv tv-60'>
  <div class='tv-frame'>
    <div class='tv-viewport'>
      <div class='tv-viewport-size'>Trang không tồn tại!<br/><span class='eror'>404</span><br/>bạn đi lạc cmnr !<br/><span class='l-1'/>
<span class='l-2'/>
<span class='l-3'/>
<span class='l-4'/>
<span class='l-5'/>
<span class='l-6'/></div>
    </div>
  </div>
  <div class='tv-stand'>
  </div>
</div>
<div class='wrapper'>
  <div class='cloud'>
    <div class='cloud1'>
      <ul>
        <li/>
        <li/>
        <li/>
        <li/>
      </ul>
    </div>
    <div class='cloud1 c_shadow'>
      <ul>
        <li/>
        <li/>
        <li/>
        <li/>
      </ul>
    </div>
  </div>

  <div class='cloud_s'>
    <div class='cloud1'>
      <ul>
        <li/>
        <li/>
        <li/>
        <li/>
      </ul>
    </div>
    <div class='cloud1 c_shadow'>
      <ul>
        <li/>
        <li/>
        <li/>
        <li/>
      </ul>
    </div>
  </div>

  <div class='cloud_vs'>
    <div class='cloud1'>
      <ul>
        <li/>
        <li/>
        <li/>
        <li/>
      </ul>
    </div>
    <div class='cloud1 c_shadow'>
      <ul>
        <li/>
        <li/>
        <li/>
        <li/>
      </ul>
    </div>
  </div>
   <div class='thunder'/>
<style>
button{width: 300px;background: #55579e;border: none;position: relative;transition: 800ms ease all;outline: none;left: -485px;font: 500 16px &quot;Roboto&quot;,sans-serif;text-transform: uppercase;top: 300px;}
button a{color:#fff!important;padding:.5em 3em;display:block}
button:hover a{color:#55579e!important;text-decoration:none!important}
button:hover{background:#313131}
button:before,button:after{content:&#39;&#39;;position:absolute;top:0;right:0;height:2px;width:0;background:#55579e;transition:900ms ease all}
button:after{right:inherit;top:inherit;left:0;bottom:0}
button:hover:before,button:hover:after{width:100%;transition:800ms ease all}
</style>
<button><a href='/'>Về Trang Chủ</a></button>
  </div>
</div>
              </b:if>
Lưu lại và tận hưởng thành quả !

Lưu Ý

  • Bạn hãy xóa tất cả các thẻ có liên quan đến trang 404 cũ bằng cách tìm thẻ điều kiện của trang 404 cũ và xóa tất cả từ đoạn <b:if cond='data:blog.pageType == &quot;error_page&quot;'> cho đến thẻ đóng </b:if> để tránh tình trạng xung đột code.
Bài viết cùng chuyên mục

9 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

Gợi ý cho bạn