Membuat Custom Error 404 Di Blogger
Pernahkah Anda mendapat error 404 pada blog?, kemungkinan dikala Anda mendapat error tersebut Anda memasuki area yang kosong atau postingan yang tidak ada pada blog tersebut. Biasanya setiap template memasangkan tampilan perhiasan dan peringatan pada pengunjungnya bahwa apa yang mereka cari tidak ditemukan kemudian terdapat pesan untuk kembali ke halaman utama.
Error 404 ini sangat sering kita jumpai, pada blog orang lain atau pada blog sendiri. Pesan error ini merupakan bawaan atau dari mesin pencari atau search engine. Pesan galat 404 atau Not Found yaitu sebuah isyarat tanggap standar HTTP ataupun HTTPS yang menawarkan bahwa pengunjung tetap berada pada blog kita namun blog tidak sanggup menawarkan apa yang diminta oleh pengunjung maka terjadilah error 404 ini.
Berikut ini referensi kalau ingin mengetest halaman error 404.
Link diatas merupakan halaman disclaimer yang benar pada blog saya. Namun kalau aku merubah salah satu abjad saja pada contohnya menambahkan abjad “t” pada kata disclaimer menjadi “disclaimert” kemudian mengunjungi link tersebut, maka niscaya Anda akan menemukan halaman error 404. Apakah Anda ingin menciptakan halaman cutom error? Jika ingin, silahkan lanjutkan membaca tutorial ini hingga akhir, tapi kalau tidak, silahkan close saja.😁
Error 404 ini sangat sering kita jumpai, pada blog orang lain atau pada blog sendiri. Pesan error ini merupakan bawaan atau dari mesin pencari atau search engine. Pesan galat 404 atau Not Found yaitu sebuah isyarat tanggap standar HTTP ataupun HTTPS yang menawarkan bahwa pengunjung tetap berada pada blog kita namun blog tidak sanggup menawarkan apa yang diminta oleh pengunjung maka terjadilah error 404 ini.
Berikut ini referensi kalau ingin mengetest halaman error 404.
Link diatas merupakan halaman disclaimer yang benar pada blog saya. Namun kalau aku merubah salah satu abjad saja pada contohnya menambahkan abjad “t” pada kata disclaimer menjadi “disclaimert” kemudian mengunjungi link tersebut, maka niscaya Anda akan menemukan halaman error 404. Apakah Anda ingin menciptakan halaman cutom error? Jika ingin, silahkan lanjutkan membaca tutorial ini hingga akhir, tapi kalau tidak, silahkan close saja.😁
Cara Praktis Membuat Custom 404
Cara pertama
Masuk ke Blogger > Pilih Setting > Search Preperences .Di sebelah kanan tab Custom page not found pilih edit
masukkan isyarat dibawah ini
<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span> </div> <h2 class="large-heading" style="text-align: center;">Page not found.</h2> <h3 class="light-heading" style="text-align: center;">Sorry, the page you were looking for on this blog does not exist.<br>You will be redirected shortly to the homepage.</h3> <script type = "text/javascript"> BSPNF_redirect = setTimeout(function() { location.pathname= "/" }, 5000); </script> Save kemudian refresh halaman blogger Anda kemuadian check hasilnya
Cara Kedua
Membuat cutom Error 404 yang otomatis dikala terjadi kesalahan pencarian link HTML di blog AndaSilahkan masuk terlebih dahulu ke Blogger, kemudian theme kemudian ,asuk ke Edit HTML. Disin aku akan membagikan 2 pilihan style.
Style tampilan Minion
Masukkan isyarat CSS berikut dibawah]]></b:skin> atau sesudah <style type='text/css'>
/* CSS Custom Error Minion */ #container-error{text-align:center;z-index:9999;width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;background-color:#EC7E65;color:#fff} #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:#EC7E65} .minion{position:absolute;background-color:#ffed41;height:360px;width:218px;border-radius:218px 218px 130px 130px;position:absolute;left:50%;top:45%;margin:-180px 0 0 -109px;z-index:99999} .glassesline1{background-color:#494949;border-radius:4px;height:12px;width:238px;position:relative;top:98px;margin:0 -10px} .glassesline2{background-color:#2d2d2d;border-radius:4px;height:12px;width:238px;position:relative;top:98px;margin:0 -10px;box-shadow:0 3px 0 0 rgba(0,0,0,0.15)} .glass1,.glass2{background-color:#e2e2e0;height:102px;width:102px;border-radius:102px;position:absolute;top:55px;box-shadow:-4px 4px 0 0 rgba(50,50,50,0.15),1px -1px 0 0 rgba(255,255,255,1)} .glass1{left:10px;right:auto;z-index:2} .glass2{right:10px;left:auto;z-index:1} .glass1:before,.glass2:before{background-color:#e5bf36;height:78px;width:78px;border-radius:78px;display:block;position:relative;top:12px;left:12px;content:""} .glass1:after,.glass2:after{background-color:#FFF;height:58px;width:78px;border-radius:78px;position:absolute;top:22px;left:12px;content:"";animation:eyes 5s linear 1s infinite} .eye1,.eye2{background-color:#724c25;height:28px;width:28px;border-radius:28px;position:absolute;top:44px;z-index:3} .eye1{left:46px} .eye2{right:46px} .eye1:before,.eye2:before{background-color:#2c2d2f;height:12px;width:12px;border-radius:12px;display:block;position:relative;top:8px;left:8px;content:""} .eye1:after,.eye2:after{background-color:#FFF;height:8px;width:8px;border-radius:8px;position:absolute;top:6px;left:12px;content:""} .mouth{background-color:#603814;height:36px;width:106px;position:absolute;border-radius:0 0 106px 106px;top:182px;left:55px;overflow:hidden} .mouth:before{background-color:#FFED41;height:80px;width:205px;position:relative;display:block;border-radius:0 0 150px 150px;top:-70px;left:-50px;content:"";z-index:2;box-shadow:0 3px 0 0 rgba(50,50,50,0.15)} ul.teeth{list-style:none;z-index:1;position:absolute;top:-10px;left:-25px} ul.teeth li{float:left;height:15px;width:20px;background:#FFF;display:inline-block;border-radius:0 0 15px 15px} ul.teeth li:first-child,ul.teeth li:last-child{height:10px} .pants{background-color:#2b5b89;height:66px;position:relative;top:270px;border-radius:0 0 128px 128px;z-index:2} .pants:before{background-color:#2b5b89;height:58px;width:138px;display:block;position:relative;top:-58px;margin:0 auto;content:""} .pants:after{background-color:#224467;height:44px;width:58px;display:block;position:relative;top:-76px;border-radius:0 0 58px 58px;margin:0 auto;content:""} .belt-left,.belt-right{background-color:#224467;height:16px;width:70px;position:absolute;top:225px;z-index:3} .belt-left{left:-10px;transform:scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)} .belt-right{right:-10px;transform:scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)} .belt-left:after,.belt-right:after{background-color:#2d2d2b;height:11px;width:11px;border-radius:11px;position:absolute;content:""} .belt-left:after{left:56px;top:3px} .belt-right:after{right:57px;top:3px} .legs .left,.legs .right{background:#224467;height:22px;width:44px;position:absolute;top:358px;z-index:1} .legs .left{left:60px} .legs .right{right:60px} .legs .left:after{position:absolute;content:"";height:0;width:0;border-bottom:22px solid #EC7E65;border-right:10px solid transparent} .legs .right:after{position:absolute;content:"";height:0;width:0;border-bottom:22px solid #EC7E65;border-left:10px solid transparent;right:0} .shoe-l,.shoe-r{background-color:#424242;width:52px;height:18px;position:absolute;top:380px} .shoe-l{left:50px;border-radius:18px 0 0 0} .shoe-r{right:50px;border-radius:0 18px 0 0} .shoe-l:after,.shoe-r:after{background-color:#2d2d2d;width:56px;height:5px;position:absolute;content:"";top:18px;left:-2px} .shoe-l:before{position:absolute;content:"";height:0;width:0;border-top:5px solid #224467;border-left:34px solid transparent;left:20px} .shoe-r:before{position:absolute;content:"";height:0;width:0;border-top:5px solid #224467;border-right:34px solid transparent;right:20px} .hands .left,.hands .right{background-color:#e5c034;height:100px;width:16px;position:absolute;top:242px} .hands .left{left:-16px;border-radius:16px 0 0 0} .hands .right{right:-16px;border-radius:0 16px 0 0} .hands .fingers-l,.hands .fingers-r{background-color:#424242;position:absolute;content:"";height:16px;width:16px;top:350px;z-index:1} .hands .fingers-l{left:-6px;border-radius:0 16px 0 0} .hands .fingers-r{right:-6px;border-radius:16px 0 0 0} .hands .fingers-l:after,.hands .fingers-r:after{background-color:#383838;height:16px;width:16px;content:"";border-radius:16px;position:absolute;top:15px;z-index:2} .hands .fingers-l:after{left:0} .hands .fingers-r:after{right:0} .hands .fingers-l:before,.hands .fingers-r:before{background-color:#2c2c2c;height:16px;width:16px;content:"";border-radius:16px;position:absolute;top:8px;z-index:1} .hands .fingers-l:before{left:5px} .hands .fingers-r:before{right:5px} .hands .glove-l,.hands .glove-r{background-color:#424242;position:absolute;height:36px;width:16px;border-radius:0 0 16px 16px;top:342px;z-index:3} .hands .glove-l{left:-15px} .hands .glove-r{right:-15px} .hands .glove-l:before,.hands .glove-r:before{position:absolute;content:"";height:0;width:0;top:-15px;border-bottom:30px solid #424242;border-left:30px solid transparent;transform:scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)} .hands .glove-l:before{left:-7px} .hands .glove-r:before{right:-7px} Perhatikan posisi CSS tiap bagiannya. Jika terdapat posisi yang tidak tepat, silahkan atur CSSBerikutnya, letakkan isyarat HTML berikut ini dibawah <body>
<b:if cond="data:blog.pageType == "error_page""> <div id="container-error"> <div class="minion"> <div class="hands"> <div class="left"></div> <div class="right"></div> <div class="fingers-l"></div> <div class="fingers-r"></div> <div class="glove-l"></div> <div class="glove-r"></div> </div> <div class="glasses"> <div class="glassesline1"></div> <div class="glassesline2"></div> <div class="glass1"> <div class="eye1"></div> </div> <div class="glass2"> <div class="eye2"></div> </div> </div> <div class="mouth"> <ul class="teeth"> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="belt-left"></div> <div class="belt-right"></div> <div class="pants"></div> <div class="legs"> <div class="left"></div> <div class="right"></div> <div class="shoe-l"></div> <div class="shoe-r"></div> </div> </div> <div id="buttonerror"> <a expr:href='data:blog.homepageUrl'>Homepage</a></div> </div> </b:if>Style Tampilan Standar
Salin isyarat CSS dibawah ini diatas dibawah isyarat <style type='text/css'> atau sebelum </style>/* Error 404 */ .container404 { margin:8% auto 0 auto;max-width:640px; min-width:200px; line-height:normal; backface-visibility:hidden;transition:all .3s; } .box404 { background:#fff; padding:20px; font-size:100%; color:#222;box-shadow:0 19px 38px rgba(0,0,0,0.10),0 15px 12px rgba(0,0,0,0.05); transition:all .3s } .box404:hover { box-shadow:0 3px 6px rgba(0,0,0,0.08),0 3px 6px rgba(0,0,0,0.13); } .box404 h2,.box404 h3 { color:#222;display:block; text-align:center; font-size:1.5rem; margin:10px auto; font-weight:400 } .box404 h2 { font-size:7rem; color:#e74c3c } .box404 h3 { margin:10px auto 20px auto; } .box404 p { display:block; margin:10px 0 } .box404 ul li { margin:0 0 8px 20px; list-style:initial; list-style-type:square } .box404 ul li a { color:#e74c3c; } .box404 ul li a:hover { color:#000; } .copyright404 { display:block; text-align:center; margin:auto; font-weight:normal; max-width:640px; min-width:200px; padding:20px; border-radius:0 0 5px 5px } .copyright404 a,.copyright404 a:hover { color:#000 } @media screen and (max-width:1024px) { .box404 h2 { font-size:4rem; } .container404 { margin:4% auto 0 auto;}}<b:if cond='data:blog.pageType == "error_page"'> <div class='container404'> <div class='box404'> <h2>404</h2> <h3>The page could not be found</h3> <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable</p> <p>Please try the following :</p> <ul> <li>If you type the page address in the <strong>Address bar</strong>, make sure that it is spelled correctly.</li> <li>Click <strong><a expr:href='data:blog.homepageUrl'>here</a></strong> to return to our main page.</li> <li>If you were linked to this page, contact the eksekutif and make them aware of this issue.</li> </ul> </div> <div class='copyright404'> © <span id='current-year'/> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All Rights Reserved. </div> </div> </b:if>Save template dan lihat hasilnya
Demikian tutorial kali ini wacana cara menciptakan costum error 404 di blogger
sumber :
https://gudangresepbubun.blogspot.com/search?q=membuat-halaman-custom-error-404
https://gudangresepbubun.blogspot.com/search?q=membuat-halaman-custom-error-404