Cara Membuat Halaman Error 404 Di Web

Posted on
iNDZGN
iNDZGN from indzgn.blogspot.com

Apa itu Halaman Error 404?

Halaman Error 404 adalah halaman yang muncul ketika pengguna mencoba mengakses halaman yang tidak dapat ditemukan di situs web. Halaman ini memberitahu pengguna bahwa halaman yang mereka cari tidak tersedia, biasanya karena kesalahan penulisan URL atau halaman telah dihapus dari situs web.

Mengapa Halaman Error 404 Penting?

Halaman Error 404 dapat memberikan pengalaman buruk bagi pengunjung situs web Anda, terutama jika mereka terus-menerus menemukan halaman ini. Namun, dengan membuat halaman Error 404 yang menarik dan informatif, Anda dapat membantu mengurangi frustrasi pengguna dan membantu mereka menavigasi situs web Anda dengan lebih mudah.

Cara Membuat Halaman Error 404 di Web

Untuk membuat halaman Error 404 di situs web Anda, Anda akan memerlukan pengetahuan dasar HTML dan CSS. Berikut adalah beberapa langkah yang dapat Anda ikuti:

1. Buat File HTML Baru

Buat file HTML baru dengan nama “404.html” dan simpan di direktori root situs web Anda.

2. Tambahkan Kode HTML Dasar

Tambahkan kode HTML dasar ke file 404.html Anda, termasuk tag , , dan . Anda juga dapat menambahkan tag untuk memberi judul halaman Anda.</p> <h3>3. Tambahkan Kode CSS</h3> <p>Tambahkan kode CSS ke file HTML Anda untuk mendesain halaman Error 404 Anda. Anda dapat menggunakan CSS untuk menambahkan gambar, teks, dan warna ke halaman Anda.</p> <h3>4. Tambahkan Pesan Error 404</h3> <p>Tambahkan pesan Error 404 ke halaman Anda, memberi tahu pengguna bahwa halaman yang mereka cari tidak ditemukan. Anda juga dapat menambahkan tautan kembali ke halaman beranda situs web Anda atau tautan ke halaman terkait yang mungkin berguna bagi pengguna.</p> <h3>5. Uji Halaman Anda</h3> <p>Setelah selesai membuat halaman Error 404 Anda, uji halaman tersebut untuk memastikan bahwa itu bekerja dengan baik. Coba akses halaman yang tidak tersedia di situs web Anda dan pastikan bahwa halaman Error 404 muncul dengan benar.</p> <h2>Kesimpulan</h2> <p>Membuat halaman Error 404 yang menarik dan informatif dapat membantu meningkatkan pengalaman pengguna di situs web Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat halaman Error 404 yang efektif dan membantu pengguna menavigasi situs web Anda dengan lebih mudah.</p> </article> <p><span id="more-320"></span></p> <section></section> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="cat-links">Posted in <a href="http://minyakita.id/aplikasi/" rel="category tag">Aplikasi</a></span><span class="tags-links">Tagged <a href="http://minyakita.id/tag/cara/" rel="tag">cara</a>, <a href="http://minyakita.id/tag/error/" rel="tag">error</a></span> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="http://minyakita.id/299/aplikasi-pengubah-font-android-tanpa-root/" rel="prev"><span>Previous post</span> Aplikasi Pengubah Font Android Tanpa Root</a></div><div class="nav-next"><a href="http://minyakita.id/71/kode-referral-amartha/" rel="next"><span>Next post</span> Kode Referral Amartha: Cara Mudah Mendapatkan Pinjaman Online</a></div></div> </nav> </footer><!-- .entry-footer --> </div><!-- .gmr-box-content --> </article><!-- #post-## --> <div class="gmr-box-content"> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/320/cara-membuat-halaman-error-404-di-web/#respond" style="display:none;">Cancel reply</a></small></h3><form action="http://minyakita.id/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment" class="gmr-hidden">Comment</label><textarea id="comment" name="comment" cols="45" rows="4" placeholder="Comment" aria-required="true"></textarea></p><p class="comment-form-author"><input id="author" name="author" type="text" value="" placeholder="Name*" size="30" aria-required='true' /></p> <p class="comment-form-email"><input id="email" name="email" type="text" value="" placeholder="Email*" size="30" aria-required='true' /></p> <p class="comment-form-url"><input id="url" name="url" type="text" value="" placeholder="Website" size="30" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='320' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </div><!-- .gmr-box-content --> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area col-md-4 pos-sticky" role="complementary" > <div id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title">Terbaru</h3> <ul> <li> <a href="http://minyakita.id/129/kode-referral-jenius/">Kode Referral Jenius: Cara Mudah Untuk Mendapatkan Bonus</a> </li> <li> <a href="http://minyakita.id/5244/cara-menghapus-background-di-picsart/">Cara Menghapus Background Di Picsart</a> </li> <li> <a href="http://minyakita.id/155/cara-hapus-background-foto-di-picsart/">Cara Hapus Background Foto Di Picsart</a> </li> <li> <a href="http://minyakita.id/381/cara-membuat-auto-increment-di-mysql/">Cara Membuat Auto Increment Di Mysql</a> </li> <li> <a href="http://minyakita.id/2/cara-mengelola-risiko-investasi-reksadana/">Cara Mengelola Risiko Investasi Reksadana</a> </li> </ul> </div><div id="search-2" class="widget widget_search"><h3 class="widget-title">Cari</h3><form role="search" method="get" class="search-form" action="http://minyakita.id/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Search" /> </form></div></aside><!-- #secondary --> </div><!-- .row --> </div><!-- .container --> <div id="stop-container"></div> </div><!-- .gmr-content --> </div><!-- #site-container --> <div id="footer-container"> <div class="gmr-bgstripes"> <span class="gmr-bgstripe gmr-color1"></span><span class="gmr-bgstripe gmr-color2"></span> <span class="gmr-bgstripe gmr-color3"></span><span class="gmr-bgstripe gmr-color4"></span> <span class="gmr-bgstripe gmr-color5"></span><span class="gmr-bgstripe gmr-color6"></span> <span class="gmr-bgstripe gmr-color7"></span><span class="gmr-bgstripe gmr-color8"></span> <span class="gmr-bgstripe gmr-color9"></span><span class="gmr-bgstripe gmr-color10"></span> <span class="gmr-bgstripe gmr-color11"></span><span class="gmr-bgstripe gmr-color12"></span> <span class="gmr-bgstripe gmr-color13"></span><span class="gmr-bgstripe gmr-color14"></span> <span class="gmr-bgstripe gmr-color15"></span><span class="gmr-bgstripe gmr-color16"></span> <span class="gmr-bgstripe gmr-color17"></span><span class="gmr-bgstripe gmr-color18"></span> <span class="gmr-bgstripe gmr-color19"></span><span class="gmr-bgstripe gmr-color20"></span> </div> <footer id="colophon" class="site-footer" role="contentinfo" > <div class="container"> <div class="site-info"> <a href="https://wordpress.org/" title="Proudly powered by WordPress">Proudly powered by WordPress</a> <span class="sep"> / </span> <a href="https://www.idtheme.com/superfast/" title="Theme: Superfast">Theme: Superfast</a> </div><!-- .site-info --> </div><!-- .container --> </footer><!-- #colophon --> </div><!-- #footer-container --> <div class="gmr-ontop gmr-hide"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M12 22V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 14l7-7l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 2h18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg></div> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='rocket-browser-checker-js-after'> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); </script> <script type='text/javascript' id='rocket-preload-links-js-extra'> /* <![CDATA[ */ var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/wp-admin\/|\/logout\/|\/wp-login.php|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|php|pdf|html|htm","siteUrl":"http:\/\/minyakita.id","onHoverDelay":"100","rateThrottle":"3"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='rocket-preload-links-js-after'> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='http://minyakita.id/wp-content/cache/min/1/wp-content/themes/superfast/js/customscript.js?ver=1666402030' id='superfast-customscript-js'></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='http://minyakita.id/wp-includes/js/comment-reply.min.js?ver=6.1.1' id='comment-reply-js'></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="http://minyakita.id/wp-content/plugins/wp-rocket/assets/js/lazyload/17.5/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script><script type="rocketlazyloadscript" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4037615646586030" crossorigin="anonymous"></script> </body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->