Cara Membuat Halaman Error 404 Keren di Blogger Dengan Tambahan Minion

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

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.4

Cara Membuat Halaman Error 404 Keren di Blogger Dengan Tambahan Minion

Berikut inilah Cara Membuat Halaman Error 404 Keren di Blogger Dengan Tambahan Minion, 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>.


<link href="style.css" rel='stylesheet' type='text/css' />
<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">
      <div class="minion">
        <div class="hands">
          <div class="left"></div>
          <div class="right"></div>
          <div class="fingers-l"></div>
          <div class="fingers-r"></div>
          <div class="glove-l"></div>
          <div class="glove-r"></div>
        </div>
        <div class="glasses">
          <div class="glassesline1"></div>
          <div class="glassesline2"></div>
          <div class="glass1">
            <a href="http://wajoni.blogspot.co.id">
            <div class="eye1"></div>
            </a>
          </div>
          <div class="glass2">
            <a href="http://wajoni.blogspot.co.id">
            <div class="eye2"></div>
            </a>
          </div>
        </div>
        <div class="mouth">
          <ul class="teeth">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="belt-left"></div>
        <div class="belt-right"></div>
        <div class="pants"></div>
        <div class="legs">
          <div class="left"></div>
          <div class="right"></div>
          <div class="shoe-l"></div>
          <div class="shoe-r"></div>
        </div>
      </div>
      <div id="buttonerror">
        <a href="#">Homepage</a>
      </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;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
}
a, a:visited{
  color: #fff;
  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: #EC7E65;
  color: #fff;
}
#buttonerror{
  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;
}
#buttonerror a{
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#buttonerror:hover {
  background-color: rgba(255, 255, 255, 1);
}
#buttonerror:hover a, #buttonerror a:hover{
  color: #EC7E65;
}
.minion{
  position: absolute;
  background-color: #ffed41;
  height: 360px;
  width: 218px;
  border-radius: 218px 218px 130px 130px;
  position: absolute;
  left: 50%;
  top: 45%;
  margin: -180px 0 0 -109px;
  z-index: 99999;
}
.glassesline1{
  background-color: #494949;
  border-radius: 4px;
  height: 12px;
  width: 238px;
  position: relative;
  top: 98px;
  margin: 0 -10px;
}
.glassesline2{
  background-color: #2d2d2d;
  border-radius: 4px;
  height: 12px;
  width: 238px;
  position: relative;
  top: 98px;
  margin: 0 -10px;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
}
.glass1, .glass2{
  background-color: #e2e2e0;
  height: 102px;
  width: 102px;
  border-radius: 102px;
  position: absolute;
  top: 55px;
  box-shadow: -4px 4px 0px 0px rgba(50, 50, 50, 0.15), 1px -1px 0px 0px rgba(255, 255, 255, 1);
}
.glass1{
  left: 10px;
  right: auto;
  z-index: 2;
}
.glass2{
  right: 10px;
  left: auto;
  z-index: 1;
}
.glass1:before, .glass2:before{
  background-color: #e5bf36;
  height: 78px;
  width: 78px;
  border-radius: 78px;
  display: block;
  position: relative;
  top: 12px;
  left: 12px;
  content: "";
}
.glass1:after, .glass2:after{
  background-color: #FFF;
  height: 58px;
  width: 78px;
  border-radius: 78px;
  position: absolute;
  top: 22px;
  left: 12px;
  content: "";
  animation: eyes 5s linear 1s infinite;
}
.eye1, .eye2{
  background-color: #724c25;
  height: 28px;
  width: 28px;
  border-radius: 28px;
  position: absolute;
  top: 44px;
  z-index: 3;
}
.eye1{
  left: 46px;
}
.eye2{
  right: 46px;
}
.eye1:before, .eye2:before{
  background-color: #2c2d2f;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  display: block;
  position: relative;
  top: 8px;
  left: 8px;
  content: "";
}
.eye1:after, .eye2:after{
  background-color: #FFF;
  height: 8px;
  width: 8px;
  border-radius: 8px;
  position: absolute;
  top: 6px;
  left: 12px;
  content: "";
}
.mouth{
  background-color: #603814;
  height: 36px;
  width: 106px;
  position: absolute;
  border-radius: 0 0 106px 106px;
  top: 182px;
  left: 55px;
  overflow: hidden;
}
.mouth:before{
  background-color: #FFED41;
  height: 80px;
  width: 205px;
  position: relative;
  display: block;
  border-radius: 0 0 150px 150px;
  top: -70px;
  left: -50px;
  content: "";
  z-index: 2;
  box-shadow: 0px 3px 0px 0px rgba(50, 50, 50, 0.15);
}
ul.teeth{
  list-style: none;
  z-index: 1;
  position: absolute;
  top: -10px;
  left: -25px;
}
ul.teeth li{
  float: left;
  height: 15px;
  width: 20px;
  background: #FFF;
  display: inline-block;
  border-radius: 0 0 15px 15px;
}
ul.teeth li:first-child, ul.teeth li:last-child{
  height: 10px;
}
.pants{
  background-color: #2b5b89;
  height: 66px;
  position: relative;
  top: 270px;
  border-radius: 0 0 128px 128px;
  z-index: 2;
}
.pants:before{
  background-color: #2b5b89;
  height: 58px;
  width: 138px;
  display: block;
  position: relative;
  top: -58px;
  margin: 0 auto;
  content: "";
}
.pants:after{
  background-color: #224467;
  height: 44px;
  width: 58px;
  display: block;
  position: relative;
  top: -76px;
  border-radius: 0 0 58px 58px;
  margin: 0 auto;
  content: "";
}
.belt-left,
.belt-right{
  background-color: #224467;
  height: 16px;
  width: 70px;
  position: absolute;
  top: 225px;
  z-index: 3;
}
.belt-left{
  left: -10px;
  transform: scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.belt-right{
  right: -10px;
  transform: scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.belt-left:after, .belt-right:after{
  background-color: #2d2d2b;
  height: 11px;
  width: 11px;
  border-radius: 11px;
  position: absolute;
  content: "";
}
.belt-left:after{
  left: 56px;
  top: 3px;
}
.belt-right:after{
  right: 57px;
  top: 3px;
}
.legs .left,
.legs .right{
  background: #224467;
  height: 22px;
  width: 44px;
  position: absolute;
  top: 358px;
  z-index: 1;
}
.legs .left{
  left: 60px;
}
.legs .right{
  right: 60px;
}
.legs .left:after{
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-bottom: 22px solid #EC7E65;
  border-right: 10px solid transparent;
}
.legs .right:after{
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-bottom: 22px solid #EC7E65;
  border-left: 10px solid transparent;
  right: 0;
}
.shoe-l, .shoe-r{
  background-color: #424242;
  width: 52px;
  height: 18px;
  position: absolute;
  top: 380px;
}
.shoe-l{
  left: 50px;
  border-radius: 18px 0 0 0;
}
.shoe-r{
  right: 50px;
  border-radius: 0 18px 0 0;
}
.shoe-l:after, .shoe-r:after{
  background-color: #2d2d2d;
  width: 56px;
  height: 5px;
  position: absolute;
  content: "";
  top: 18px;
  left: -2px;
}
.shoe-l:before{
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-top: 5px solid #224467;
  border-left: 34px solid transparent;
  left: 20px;
}
.shoe-r:before{
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-top: 5px solid #224467;
  border-right: 34px solid transparent;
  right: 20px;
}
.hands .left, .hands .right{
  background-color: #e5c034;
  height: 100px;
  width: 16px;
  position: absolute;
  top: 242px;
}
.hands .left{
  left: -16px;
  border-radius: 16px 0 0 0;
}
.hands .right{
  right: -16px;
  border-radius: 0 16px 0 0;
}
.hands .fingers-l,
.hands .fingers-r{
  background-color: #424242;
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  top: 350px;
  z-index: 1;
}
.hands .fingers-l{
  left: -6px;
  border-radius: 0 16px 0 0;
}
.hands .fingers-r{
  right: -6px;
  border-radius: 16px 0 0 0;
}
.hands .fingers-l:after, .hands .fingers-r:after{
  background-color: #383838;
  height: 16px;
  width: 16px;
  content: "";
  border-radius: 16px;
  position: absolute;
  top: 15px;
  z-index: 2;
}
.hands .fingers-l:after{
  left: 0px;
}
.hands .fingers-r:after{
  right: 0px;
}
.hands .fingers-l:before, .hands .fingers-r:before{
  background-color: #2c2c2c;
  height: 16px;
  width: 16px;
  content: "";
  border-radius: 16px;
  position: absolute;
  top: 8px;
  z-index: 1;
}
.hands .fingers-l:before{
  left: 5px;
}
.hands .fingers-r:before{
  right: 5px;
}
.hands .glove-l, .hands .glove-r{
  background-color: #424242;
  position: absolute;
  height: 36px;
  width: 16px;
  border-radius: 0 0 16px 16px;
  top: 342px;
  z-index: 3;
}
.hands .glove-l{
  left: -15px;
}
.hands .glove-r{
  right: -15px;
}
.hands .glove-l:before, .hands .glove-r:before{
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  top: -15px;
  border-bottom: 30px solid #424242;
  border-left: 30px solid transparent;
  transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.hands .glove-l:before{
  left: -7px;
}
.hands .glove-r:before{
  right: -7px;
}

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