Cara Membuat Halaman 404 'Not Found' Di Blogger

Pernah tidak sobat membuka suatu blog atau website namun blog atau website tersebut tidak memunculkan artikel yang sobat cari, yang muncul hanyalah ha
Shandy irianto

TechPapuaID - Pernah tidak sobat membuka suatu blog atau website namun blog atau website tersebut tidak memunculkan artikel yang sobat cari, yang muncul hanyalah halaman kosong yang bertuliskan 404 Not Found atau halaman tersebut tidak ada alias kosong.

Pada kesempatan kali ini admin akan sedikit membuat tutorial Cara Membuat Halaman 404 Di Blogger yang admin sedikit kutip code dari ArlinaDesign Atau ArlinaCode, Untuk lanjut ke tutorialnya mari kita mengenal apa itu 404 Not Found yang harus kalian tahu terlebih dahulu agar sobat tahu kegunaan dari halaman tersebut. Silahkan baca dengan seksama

Perkenalan

Apa itu 404 Not Found?
404 Not Found adalah halaman yang telah terhapus oleh pemilik blog atau website yang telah diganti tanggal atau terhapus. Bisa juga karena sobat salah menuliskan link tujuan sobat, maka hasilnya akan menjadi 404 Not Found atau halaman tidak tersedia. Di blogger sendiri sudah tersedia namun hanya sederhana dan tidak memiliki animasi yang bagus

Tutorial

Kita sudah sedikit mengenal apa itu 404 Not Found, sekarang kita akan melanjutkannya ke tahap pada inti artikel ini. Silahkan di baca step by step yang sudah admin tulis agar tidak terjadi eror atau kesalahan lainnya.

Pertama yang harus sobat lakukan adalah login ke dashboard blogger masing-masing lalu -> Klik Tema -> Edit HTML.
Jika sudah, silahkan sobat cari code </head> lalu copy code dibawah ini dan letakan tepat di atas code yang sudah admin sebutkan di atas
<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:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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, copy code dibawah ini lalu pastekan tepat di bawah code <body> 
<b:if cond='!data:view.isError'>
Langkah terakhir, silahkan Sobat copy code dibawah ini lalu letakan tepat di atas code </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>
Sekarang sobat bisa lihat hasilnya dengan cara save template yang sudah sobat edit tadi, atau lihat demonya disini :
Ada beberapa pilihan tampilan yang bisa sobat pilih jika pilihan diatas tidak cocok dengan blog sobat, silahkan pilih CSS dibawah 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:&#39;&#39;;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2x3HAIazlCeXhXbnRPmk6I-cK_jZyp7vfHBOB3nxGE1senueGtQnJihK72FQbDK_AITkOyfLJwrzxnKd5rSleNO49QgFMExIjm2WM_fTlosjwFDMgoNwaXbGC0DHtqixCJ7gF8olUQXUW/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>
Untuk mengganti background nya, sobat tinggal mengganti link yang sudah admin tandai warna merah. Untuk demo sobat bisa lihat disini Jika pilihan satu dan dua tidak cocok, sobat bisa menggunakan code CSS dan HTML dibawah ini, lakukan 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:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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>
Apa code 1, 2 dan 3 kurang cocok juga? Tenang admin sudah siapkan pilihan terakhir yang bisa sobat terapkan di blog sobat masing-masing. Sobat tidak perlu susah-susah menambahkan code diatas, sobat cukup pastekan code dibawah ini lalu letakan tepat diatas code </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>
Terakhir sobat tambahkan code dibawah ini pastekan tepat di bawah code <body> atau di atas code </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>
Maka hasilnya akan seperti demo dibawah ini  
Sekarang save dan lihat hasilnya di blog soba masing-masing, untuk pengecekan apakah code diatas berfungsi sebagai mana mestinya sobat bisa gunakan format /error404 pada akhir link blog sobat contoh
https://www.nama-blog.domain/error404
Begitulah tutorial Cara Membuat Halanan 404 Di Blogger yang bisa admin berikan pada kesempatan kali ini, jika ada kendala jangan sungkan untuk bertanya pada kolom komentar yang sudah di sediakan. Akhir kata admin ucapakan Terimakasih

Code by : ArlinaCode
Shandy irianto