Cara Membuat Halaman Error 404 Keren di Blogger

Cara Membuat Halaman Error 404 Keren di Blogger - Kali ini saya akan membagikan tutorial sederhana Cara Membuat Halaman Error 404 Keren di Blogger.

Dalam tutorial saya kali ini kita akan menggunakan Tag Kondisional halaman Error untuk membuatnya. Kenapa harus menggunakan Tag Kondisional?, karena dengan menggunakan Tag Kondisional kita dapat lebih mudah membuatnya dan halaman Error dapat termuat dengan cepat karena tidak menggunakan Redirect.

Halaman Error 0.1

Cara Membuat Halaman Error 404 Keren di Blogger

Berikut inilah Cara Membuat Halaman Error 404 Keren di Blogger, langkah pertama dalam pembuatan halaman Error 404 ini kita harus membungkus dulu halaman yang tidak akan tampil di halaman Error 404 dan halaman yang akan ditampilkan di halaman Error 404, berikut caranya:

#1. Login ke akun Blogger anda.

#2. Pilih Template > Edit HTML.

#3. Gunakan tombol CTRL+F di keyword, dan cari kode <body> kemudian letakan kode di bawah ini tepat di bawah kode <body>.


<body>
    <b:if cond="data:blog.pageType != &quot;error_page&quot;"></b:if>
    <b:if cond="data:blog.pageType == &quot;error_page&quot;">
<div id="container-error"> <!-- Begin Drawing -->
    <div class="wajonikotak">
        <div class="wajonihead">
              <div class="wajonihead-copy"></div>
          <div class="wajoniear-left">
            <div class="wajoniinner-ear"></div>
        </div>
        <div class="wajoniear-right">
            <div class="wajoniinner-ear"></div>
        </div>
              <div class="wajonihair-1"></div>
              <div class="wajonihair-2"></div>
        <a href="http://wajoni.blogspot.co.id">
        <div class="wajonieye-left">
            <div class="wajonipupil"></div>
        </a>
            <div class="wajoninose"></div>
        </div>
        <a href="http://wajoni.blogspot.co.id">
        <div class="wajonieye-right">
            <div class="wajonipupil"></div>
        </a>
          </div>
          </div>
        <div id="wajonibuttonerror">
            <a href="/">Homepage</a>
        </div>
    </div>
</div>
    </b:if>
</body>

#4. Kemudian gunakan lagi tombol CTRL+F di keyword untuk mencari kode ]]></b:skin>, dan letakan kode dibawah ini tepat atas kode ]]></b:skin>.


body{
  background: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
}
a, a:visited{
  color: #EF5350;
  outline: none;
  text-decoration: none;
}
a:hover, a:focus, a:visited:hover{
  color: #fff;
  text-decoration: none;
}
#container-error{
  text-align: center;
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  background-color: #42A5F5;
  color: #fff;
}
#wajonibuttonerror{
  clear: both;
  position: absolute;
  background-color: rgba(255, 255, 255, .05);
  color: #EC7E65;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15%;
  margin: auto;
  max-width: 250px;
  padding: 20px;
  z-index: 99999;
  border-radius: 10px;
  border: 5px solid #fff;
  transition: all .5s;
}
#wajonibuttonerror a{
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#wajonibuttonerror:hover{
  background-color: rgba(255, 255, 255, 1);
}
#wajonibuttonerror:hover a, #wajonibuttonerror a:hover{
  color: #42A5F5;
}
.wajonikotak{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
}
.wajonihead{
  position: absolute;
  width: 50%;
  height: 67%;
  background: #A6BECF;
  border-radius: 50%;
  top:15%;
  left: 25%;
  z-index: 1;
  opacity: 0.99;
}
.wajonihead-copy{
  width: 100%;
  height: 100%;
  position: absolute;
  background: #A6BECF;
  border-radius: 50%;
  z-index: 1;
}
.wajoniear-left{
  position: absolute;
  width: 60%;
  height: 65%;
  left: -20%;
  top: 5%;
  background: #A6BECF;
  border-radius: 50%;
  opacity: 0.99;
}
.wajoniear-right{
  position: absolute;
  width: 60%;
  height: 65%;
  right: -20%;
  top: 5%;
  background: #A6BECF;
  border-radius: 50%;
}
.wajoniinner-ear{
  position: absolute;
  border-radius: 50%;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  background: #819CAF;
}
.wajonieye-left{
  position: absolute;
  background: white;
  width: 30%;
  height: 33%;
  top: 25%;
  left: 21%;
  border-radius: 50%;
  z-index: 2;
}
.wajonieye-right{
  position: absolute;
  background: white;
  width: 30%;
  height: 33%;
  top: 25%;
  right: 21%;
  border-radius: 50%;
  z-index: 1;
}
.wajonipupil{
  position: absolute;
  width: 28%;
  height: 30%;
  top: 35%;
  left: 36%;
  border-radius: 50%;
  background: #27354A;
}
.wajoninose{
  position: absolute;
  background: #BE845F;
  width: 70%;
  height: 110%;
  right: -30%;
  bottom: -75%;
  border-radius: 50px;
  z-index: 3;
}
.wajonihair-1{
  position: absolute;
  top: -8%;
  left: 30%;
  width: 20%;
  height: 20%;
  background:  #A6BECF;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.wajonihair-2{
  position: absolute;
  top: -4%;
  left: 48%;
  width: 20%;
  height: 20%;
  background:  #A6BECF;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

#5. Kemudian simpan template, untuk melihat hasilnya silahkan anda masukan URL yang tidak tersedia di blog/web anda