Teknik Dan Cara Menciptakan Halaman Error 404

By | Januari 16, 2018
 Mungkin sudah banyak dari pembaca yang sudah pernah mendengar kata error  Teknik dan Cara menciptakan Halaman Error 404
Membuat halaman error 404
Error 404 atau konten tidak ditemukan : Pengantar Singkat
Mungkin sudah banyak dari pembaca yang sudah pernah mendengar kata error 404 atau error yang menyatakan bahwa konten tidak ditemukan.
Ruang Lingkup
Membuat error pada tampilan blog anda khususnya yang memakai blogger menjadi lebih menarik. Menggunakan perpaduan arahan html dan juga kemampuan dari CSS
Langkah Membuat
Buka pengaturan edit template pada blog pembaca. jikalau anda memakai software editor langkah ini bisa anda lewati.
Setelah membuka edit template, kita mulai atur-atur bab head khususnya pada tag title. Pembaca bisa mencari kode

<title><data:blog.pageTitle/></title>
<b:else/>

Kemudian masukkan arahan berikut:

 Masukkan dalam pengaturan Tag Title <b:if cond='data:blog.pageType != &quot;error_page&quot;'> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if></b:if> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <title>Error 404 - <data:blog.title/></title> </b:if> 

Kegunaan dari arahan diatas yaitu menampilkan title (judul) ketika halaman error 404 tersebut di tampilkan.

Setelah langkah pertama ini selesai. Langkah selanjutnya yaitu memasukkan arahan CSS kedalam template, biar nanti halaman error sanggup ditampilkan. Tempatkan arahan berikut dibawah ]]></b:skin>

  <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <style type='text/css'> #footer-wrapper,#header-wrapper,#content-wrapper, #wrapper {display:none;visibility:hidden;opacity:0;width:0;height:0} .error-container{background:#332C2B;background-size:cover;} #footer-wrapper {background-color:transparent;margin:auto;margin-top:-60px;padding:20px;} .error-h1{margin-top:-100px} .error-h2{line-height:42px} .error-h2 span{background:#E32D3C;padding:2px 10px;} .error-gambar img{display:block;font-size:72px;font-weight:700;height:150px;margin:100px auto 50px} .error-container{background-color:#101524;display:table;height:100vh;overflow-x:hidden;width:100%} .error404 {margin:0 auto 20px;display:block} .error-404{background:#000;display:table-cell;vertical-align:middle} .error-404 .halaman-pesan p{color:#e1e1e1} .error-h2{color:#fff;font-family:&#39;Open Sans&#39;,sans-serif;font-size:42px;font-weight:700;text-transform:uppercase;margin:.67em 0;text-align:center;line-height:normal;} .halaman-pesan,.halaman-pesan p{color:#797979;font-size:22px;text-align:center} a.btn.back-home{background:#4ec722;color:#fff;font-weight:400;left:50px;line-height:24px;padding:10px 20px;position:absolute;text-transform:capitalize;top:35px;z-index:99;border-radius:4px} a.back-home:hover{background:#fff;color:#000;} a.back-home i{font-size:14px;margin-right:3px} @media only screen and (max-width:479px){.back-button-container{max-width:80%;width:80%}.halaman-pesan .back-home{width:100%;margin:10px auto}.error-h1{margin-top:30px}.error-h2{font-size:24px;line-height:32px}.halaman-pesan,.halaman-pesan p{font-size:14px}.error-404{padding-bottom:60px}.page-footer{padding:20px 10px}} </style> </b:if> 

Kode CSS diatas bertujuan untuk melaksanakan penampilan biar template pembaca dialihkan menuju sebuah CSS yang ibarat halaman statis. Perhatikan script yang aku beri latar warna merah. diatas! Kode tersebut membutuhkan pengaturan lebih lanjut, dan memerlukan pembiasaan dengan template pembaca. Kode diatas yaitu arahan yang mendiskripsikan bahwa tag-tag tersebut tidak akan diaktifkan ketika halaman error ini muncul.

Jika ketika pengujian nanti masih ada konten yang keluar (muncul) maka selidiki konten yang muncul tersebut dengan memakai menu inspeksi google chrome ataupun menu inspeksi pada mozilla firefox untuk mengetahui nama konten yang muncul tersebut. Setelah mengetahui nama konten yang muncul masukkan nama konten tersebut kedalam barian yang aku beri label merah tersebut. Pemisah antar tag memakai tanda kome (,)

Setelah langkah pemasangan CSS sudah selesai langkah selanjutnya yaitu memasang pesan yang akan ditampilkan. Masukkan arahan berikut sempurna dibawah <body>

 <!-- Junie pesan error--> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <div class='error-container'>     <a class='btn back-home' expr:href='data:blog.homepageUrl'><i class='fa fa-home fa-fw'/>  Kembali ke Beranda</a>     <section class='error-404 not-found text-center'>         <header class='error-h1'>             <div class='error-gambar'>                 <img class='lazy' alt='404' src='https://4.bp.blogspot.com/-S6cztD_W-xQ/WhlQp2ipncI/AAAAAAAABuQ/fumwPPYZJAUGl3rmrisDzd4R0gYD9hxAQCEwYBhgL/s1600/error%2B404.png'/>             </div>           <h1 class='error-h2'><p><span>Oops !!</span> Halaman yang anda cari tidak ditemukan</p> </h1>         </header>         <div class='halaman-pesan'>           <p>Mungkin lokasi artikel telah <u>dipindah atau sudah dihapus</u><br/><b>Saran : </b><i>Gunakan widget "Cari Artikel" untuk menemukan artikel dalam arsip blog</i><br/><br/><b>MOHON MAAF ATAS KETIDAKNYAMANAN INI</b></p>         </div> </section> </div> </b:if> 

Perhatikan script yang aku beri warna biru, arahan yang aku beri warna biru sanggup anda ganti sesuai selera anda. Setelah script diatas seluruhnya sudah terpasang saatnya melaksanakan uji coba.

Uji coba:  Untuk melaksanakan uji coba pembaca biasa menuliskan alamat blog pembaca pada browser lalu ditambahkan /404 biar sanggup menampilkan halaman error yang telah dibuat

misal : http://www.semogaawet.com/404

Kesimpulan
Membuat halaman error 404 yang elegan dan baik akan memperlihatkan keseriusan kita dalam melaksanakan blogging. Adanya halaman error yang elok akan menciptakan pengunjung memperlihatkan evaluasi yang baik (profesional) pada blog / website yang kita kelola. Mereka akan beranggapan bahwa kita tidak asal-asalan saja dalam mengelola sebuah website atau blog. Semoga bisa memperlihatkan anda inspirasi. Sekian

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *