Home chevron_right Tutorial chevron_right Cara Membuat Halaman 404 Not Found

Cara Membuat Halaman 404 Not Found

Oleh
Cara Membuat Halaman 404 Not Found

Hallo,Sobat IDTemplate,Kembali Lagi pada postingan kali ini,Saya akan memberikan Tutorial Sederhana bagaimana cara membuat Halaman ERROR 404 Di blogger,Tag kondisional yang saya berikan sangatlah sederhana,Tentunya Halaman 404 Ini Responsive Untuk segala device Baik HP,Tablet,Smartphone dll.



Kenapa Harus Ada Halaman 404 ??

Karena Halaman 404 Not Found Ini Berfungsi Ketika,Ada User yang Salah Memasukan Katakunci(Keyword) Atau Paengunjung yang kebetulan lagi nyari Artikel yang di maksud Tetapi artikel tersebut sudah di hapus di blog.


Sekarang Kita Masuk Cara Buat Halaman 404 Di Blog dan berikut konsepnya , Saya dapat  Dari Mbak Arlina. :






<body>
  <b:if cond="data:blog.pageType != "error_page"">
  ... Daerah ini berisi bagian-bagian utama dalam sebuah blog seperti main-wrapper, sidebar-wrapper, hingga footer-wrapper. Daerah ini akan diabaikan karena kita berada di dalam kondisi pengingkaran. ...
  </b:if>
  <b:if cond="data:blog.pageType == "error_page"">
    <div id="container-error">
    <div id="error-page">
      Tuliskan sesuatu di sini. Bagian ini hanya akan tampil saat halaman tidak ditemukan.
    </div>
    </div>
  </b:if>
</body>

Sekarang Tinggal Tambahkan CSS Untuk Mempercantiknya :
body{background:url(https://wallpaperstudio10.com/static/wpdb/wallpapers/3840x2160/180798.jpg)no-repeat center center fixed;background-size:cover;font-size:16px;color:#fff;vertical-align:baseline;text-orientation:none;}
h1{font-family:'Arial',sans-serif;color:#fff;font-size:32px;font-weight:200;text-align: center;}
h2{font-family:'Helvetica',sans-serif;color:#fff;font-size:20px;font-weight:100;text-align:center;}
p{font-family:'Arial',Helvetica,sans-serif;font-size:19px;font-weight:50;text-align:center;}
a{color:#fff;}
@media screen and(max-width: 960px;){
 body{max-width:960px;}
 h1{font-size:150px;text-decoration:none;}
 h2{font-size:99px;text-decoration:none;}
 p{font-size:15px;text-decoration:none;}
}
@media screen and(max-width:760px){
 body{max-width:760%;}
 h1{font-size:110px;}
 h2{font-size:80px;}
 p{font-size:10px;}
}

Jangan Lupa Untuk menambahkan CSS Ini Untuk tombolnya :
&ltlink href="https://cdn.muicss.com/mui-0.9.39/css/mui.min.css" rel="stylesheet" type="text/css" />
Dan Juga Javascript :
<script src="https://cdn.muicss.com/mui-0.9.39/js/mui.min.js></script>

Sekarang Kalian taurh Kode HTML Ini di bawah : <b:if cond="data:blog.pageType == "error_page""> 
<h1>404 Not Found</h1>
<h2>Sorry The Webpage Couldn't be Found</h2>
<p>Please Back to Home</p>
<center><button class=>mui-btn mui-btn--raised mui-btn--primary"><a href="#">Back to Home</a></button></center>
Sekarang Save Template dan Lihat Hasilnya :
REVIEW

Jika Pemasangannya Benar Maka Halaman 404 Akan Muncul,Untuk mengetestnya Coba Hilangkan 1 Huruf atau Cari Halaman Yang tidak ada pada Blog anda.
Info :
Halaman 404 Ini di buat dengan MUI CSS Dan HTML 5,CSS 3

Sekian Tutorial dari saya,Semoga bermanfaat dan wa'salam

 Jangan Lupa Share dan Berikan Komentar Kalian


2 Komentar

Terimakasih Telah Berkunjung Di Blog Ini ,Dan Patuhi Peraturan Di blog ini
(1) Bertanya Sesuai dengan Topik
(2) Dilarang menaruh Link Aktiv Yang mengarah ke situs (Judi,Porno,Sara)
(3) Gunakan Tata bahasa yang baik Jika berkomentar
(4) Hargailah Komentar/Pendapat Orang

:: Komentar Kalian saya Tunggu::

Subscribe to: Post Comments (Atom)