Minggu, 06 November 2016

Cara Membuat Halaman Error 404 Responsive & Simple

Halaman Error 404 Terbaru By Alfin Auzikri

Halaman Error 404 merupakan elemen penting di dalam blog atau website. Karena halaman error 404 ini memberitahu pengunjung bahwa di suatu website telah terjadi masalah, seperti postingan yang sudah dihapus, kesalahan penulisan url dan lain - lain.

Membuat halaman Error 404 ini melibatkan elemen HTML dan CSS serta yang paling penting berperan dalam munculnya halaman Error 404 ini adalah " Tag Kondisional " kalian bisa baca postingan saya selanjutnya tentang Tag Kondisional. Pada kali ini saya akan memberikan code halaman error 404 teringan. jika dipasang di blog atau website. kenapa ringan karena disini menggunakan elemen Tag Kondisional.

Cara Membuat Halaman Error 404 Terbaru Dengan Mudah

Pertama kalian masuk ke dashboard blog kalian dan masuk ke bagian template selanjutnya " Edit HTML ".

Kalian taruh kode <b:if cond="data:blog.pageType != &quot;error_page&quot;"> tepat di bawah <body> dan taruhlah </b:if> tepat di atas </body>. Fungsi ini adalah untuk menonaktifkan semua elemen di halaman Error 404.

Kemudian baru kalian taruh kode halaman Error 404. Di bawah ini.

<b:if cond="data:blog.pageType == &quot;error_page&quot;">
    <div id="container-error">
    <div id="error-page">
      Mohon maaf, Halaman yang Anda cari tidak ditemukan!
Kemungkinan halaman telah dihapus, atau Anda salah menuliskan URL.
    </div>
      <div id="buttonerror">
<a href="//www.alfinauzikri.xyz/">Homepage</a></div>
    </div>
  </b:if>

Taruhlah kode tersebut tepat di atas </body>. Jadinya kode tersebut tidak akan terkena tag kondisional yang memblokir elemen di Halaman Error 404.

Jangan lupa taruhlan kode CSS ini sebelum kode </style> atau kalau kalian sudah tahu letak CSS silahkan taruhlah sesuka hati kalian.

#container-error {
  text-align: center;
  z-index: 99999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  background-color: #3498db;
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
}

#container-error h3,
#container-error h4 {
  display: block;
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  font-weight: 700;
  color: #aaa;
}

#container-error h3 {
  margin-top: 30px;
}

#error-page {
  position: relative;
  max-width: 920px;
  margin: 6% auto;
  line-height: normal;
}

#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:#3498db}

Jika sudah beres semuanya INGAT !!! jangan lupa untuk menyimpanya. Jangan lupa kunjungi terus yah.

Artikel Terkait

Saya ini seorang blogger dari Indonesia yang masih nubie :v , salam kenal dan sehat selalu.