Cara Memasang Halaman Error 404 di Blogger
Snippet Tips Blogger
Halaman Error 404 'Not Found' adalah halaman yang dihasilkan oleh server untuk menginformasikan bahwa link yang sobat kunjungi di suatu halaman blog tidak dapat ditemukan. Biasanya sobat akan mengalami Error 404 ketika link telah diubah tanggal publikasinya atau dihapus, atau bisa juga ketika sobat klik sebuah link alamat blog dengan kesalahan penulisan didalamnya.
Di Blogger pun sudah menyediakan secara default untuk menampilkan halaman yang tidak ditemukan. Contohnya seperti ini :
Bagi yang ingin mengganti tampilan default yang diberikan Blogger, di sini saya akan memberikan 4 pilihan tampilan dari Halaman Error 404 yang bisa sobat pasang dengan mudah. Berikut langkah-langkahnya.
Cara Memasang Halaman Error 404 di Blogger
Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari dan tambahkan kode di bawah ini sebelum </head>
<b:if cond='data:view.isError'>
<style>
/* Error 404 */
body{background:#fff;line-height:1.4em;overflow:hidden}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}
@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#error-page{background:#fff;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}
#error-inner{margin:12% auto 35px;padding:0;list-style:none!important}
#error-inner .box-404{display:inline-block;position:relative;font-weight:bold;width:200px;height:200px;background:#e84118;color:#fff;font-size:70px;line-height:200px;margin:25px auto}
#error-inner .box-404 .zigg{display:inline-block;position:relative;animation:rotating .6s linear}
#error-inner .box-404::after{content:'';width:0;height:0;position:absolute;top:0;right:0;border-width:30px;border-style:solid;border-color:#fff #fff transparent transparent;display:block}
#error-inner .box-404::before{content:'';width:0;height:0;position:absolute;top:0;left:0;border-width:30px;border-style:solid;border-color:#fff transparent transparent #fff;display:block}
#error-inner .box-404 div::after{content:'';width:0;height:0;position:absolute;bottom:0;left:0;border-width:30px;border-style:solid;border-color:transparent transparent #fff #fff;display:block}
#error-inner .box-404 div::before{content:'';width:0;height:0;position:absolute;bottom:0;right:0;border-width:30px;border-style:solid;border-color:transparent #fff #fff transparent;display:block}
#error-inner h2{color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px;animation:charge .5s linear}
#error-inner p{line-height:1.7em;font-size:16px;color:#111;padding:0;margin:15px auto 0 auto;max-width:640px;animation:charge .5s linear}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}
#search-404 .icons{width:26px;height:26px;fill:#4285f4;vertical-align:middle}
#search-404 .icon-Forward{width:20px;height:20px}
#search-404 p{font-size:90%;color:#999;padding:20px 20px 0;text-align:right}
#search404 input[type=search]{width:100%;border-radius:99em;height:48px;box-shadow:0 1px 6px 0 rgba(32,33,36,0);border:1px solid #dfe1e5;padding:0 48px 0 24px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fff;transition:all .3s}
#search404 input[type=search]:focus{background:#fff;box-shadow:0 1px 6px 0 rgba(32,33,36,0.28)}
#search404 .src-btn404{background:transparent;border:none;padding:0 20px;outline:none;height:48px;line-height:48px;font-weight:700;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}
@media screen and (max-width:640px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}}
</style>
</b:if>Langkah selanjutnya, Cari kode <body> kemudian letakkan kode ini dibawahnya.
<b:if cond='!data:view.isError'>Kemudian tambahkan kode di bawah ini sebelum </body>
</b:if>
<b:if cond='data:view.isError'>
<div class='error-wrapper' id='error-wrapper'>
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>
<div><span class='zigg'>404</span></div>
</div>
<h2>Page Not Found</h2>
<p>The page you were trying to visit has disappeared or moved to another dimension. Perhaps searching will help.<br/></p>
</div>
<div id='search-404'>
<form action='/search' id='search404'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='src-form404' name='q' placeholder='Search here...' required='required' type='search'/>
<button class='src-btn404' title='Search' type='submit'>
<svg class='icons icon-Search' viewBox='0 0 24 24'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/>
</svg>
</button>
</form>
<p>
Or, back to
<a expr:href='data:blog.homepageUrl'>
homepage
<svg class='icons icon-Forward' viewBox='0 0 24 24'>
<path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/>
</svg>
</a>
</p>
</div>
</div>
</div>
</b:if>Langkah selanjutnya klik tombol Simpan tema dan lihat hasilnya.
Untuk pilihan tampilan ke dua, tinggal sobat pilih CSS versi ini
<b:if cond='data:view.isError'>
<style>
/* Error 404 */
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}@keyframes movebg{0%{transform:scale(1)}50%{transform:scale(1.6) rotate(15deg)}100%{transform:scale(1)}}@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}body{background:#12253e;color:rgba(255,255,255,.85);line-height:1.4em}body:before{content:'';background:#fff url(https://1.bp.blogspot.com/-U_L4Azlx-hU/Xx2GZiaUfGI/AAAAAAAAAUw/1ulmLXUE8wUYuXgvZpsWvcIYDp46ZmEXgCLcBGAsYHQ/s1600/anime-girls.jpg);background-size:cover;position:fixed;top:0;bottom:0;right:0;left:0;opacity:.1;animation:movebg 50s linear infinite}#error-page{background:transparent;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}#error-inner{position:relative;margin:9% auto 35px;padding:0;list-style:none!important}#error-inner .box-404{display:inline-block;position:relative;font-family:monospace;box-shadow:0 0 0 5px rgba(0,0,0,.3);width:150px;height:150px;background:#feca57;color:#000;font-size:55px;line-height:150px;margin:30px auto 35px auto;border-radius:99em;animation:rotating .8s linear}#error-inner h3{text-transform:uppercase;color:rgba(255,255,255,.85);font-size:50px;margin:0 auto 10px;font-weight:500;letter-spacing:8px;animation:bounceInLeft 1.2s linear}#error-inner h2{color:rgba(255,255,255,.85);font-weight:500;line-height:1.4em;font-size:30px;text-decoration:line-through}#error-inner p{line-height:1.7em;font-size:18px;color:rgba(255,255,255,.85);padding:0;margin:15px auto 0 auto;max-width:640px}#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}#search-404 .icons{width:26px;height:26px;outline:none;fill:rgba(255,255,255,1);vertical-align:middle;transition:all .3s}#search-404 .icons:hover{fill:rgba(255,255,255,.85)}#search-404:hover .icons,#search-404:active .icons{fill:#fff}#search-404 .icon-Forward{width:20px;height:20px}#search-404 p{font-size:90%;color:rgba(255,255,255,.85);padding:20px 20px 0;text-align:right}#search-404 a{color:#feca57}#search404 input[type=search]{width:100%;border-radius:99em;height:48px;color:rgba(255,255,255,.75);box-shadow:0 0 0 5px rgba(255,255,255,.1);border:1px solid rgba(0,0,0,0.05);padding:0 58px 0 30px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:rgba(13,26,45,.85);transition:all .6s cubic-bezier(.47,1.64,.41,.8)}#search404 input[type=search]:hover{border-color:rgba(0,0,0,0.08)}#search404 input[type=search]:focus{box-shadow:inset 0 0 0 0.1rem rgba(0,0,0,.05);box-shadow:0 0 0 5px rgba(255,255,255,.25)}#search404 .src-btn404{background:transparent;border:none;padding:0 26px;outline:none;height:48px;line-height:48px;font-weight:500;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}#search404 input[type=search]::placeholder{color:rgba(255,255,255,.85)}
@media screen and (max-width:640px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}#error-inner h3,#error-inner p{display:none}}
</style>
</b:if>Ganti kode yang ditandai untuk mengganti background-nya.
Untuk pilihan tampilan ke tiga, sobat pilih CSS dan HTML ini. Tambahkan seperti cara di atas :
CSS
<b:if cond='data:view.isError'>
<style>
/* Error 404 */
body{background:#28254C;line-height:1.4em;overflow:hidden}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}#error-page{margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}
.ghbox{position:relative;width:100%;max-width:550px;height:100%;max-height:600px;min-height:450px;background:#332F63;border-radius:20px;margin:12% auto 0 auto;text-align:center;padding:20px 40px}.ghbox .ghboxghosty{padding:15px 25px 25px;position:absolute;left:50%;top:30%;transform:translate(-50%,-30%)}.ghbox .ghboxghosty .symbol:nth-child(1){opacity:.2;animation:shinee 4s ease-in-out 3s infinite}.ghbox .ghboxghosty .symbol:nth-child(1):before,.ghbox .ghboxghosty .symbol:nth-child(1):after{content:'';width:12px;height:4px;background:#fff;position:absolute;border-radius:5px;bottom:65px;left:0}.ghbox .ghboxghosty .symbol:nth-child(1):before{transform:rotate(45deg)}.ghbox .ghboxghosty .symbol:nth-child(1):after{transform:rotate(-45deg)}.ghbox .ghboxghosty .symbol:nth-child(2){position:absolute;left:-5px;top:30px;height:18px;width:18px;border:4px solid;border-radius:50%;border-color:#fff;opacity:.2;animation:shinee 4s ease-in-out 1.3s infinite}.ghbox .ghboxghosty .symbol:nth-child(3){opacity:.2;animation:shinee 3s ease-in-out .5s infinite}.ghbox .ghboxghosty .symbol:nth-child(3):before,.ghbox .ghboxghosty .symbol:nth-child(3):after{content:'';width:12px;height:4px;background:#fff;position:absolute;border-radius:5px;top:5px;left:40px}.ghbox .ghboxghosty .symbol:nth-child(3):before{transform:rotate(90deg)}.ghbox .ghboxghosty .symbol:nth-child(3):after{transform:rotate(180deg)}.ghbox .ghboxghosty .symbol:nth-child(4){opacity:.2;animation:shinee 6s ease-in-out 1.6s infinite}.ghbox .ghboxghosty .symbol:nth-child(4):before,.ghbox .ghboxghosty .symbol:nth-child(4):after{content:'';width:15px;height:4px;background:#fff;position:absolute;border-radius:5px;top:10px;right:30px}.ghbox .ghboxghosty .symbol:nth-child(4):before{transform:rotate(45deg)}.ghbox .ghboxghosty .symbol:nth-child(4):after{transform:rotate(-45deg)}.ghbox .ghboxghosty .symbol:nth-child(5){position:absolute;right:5px;top:40px;height:12px;width:12px;border:3px solid;border-radius:50%;border-color:#fff;opacity:.2;animation:shinee 1.7s ease-in-out 7s infinite}.ghbox .ghboxghosty .symbol:nth-child(6){opacity:.2;animation:shinee 2s ease-in-out 6s infinite}.ghbox .ghboxghosty .symbol:nth-child(6):before,.ghbox .ghboxghosty .symbol:nth-child(6):after{content:'';width:15px;height:4px;background:#fff;position:absolute;border-radius:5px;bottom:65px;right:-5px}.ghbox .ghboxghosty .symbol:nth-child(6):before{transform:rotate(90deg)}.ghbox .ghboxghosty .symbol:nth-child(6):after{transform:rotate(180deg)}.ghbox .ghboxghosty .ghboxghost-container{background:#fff;width:100px;height:100px;border-radius:100px 100px 0 0;position:relative;margin:0 auto;animation:upndown 3s ease-in-out infinite}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes{position:absolute;left:50%;top:45%;height:12px;width:70px}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes .ghboxeye-left{width:12px;height:12px;background:#332F63;border-radius:50%;margin:0 10px;position:absolute;left:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes .ghboxeye-right{width:12px;height:12px;background:#332F63;border-radius:50%;margin:0 10px;position:absolute;right:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom{display:flex;position:absolute;top:100%;left:0;right:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom div{flex-grow:1;position:relative;top:-10px;height:20px;border-radius:100%;background-color:#fff}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom div:nth-child(2n){top:-12px;margin:0 -0px;border-top:15px solid #332F63;background:transparent}.ghbox .ghboxghosty .ghboxghosty-shadow{height:20px;ghbox-shadow:0 50px 15px 5px #3B3769;border-radius:50%;margin:0 auto;animation:smallnbig 3s ease-in-out infinite}.ghbox .ghboxdescription{position:absolute;bottom:30px;left:50%;transform:translateX(-50%)}.ghbox .ghboxdescription .ghboxdescription-container{color:#fff;text-align:center;max-width:450px;font-size:16px;margin:0 auto}.ghbox .ghboxdescription .ghboxdescription-container .ghboxdescription-title{font-size:24px;letter-spacing:.5px}.ghbox .ghboxdescription .ghboxdescription-container .ghboxdescription-text{color:rgba(255,255,255,.5);margin-top:20px}.ghbox .ghboxdescription .ghboxbutton{display:block;position:relative;background:#FF5E65;border:2px solid transparent;border-radius:99em;height:45px;text-align:center;text-decoration:none;color:#fff;line-height:41px;font-size:16px;padding:0 70px;white-space:nowrap;margin:25px auto 0 auto;transition:background .5s ease;overflow:hidden}.ghbox .ghboxdescription .ghboxbutton:hover{background:transparent;border-color:#fff}@keyframes upndown{0%{transform:translateY(5px)}50%{transform:translateY(15px)}100%{transform:translateY(5px)}}@keyframes smallnbig{0%{width:90px}50%{width:100px}100%{width:90px}}@keyframes shinee{0%{opacity:.2}25%{opacity:.1}50%{opacity:.2}100%{opacity:.2}}
@media screen and (max-width:640px) {.ghbox{width:auto}}
</style>
</b:if>Markup
</b:if>
<b:if cond='data:view.isError'>
<div id='error-page'>
<div class='ghbox'>
<div class='ghboxghosty'>
<div class='symbol'/>
<div class='symbol'/>
<div class='symbol'/>
<div class='symbol'/>
<div class='symbol'/>
<div class='symbol'/>
<div class='ghboxghost-container'>
<div class='ghboxghosty-eyes'>
<div class='ghboxeye-left'/>
<div class='ghboxeye-right'/>
</div>
<div class='ghboxghosty-bottom'>
<div/>
<div/>
<div/>
<div/>
<div/>
</div>
</div>
<div class='ghboxghosty-shadow'/>
</div>
<div class='ghboxdescription'>
<div class='ghboxdescription-container'>
<div class='ghboxdescription-title'>Page Not Found</div>
<div class='ghboxdescription-text'>The page you were trying to visit has disappeared or moved to another dimension.</div>
</div>
<a class='ghboxbutton' expr:href='data:blog.homepageUrl'>Homepage</a>
</div>
</div>
</div>
<script>
//<![CDATA[
// Moving Eyes
var pageX=$(document).width(),pageY=$(document).height(),mouseY=0,mouseX=0;$(document).mousemove(function(e){mouseY=e.pageY,yAxis=(pageY/2-mouseY)/pageY*300,mouseX=e.pageX/-pageX,xAxis=100*-mouseX-100,$(".ghboxghosty-eyes").css({transform:"translate("+xAxis+"%,-"+yAxis+"%)"})});
//]]>
</script>
</b:if>Untuk pilihan tampilan ke empat, sobat tidak perlu menambahkan kode di atas. Tambahkan kode ini sebelum </head>
<b:if cond='data:view.isError'>
<div class='arlinacode'>
<header class='arlinacode__content'>
<h1 class='arlinacode__title'>ERROR 404</h1>
<div class='arlinacode__text'>The page you were trying to visit has disappeared or moved to another dimension.</div>
</header>
<footer class='arlinacode__footer'>
<a expr:href='data:blog.homepageUrl' class='ripple tombol'>Back to Homepage</a>
</footer>
<div class='wave'/>
<div class='wave wave2'/>
<div class='wave wave3'/>
</div>
</b:if>Kemudian tambahkan kode ini tepat di bawah <body> atau bisa juga ditambahkan sebelum </body>
<b:if cond='data:view.isError'>
<style>
*,*::before,*::after{box-sizing:border-box}
html,body{font-size:12px;overflow:hidden;text-align:center;line-height:1.4;overflow:hidden;width:100%}
.arlinacode,html,body{height:100vh}
@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes wave{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.arlinacode__content{color:#fff;font-weight:300;padding:0 2rem}
.arlinacode__content,.arlinacode__footer{width:100%;position:relative;z-index:100}
.arlinacode,.arlinacode__content,.arlinacode__footer{display:flex;align-items:center;justify-content:center}
.arlinacode,.arlinacode__content{flex-direction:column}
.arlinacode__footer{flex-wrap:wrap;max-width:600px;opacity:0;animation:charge .5s .5s forwards}
.arlinacode__subtitle,.arlinacode__title{margin:0}
.arlinacode__footer a{text-decoration:none;width:40%;padding:12px 18px;font-size:16px;margin:20px auto 0 auto;cursor:pointer;color:#fff;border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.arlinacode__footer a:active,.arlinacode__footer a:focus,{outline:none}
.arlinacode__footer a:hover{background-color:#fff;color:#222;border-color:#fff}
.arlinacode__subtitle,.arlinacode__text,.arlinacode__title{backface-visibility:hidden}
.arlinacode__title{font-size:2.4rem;font-weight:700;opacity:0;animation:charge .5s forwards}
.arlinacode__text{max-width:50rem;font-weight:normal;padding:2rem 0;font-size:1.3rem;color:rgba(255,255,255,.9);opacity:0;animation:charge .5s .3s forwards}
.wave{opacity:.6;position:absolute;bottom:40%;left:50%;width:6000px;height:6000px;background:#000;margin-left:-3000px;transform-origin:50% 48%;border-radius:46%;animation:wave 12s infinite linear;pointer-events:none}
.wave2{animation:wave 28s infinite linear;opacity:.3}
.wave3{animation:wave 20s infinite linear;opacity:.1}
.wave{background:#000}
.arlinacode{position:relative;background-color:#74b9ff;z-index:999}
.ripple{background-position:center;transition:background 0.8s}
.ripple:hover{background:#37474F radial-gradient(circle,transparent 1%,#263238 1%) center/15000%}
.ripple:active{background-color:#37474F;background-size:100%;transition:background 0s}
@media (min-width:768px){.arlinacode__title{font-size:3.4rem;margin:0 auto 20px auto}.arlinacode__text{font-size:1.5rem}}
</style>
</b:if>Simpan tema dan lihat hasilnya di blog sobat dengan cara menambahkan /error404 di belakang url blog sobat seperti ini
https://www.alamat_blog.com/error404Itulah tentang Cara Memasang Halaman Error 404 di Blogger dari Arlina Code. Terima kasih dan wassalam.