Info Praktek Prof.dr.Helmi,Sp.THT (K)

Simple 404 Page Design for Blogger ala Truesolusi - Page 404 adalah salah satu halaman website yang bisa dibilang penting saat mendeploy atau membangun sebuah website atau blog, karena halaman ini bertujuan untuk menunjukan atau memberi tahu pengunjung atau user jika halamann yang dituju tidak ditemukan. Jika halaman page 404 ini tidak dibuat akan muncul pesan error, hal tersebut memberikan kesan tidak nyaman kepada pengunjung atau user. Bahkan ini bisa menjadi celah untuk mencari kelemahan suatu website/blog.

Sebuah website atau blog pada umumnya sudah menyediakan halaman 404 ini, akan tetapi tampilan yang diberikan terasa sangat biasa saja karena tampilan tersebuat adalah tampilan default yang disediakan oleh penyedia website/blog.

Kali ini kita akan mencoba membuat custum page 404 untuk wesite atau blog, tentunya dengan cara yang simple dan mudah agar kalian bisa dengan mudah membuatnya juga untuk keperluan website atau blog kalian.

Berikut ini adalah tampilan contohnya:

Oke, langsung saja ya sobat ke pokok pembahasannya membuat custum page 404 untuk website atau blogger, silahkan ikuti langkahnya dengan baik agar tidak terjadi kesalahan atau error. Jika sobat mengalami kesulitan dalam membuatnya silahkan beritahu kami di kolom komentar yang sudah kami sediakan dibawah.

Source Code untuk 404 Page

Berikut ini adalah code HTML, CSS dan Javascript yang akan dipakai dalam pembuatan page 404

CSS

<style>
@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");
@keyframes floating {
  from {
    transform: translateY(0px);
  }
  65% {
    transform: translateY(15px);
  }
  to {
    transform: translateY(0px);
  }
}
html {
  height: 100%;
}

body {
  background-image: url("https://assets.codepen.io/1538474/star.svg"), linear-gradient(to bottom, #05007A, #4D007D);
  height: 100%;
  margin: 0;
  background-attachment: fixed;
  overflow: hidden;
}

.mars {
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  height: 27vmin;
  background: url("https://assets.codepen.io/1538474/mars.svg") no-repeat bottom center;
  background-size: cover;
}

.logo-404 {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 16vmin;
  width: 30vmin;
}
@media (max-width: 480px) and (min-width: 320px) {
  .logo-404 {
    top: 45vmin;
  }
}

.meteor {
  position: absolute;
  right: 2vmin;
  top: 16vmin;
}

.title {
  color: white;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 5vmin;
  margin-top: 31vmin;
}
@media (max-width: 480px) and (min-width: 320px) {
  .title {
    margin-top: 65vmin;
  }
}

.subtitle {
  color: white;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: 3.5vmin;
  margin-top: -1vmin;
  margin-bottom: 9vmin;
}

.btn-back {
  border: 1px solid white;
  color: white;
  height: 5vmin;
  padding: 12px;
  font-family: "Nunito", sans-serif;
  text-decoration: none;
  border-radius: 5px;
}
.btn-back:hover {
  background: white;
  color: #4D007D;
}
@media (max-width: 480px) and (min-width: 320px) {
  .btn-back {
    font-size: 3.5vmin;
  }
}

.astronaut {
  position: absolute;
  top: 18vmin;
  left: 10vmin;
  height: 30vmin;
  animation: floating 3s infinite ease-in-out;
}
@media (max-width: 480px) and (min-width: 320px) {
  .astronaut {
    top: 2vmin;
  }
}

.spaceship {
  position: absolute;
  bottom: 15vmin;
  right: 24vmin;
}
@media (max-width: 480px) and (min-width: 320px) {
  .spaceship {
    width: 45vmin;
    bottom: 18vmin;
  }
}
</style>

HTML

    
<div class="mars"></div>
<img src="https://assets.codepen.io/1538474/404.svg" class="logo-404" />
<img src="https://assets.codepen.io/1538474/meteor.svg" class="meteor" />
<p class="title">Oh no!!</p>
<p class="subtitle">
	You’re either misspelling the URL <br /> or requesting a page that's no longer here.
</p>
<div align="center">
	<a class="btn-back" href="#">Back to previous page</a>
</div>
<img src="https://assets.codepen.io/1538474/astronaut.svg" class="astronaut" />
<img src="https://assets.codepen.io/1538474/spaceship.svg" class="spaceship" />

Code CSS dan HTML diatas adalah kode yang akan kita pakai untuk membuat 404 Page, silahkan kalian copy dan pastekan ke project kalian. Cukup simple bukan!

Cara memasang code page 404 di Blogger

1. Login Blogger
2. Klik Setting (setelan)
3. Cari bagian Error dan pengalihan
4. Klik Custum 404 (404 Khusus)
5. Pastekan code CSS dan HTML diatas
6. Selesai

Perhatian! Untuk melihat codenya sudah bekerja atau belum silahkan kalian ketik pada kolom pencarian blog queri yang tidak ada di blog kalian.

Jika kalian yang ingin melihat demonya silahkan kalian bisa klik tombol demo yang disediakan dibawah ini. Atau jika kalian mengalami kesulitan silahkan beritahu kami apa yang menjadi kendala kalian dengan memberi tahu kami di kolom komentar. Semoga bermanfaat, Terimakasih.

Related Posts