Dalam artikel tutorial kali ini, kita akan menggunakan Tag Kondisional Halaman Error untuk membuat Custom Error 404 Page. Dengan menggunakan Tag Kondisional pada pembuatan halaman error akan membuat pengerjaan pembuatan halaman error akan lebih mudah.
3. Tambahkan kode dibawah ini diantara kedua tag tersebut.
Untuk melihat halaman error 404 tersebut tambahkan /404 di belakang url blog kalian
Source and demo : https://codepen.io/saransh/pen/aezht
Membuat Halaman Custom Error 404 di Blogspot
1. Cari kode dibawah ini ditemplate kalian, jika tidak ada tambahkan kode berikut dibawah kode <body><b:if cond="data:blog.pageType == "error_page"">
/* bagian ini diisi dengan kode halaman custom 404 */
</b:if>3. Tambahkan kode dibawah ini diantara kedua tag tersebut.
<style scoped='scoped' type='text/css'>
body {
background-color: #2F3242;
}
svg {
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -400px;
}
.message-box {
height: 200px;
width: 380px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: 50px;
color: #FFF;
font-family: Roboto;
font-weight: 300;
}
.message-box h1 {
font-size: 60px;
line-height: 46px;
margin-bottom: 40px;
}
.buttons-con .action-link-wrap {
margin-top: 40px;
}
.buttons-con .action-link-wrap a {
background: #68c950;
padding: 8px 25px;
border-radius: 4px;
color: #FFF;
font-weight: bold;
font-size: 14px;
transition: all 0.3s linear;
cursor: pointer;
text-decoration: none;
margin-right: 10px
}
.buttons-con .action-link-wrap a:hover {
background: #5A5C6C;
color: #fff;
}
#Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 {
animation: float 1s infinite ease-in-out alternate;
}
#Polygon-2 {
animation-delay: .2s;
}
#Polygon-3 {
animation-delay: .4s;
}
#Polygon-4 {
animation-delay: .6s;
}
#Polygon-5 {
animation-delay: .8s;
}
@keyframes float {
100% {
transform: translateY(20px);
}
}
@media (max-width: 450px) {
svg {
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -190px;
}
.message-box {
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -190px;
text-align: center;
}
}
</style>
<div id='error-page'>
<svg height='500px' version='1.1' viewBox='0 0 837 1045' width='380px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink'>
<g fill='none' fill-rule='evenodd' id='Page-1' sketch:type='MSPage' stroke='none' stroke-width='1'>
<path d='M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z' id='Polygon-1' sketch:type='MSShapeGroup' stroke='#007FB2' stroke-width='6'/>
<path d='M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z' id='Polygon-2' sketch:type='MSShapeGroup' stroke='#EF4A5B' stroke-width='6'/>
<path d='M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z' id='Polygon-3' sketch:type='MSShapeGroup' stroke='#795D9C' stroke-width='6'/>
<path d='M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z' id='Polygon-4' sketch:type='MSShapeGroup' stroke='#F2773F' stroke-width='6'/>
<path d='M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z' id='Polygon-5' sketch:type='MSShapeGroup' stroke='#36B455' stroke-width='6'/>
</g>
</svg>
<div class='message-box'>
<h1>404</h1>
<p>We are terribly sorry, but the URL you typed no longer exists. It might have been moved or deleted, or perhaps you mistyped it.</p>
<div class='buttons-con'>
<div class='action-link-wrap'>
<a class='link-button link-back-button' onclick='history.back(-1)'>Go Back</a>
<a class='link-button' expr:href='data:blog.homepageUrl'>Go to Home Page</a>
</div>
</div>
</div>
</div>
Untuk melihat halaman error 404 tersebut tambahkan /404 di belakang url blog kalian
Source and demo : https://codepen.io/saransh/pen/aezht
