Oleh karena itu, wajib hukumnya sebuah web atau blog memiliki sebuah laman sebagai pemberitahuan yang menunjukkan kepada pengunjung bahwa halaman yang mereka cari sudah tidak ada lagi.
Pada tutorial X ini Aurelisa akan menambahkan laman Not Found pada Blogger yang saya dapat dari template Nubie Fast 2 Responsive Blogger Template (Namina Kiky)
Ngomong ngomong kalo ada yang mau nyumbangin template boleh dikirim di email ensikology@gmail.com ya xD
Langkah-langkah membuat laman Not Found 404
1. Tambahkan kode dibawah ini dibawah <b:includable id='comments' var='post'>...</b:includable> atau terserah mau dimana. <b:includable id='errorpage' var='posts'>
<b:if cond='data:blog.pageType == "error_page"'>
<div class='ensikologyError'>
<div class='container-floud'>
<div class='col-xs-12 ground-color text-center'>
<div class='container-error-404'>
<div class='clip'>
<div class='shadow'><span class='digit thirdDigit'/></div>
</div>
<div class='clip'>
<div class='shadow'><span class='digit secondDigit'/></div>
</div>
<div class='clip'>
<div class='shadow'><span class='digit firstDigit'/></div>
</div>
<div class='msg'>Oh!<span class='triangle'/></div>
</div>
<div class='emoji emoji--wow'>
<div class='emoji__face'>
<div class='emoji__eyebrows'/>
<div class='emoji__eyes'/>
<div class='emoji__mouth'/>
</div>
</div>
<div class='error-msg-container'>
<p>Halaman yang anda tuju tidak dapat ditemukan, Mamank Garox akan mencoba untuk memperbaiki kesalahan ini.</p>
</div>
<h2 class='h1'><a expr:href='data:blog.homepageUrl' title='Back to Home page'>Home page</a></h2>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// Error 404
function randomNum(){"use strict";return Math.floor(9*Math.random())+1}var loop1,loop2,loop3,number,time=30,i=0,selector3=document.querySelector(".thirdDigit"),selector2=document.querySelector(".secondDigit"),selector1=document.querySelector(".firstDigit");loop3=setInterval(function(){"use strict";i>40?(clearInterval(loop3),selector3.textContent=4):(selector3.textContent=randomNum(),i++)},time),loop2=setInterval(function(){"use strict";i>80?(clearInterval(loop2),selector2.textContent=0):(selector2.textContent=randomNum(),i++)},time),loop1=setInterval(function(){"use strict";i>100?(clearInterval(loop1),selector1.textContent=4):(selector1.textContent=randomNum(),i++)},time);
//]]>
</script>
</b:if>
</b:includable>2. Untuk CSS nya seperti dibawah ini.
<b:if cond='data:blog.pageType == "error_page"'>
<style>
/* ERROR PAGE */
#blog-pager, #sidebar-wrapper {display: none;}
#post-wrapper {width: 100%;max-width: 100%;}
#sidebar-wrapper{display:none}
.ensikologyError .clip .shadow{height:180px}
.ensikologyError .clip:nth-of-type(1) .shadow,.ensikologyError .clip:nth-of-type(3) .shadow{width:250px}
.ensikologyError .container-error-404{margin:20px auto;position:relative;height:250px;padding-top:40px;text-align:center;animation:fadeInDown 1s}
.ensikologyError .container-error-404 .clip{display:inline-block}
.ensikologyError .clip .shadow{overflow:hidden}
.ensikologyError .digit{background:#f44336;color:#fff;width:150px;height:150px;line-height:150px;font-size:5rem;font-weight:500;position:relative;top:8%;border-radius:50%;display:inline-block;text-align:center}
.ensikologyError .clip:nth-of-type(1) .digit{right:-10%}
.ensikologyError .clip:nth-of-type(3) .digit{left:-10%}
.ensikologyError h2{margin:60px auto;position:relative;overflow:hidden;display:table;cursor:pointer;letter-spacing:0;text-align:center;background:#fff;color:#2e87e7;font-size:14px;font-weight:400;padding:8px 18px;border-radius:3px;border:1px solid #2e87e7;transition:all .3s;animation:rubberBand 1s}
.ensikologyError h2 a{color:#2e87e7}
.ensikologyError h2:hover{background:#2e87e7;color:#fff}
.ensikologyError h2:hover a{color:#fff}
.ensikologyError .msg{position:absolute;display:block;background:#f39c12;color:#fff;border-radius:99em;top:0;left:7%;width:50px;height:50px;line-height:50px;animation:rubberBand infinite 1s}
.ensikologyError .triangle{position:absolute;z-index:999;transform:rotate(45deg);content:"";width:0;height:0;top:80%;right:0%;border-left:10px solid #f39c12;border-top:5px solid transparent;border-bottom:5px solid transparent}
.emoji{width:120px;height:120px;margin:20px auto;background:#FFDA6A;display:table;border-radius:99em;position:relative;text-align:center;animation:fadeInDown 1s}
.emoji__face,.emoji__eyebrows,.emoji__eyes,.emoji__mouth,.emoji__tongue,.emoji__heart,.emoji__hand,.emoji__thumb{position:absolute}
.emoji__face:before,.emoji__face:after,.emoji__eyebrows:before,.emoji__eyebrows:after,.emoji__eyes:before,.emoji__eyes:after,.emoji__mouth:before,.emoji__mouth:after,.emoji__tongue:before,.emoji__tongue:after,.emoji__heart:before,.emoji__heart:after,.emoji__hand:before,.emoji__hand:after,.emoji__thumb:before,.emoji__thumb:after{content:'';position:absolute}
.emoji__face{width:inherit;height:inherit}
.emoji--wow .emoji__face{animation:ensikologyFace 3s linear infinite}
@keyframes ensikologyFace{
15%,25%{
transform:rotate(20deg) translateX(-25px)
}
45%,65%{
transform:rotate(-20deg) translateX(25px)
}
75%,100%{
transform:rotate(0deg) translateX(0)
}
}
@keyframes ensikologyBrow{
15%,65%{
top:25px
}
75%,100%,0%{
top:15px
}
}
@keyframes ensikologyMouth{
10%,30%{
width:20px;
height:20px;
left:calc(50% - 10px)
}
50%,70%{
width:30px;
height:40px;
left:calc(50% - 15px)
}
75%,100%{
height:50px
}
}
.emoji--wow .emoji__eyebrows{left:calc(50% - 3px);height:6px;width:6px;border-radius:50%;background:transparent;box-shadow:-18px 0 0 0 #000000,-33px 0 0 0 #000000,18px 0 0 0 #000000,33px 0 0 0 #000000;animation:ensikologyBrow 3s linear infinite}
.emoji--wow .emoji__eyebrows:before,.emoji--wow .emoji__eyebrows:after{width:24px;height:20px;border:6px solid #000000;box-sizing:border-box;border-radius:50%;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;top:-3px;left:calc(50% - 12px)}
.emoji--wow .emoji__eyebrows:before{margin-left:-25px}
.emoji--wow .emoji__eyebrows:after{margin-left:25px}
.emoji--wow .emoji__eyes{width:16px;height:24px;left:calc(50% - 8px);top:35px;border-radius:50%;background:transparent;box-shadow:25px 0 0 0 #000000,-25px 0 0 0 #000000}
.emoji--wow .emoji__mouth{width:30px;height:45px;left:calc(50% - 15px);top:50%;border-radius:50%;background:#000000;animation:ensikologyMouth 3s linear infinite}
.error-msg-container{margin:30px auto 40px auto;max-width:650px;width:90%;text-align:center}
.error-msg-container a{color:#254e4f;text-decoration:none;transition:.3s}
.error-msg-container a:hover{color:#ddd}
@media(max-width:768px){
.ensikologyError .clip:nth-of-type(1) .shadow,.ensikologyError .clip:nth-of-type(3) .shadow{width:auto}
.ensikologyError .clip:nth-of-type(1) .digit{right:initial}
.ensikologyError .clip:nth-of-type(3) .digit{left:initial}
.ensikologyError .clip .shadow{height:100px}
.ensikologyError .digit{width:80px;height:80px;line-height:80px;font-size:2rem}
.ensikologyError h2{font-size:24px}
.ensikologyError .container-error-404{height:150px}}
.post p{padding:50px 0}
</style>
</b:if>3. Simpan dan lihat hasilnya.
Untuk mencoba silahkan ganti dg alamat kalian masing masing, contoh https://aurealisa.blogspot.com/404.HTML
Demo
Mudahkan, bagi yang masih bingung silahkan berkomentar di komentar baru disqus ini agar anda berhasil.! demikian artikel mengenai Membuat 404 Not Found saat Halaman tidak ditemukan, semoga bermanfaat..
Add your comment Hide comment