When a user visits a page in your domain that is no longer available, either because the page no longer exists or the address mismatched, then he/she is redirected to a page named an Error Page or simply a 404 page.
In bloggers' default Template, there is a generic automated message i.e. "Sorry, the page you were looking for in this blog does not exist" showing error pages. The Blogger's error page design is such lame, It has a grey box with the above message, that definitely does not encourage users to navigate other areas of your site or help them to find what they are looking for.
In this tutorial, I'll be guiding you on how to customize bloggers' error pages or 404 pages and make them attractive. I'll share Two stylish Custom 404 Error Page Codes in this Article. So, Wanna check some cool features of our customized error pages.? Let's have a look below.
Features of the attractive custom 404 error page for blogger

- Highly animated.
- Stylish Design.
- Surprised Animated Cartoon with Pure CSS.
- 404 animated counter with javascript.
- A button that redirects users to the homepage.
- Full-width Error page.
- Catchy Page Title
What is a 404 Error?
Most people recognize this error message. As you know that A 404 error message occurs when we try to access a page or URL in your domain that is no longer available, either because the page no longer exists (or even the page that was meant to be deleted) or the address is -mismatched, then he/she is redirected to a page named an Error Page or simply a 404 page. To improve the appearance of the 404 error message, some websites create custom pages (but not a few then ignore it).
So, What motivated me to share this amazing Cutom 404 error page?
I already mentioned error pages for blogger are lame, so I was searching for some lightweight animation effects to implement in error pages for my blog to give it a fresh look. Lucky me, I found a cool error page with animation. I used the available code and played with CSS.
Later on, I implemented that design in my blog, and I fell in love with it. There was a thought going through my neurons that you guys will be more than happy to implement in your blog too. Therefore, I shared it with you all.
Configuration
I am Providing 2 Stylish Custom 404 Error Page in this Article. Use them according to your Need.
1. Animated Custom 404 Error Page with Emoji

How To Create Custom 404 Error Page in Blogger
Note :- Before starting this tutorial backup your blogger theme to avoid from any errors and problems.
I will make the task of installing a custom error page in blogger easy by breaking it into smaller ones. All the steps are straightforward: stay firmly.
Step 1: Adding a catchy title for the error page.
In this step, we will be adding a title tag for error pages. By default, The Page Not Found title tag is appended with these pages. Let's modify it.
- First of All You Need to Go to Your Blogger.com.
- Then Login with Your Blogger Account.
- After This Click on Theme Menu.
- Now Click on Edit HTML.
- Then Copy the Code Provided Below and Paste it Above the <head> tag in Your Theme.
- Don't forget to hit the save button.
<b:if cond='data:blog.pageType == "error_page"'>
<title>Oops. The Page you are Looking For is not Avaible.</title>
</b:if>
Step 2: Adding CSS Code for custom 404 Error Page.
I've divided the task of adding CSS, HTML, and Javascript code into two steps. Let's play safe and keep CSS code at the top and calling functions at the bottom.
- Go to Your Blogger Account.
- After This Click on Theme Menu.
- Now Click on Edit HTML.
- Then Copy the Code Provided Below and Paste it Above the </head> tag in Your Theme. Hit the save button.
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
/* Error 404 Page By techandfunzone.eu.org*/
body {
background: #2e2e2e
}
#footer-wrapper,
#header-wrapper,
#email-wrapper,
.menu,
.back-to-top {
display: none
} .error .clip .shadow {
height: 180px
}
.error .clip:nth-of-type(1) .shadow,
.error .clip:nth-of-type(3) .shadow {
width: 250px
}
.error .container-error-404 {
margin: 20px auto;
position: relative;
height: 250px;
padding-top: 40px;
text-align: center;
animation: fadeInDown 1s
}
.error .container-error-404 .clip {
display: inline-block
}
.error .clip .shadow {
overflow: hidden
}
.error .digit {
background: #F36753;
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;
transition: all .2s;
}
.error .clip:nth-of-type(1) .digit {
right: -10%
}
.error .clip:nth-of-type(3) .digit {
left: -10%
}
.error h2 {
margin: 60px auto;
position: relative;
overflow: hidden;
display: table;
cursor: pointer;
letter-spacing: 0;
text-align: center;
background: #F36753;
color: #fff;
font-size: 14px;
font-weight: 400;
padding: 8px 18px;
border-radius: 3px;
border: 1px solid #F36753;
transition: all .3s;
animation: rubberBand 1s
}
.error h2 a {
color: #fff
}
.error h2:hover {
background: #fff;
color: #F36753
}
.error h2:hover a {
color: #F36753
}
.error .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
}
.error .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: wow-face 3s linear infinite
}
.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: wow-brow 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: wow-mouth 3s linear infinite
}
.text {
text-align: center;
text-transform: uppercase;
color: #fff;
font-weight: bold;
line-height: 1.4em;
font-size: 50px;
margin-top: -55px!important;
}
@keyframes wow-face {
15%, 25% {
transform: rotate(20deg) translateX(-25px)
}
45%,
65% {
transform: rotate(-20deg) translateX(25px)
}
75%,
100% {
transform: rotate(0deg) translateX(0)
}
}
@keyframes wow-brow {
15%, 65% {
top: 25px
}
75%,
100%,
0% {
top: 15px
}
}
@keyframes wow-mouth {
10%, 30% {
width: 20px;
height: 20px;
left: calc(50% - 10px)
}
50%,
70% {
width: 30px;
height: 40px;
left: calc(50% - 15px)
}
75%,
100% {
height: 50px
}
}
@media(max-width:768px){.error .clip:nth-of-type(1) .shadow,
.error .clip:nth-of-type(3) .shadow {
width: auto
}
.error .clip:nth-of-type(1) .digit {
right: initial
}
.error .clip:nth-of-type(3) .digit {
left: initial
}
.error .clip .shadow {
height: 100px
}
.error .digit {
width: 80px;
height: 80px;
line-height: 80px;
font-size: 2rem
}
.error h2 {
font-size: 24px
}
.error .container-error-404 {
height: 150px
}
}
</style>
</b:if>
Step 3: Adding HTML and JavaScript code for custom 404 page.
- Go to Your Blogger Account.
- After This Click on Theme Menu.
- Now Click on Edit HTML.
- Then Copy the Code Provided Below and Paste it Above the </body> tag in Your Theme. Hit the save button.
- Change https://techandfunzone.eu.org/ with your web address.
<b:if cond='data:blog.pageType == "error_page"'>
<div class='error'>
<div class='container-floud'>
<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>
<div class='text'>Page Not Found :(</div>
<div class='emoji emoji--wow'>
<div class='emoji__face'>
<div class='emoji__eyebrows'/>
<div class='emoji__eyes'/>
<div class='emoji__mouth'/>
</div>
</div>
<h2 class='h1'><a href='https://www.techandfunzone.eu.org/' title='Back to Home page'>Go to Homepage</a></h2>
</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>
Here are a few hand-picked articles for you to navigate
2. Simple & Elegant Custom 404 Error Page

Step 1: Adding a catchy title for the error page.
In this step, we will be adding a title tag for error pages. By default, The Page Not Found title tag is appended with these pages. Let's modify it.
- First of All You Need to Go to Your Blogger.com.
- Then Login with Your Blogger Account.
- After This Click on Theme Menu.
- Now Click on Edit HTML.
- Then Copy the Code Provided Below and Paste it Above the <head> tag in Your Theme.
- Don't forget to hit the save button.
<b:if cond='data:blog.pageType == "error_page"'>
<title>Oops. The Page you are Looking For is not Avaible.</title>
</b:if>
Step 2: Adding CSS Code for custom 404 Error Page.
I've divided the task of adding CSS, HTML, and Javascript code into two steps. Let's play safe and keep CSS code at the top and calling functions at the bottom.
- Go to Your Blogger Account.
- After This Click on Theme Menu.
- Now Click on Edit HTML.
- Then Copy the Code Provided Below and Paste it Above the </head> tag in Your Theme. Hit the save button.
<b:if cond='data:view.isError'><style>
:root{
--button-bg: #652f8f;
--button-bg: #652f8f;
--button-bg2: #652f8f;
--button-color: #ffffff;
--hover-button-bg: #652f8f;
--hover-button-color: #ffffff;
--mobile-color: #652f8f;
--mobile-bg: #ffffff;
--button-bg2: #652f8f;
}
.error404 #main-wrapper{width:100%}
.error404 #sidebar-wrapper{display:none}
.errorWrap{color:#444444;text-align:center;padding:60px 0;width:50%;margin:0 auto;}
.errorWrap h3{font-size:160px;line-height:1em;margin:0 0 20px}
.errorWrap h4{font-size:25px;margin:0 0 20px}
.errorWrap p{margin:0 0 10px}
.errorWrap a{display:inline-block;height:32px;background-color:var(--button-bg);font-size:15px;color:var(--button-color);font-weight:700;line-height:32px;padding:0 20px;margin:15px 0 0;border-radius:2px}
.errorWrap a:hover{background-color:var(--hover-button-bg);color:var(--hover-button-color)}
.wheel{animation:wheel-rotate 6s ease infinite;transform-origin:center;transform-box:fill-box}
@keyframes wheel-rotate{50%{transform:rotate(360deg);animation-timing-function:cubic-bezier(0.55,0.085,0.68,0.53)}100%{transform:rotate(960deg)}}
.clock-hand-1{animation:clock-rotate 3s linear infinite;transform-origin:bottom;transform-box:fill-box}
.clock-hand-2{animation:clock-rotate 6s linear infinite;transform-origin:bottom;transform-box:fill-box}
@keyframes clock-rotate{100%{transform:rotate(360deg)}}
#box-top{animation:box-top-anim 2s linear infinite;transform-origin:right top;transform-box:fill-box}
@keyframes box-top-anim{50%{transform:rotate(-5deg)}}
#umbrella{animation:umbrella-anim 6s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes umbrella-anim{25%{transform:translateY(10px) rotate(5deg)}75%{transform:rotate(-5deg)}}
#cup{animation:cup-rotate 3s cubic-bezier(0.455,0.03,0.515,0.955) infinite;transform-origin:top left;transform-box:fill-box}
@keyframes cup-rotate{50%{transform:rotate(-5deg)}}
#pillow{animation:pillow-anim 3s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes pillow-anim{25%{transform:rotate(10deg) translateY(5px)}75%{transform:rotate(-10deg)}}
#stripe{animation:stripe-anim 3s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes stripe-anim{25%{transform:translate(10px,0) rotate(-10deg)}75%{transform:translateX(10px)}}
#bike{animation:bike-anim 6s ease infinite}
@keyframes bike-anim{0%{transform:translateX(-1300px)}50%{transform:translateX(0);animation-timing-function:cubic-bezier(0.47,0,0.745,0.715)}100%{transform:translateX(1300px)}}
#rucksack{animation:ruck-anim 3s linear infinite;transform-origin:top;transform-box:fill-box}
@keyframes ruck-anim{50%{transform:rotate(5deg)}}
.error_page .circle{animation:circle-anim ease infinite;transform-origin:center;transform-box:fill-box;perspective:0}
.error_page .circle.c1{animation-duration:2s}
.error_page .circle.c2{animation-duration:3s}
.error_page .circle.c3{animation-duration:1s}
.error_page .circle.c4{animation-duration:1s}
.error_page .circle.c5{animation-duration:2s}
.error_page .circle.c6{animation-duration:3s}
@keyframes circle-anim{50%{transform:scale(.2) rotateX(360deg) rotateY(360deg)}}
.four,#ou{animation:four-anim cubic-bezier(0.39,0.575,0.565,1) infinite}
.four.a{transform-origin:bottom left;animation-duration:3s;transform-box:fill-box}
.four.b{transform-origin:bottom right;animation-duration:3s;transform-box:fill-box}
#ou{animation-duration:6s;transform-origin:center;transform-box:fill-box}
.cls-1{fill:#ffc541}
.cls-8.wheel,.cls-2{fill:var(--button-bg2)}
.cls-3{fill:var(--button-bg)}
.cls-4{fill:#f78d5e}
.cls-5{fill:#fa976c}
.cls-6,.cls-7,.cls-8{fill:#b65c32}
.cls-10,.cls-6{opacity:0.6}
.cls-7{opacity:0.4}
.cls-9{fill:#f4b73b}
.cls-11{fill:#f9c358}
.cls-12{fill:#9b462c}
.cls-13{fill:#aa512e}
.cls-14{fill:#7d6aa5}
@media screen and (max-width: 380px) {
.errorWrap h3{font-size:130px}
}
</style></b:if>
Adding HTML Tag
<b:if cond='data:view.isError'>
<div class="errorWrap">
<svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<title>404</title>
<g data-name="Layer 12" id="Layer_12 yellow-back-fig">
<path class="cls-1" d="M600.87,872H156a4,4,0,0,0-3.78,4.19h0a4,4,0,0,0,3.78,4.19H600.87a4,4,0,0,0,3.78-4.19h0A4,4,0,0,0,600.87,872Z"></path>
<rect class="cls-1" height="8.39" rx="4.19" ry="4.19" width="513.38" x="680.91" y="871.98"></rect>
<path class="cls-1" d="M1480,876.17h0c0,2.32,2.37,4.19,5.3,4.19h350.61c2.93,0,5.3-1.88,5.3-4.19h0c0-2.32-2.37-4.19-5.3-4.19H1485.26C1482.33,872,1480,873.86,1480,876.17Z"></path>
<rect class="cls-1" height="8.39" rx="4.19" ry="4.19" width="249.8" x="492.21" y="920.64"></rect>
<path class="cls-1" d="M1549.14,924.84h0a4.19,4.19,0,0,0-4.19-4.19H1067.46a14.66,14.66,0,0,1,.35,3.21v1A4.19,4.19,0,0,0,1072,929h472.94A4.19,4.19,0,0,0,1549.14,924.84Z"></path>
<path class="cls-1" d="M865.5,924.84h0a4.19,4.19,0,0,0,4.19,4.19h82.37a12.28,12.28,0,0,1-.19-2v-2.17a4.19,4.19,0,0,0-4.19-4.19h-78A4.19,4.19,0,0,0,865.5,924.84Z"></path>
<rect class="cls-1" height="8.39" rx="4.19" ry="4.19" width="54.72" x="915.6" y="981.47"></rect>
<path class="cls-1" d="M730.33,985.67h0c0,2.32,4.23,4.19,9.44,4.19h104.3c5.22,0,9.44-1.88,9.44-4.19h0c0-2.32-4.23-4.19-9.44-4.19H739.78C734.56,981.47,730.33,983.35,730.33,985.67Z"></path>
<rect class="cls-1" height="8.39" rx="4.19" ry="4.19" width="78.11" x="997.06" y="981.47"></rect>
<g id="round-conf">
<path class="cls-1 circle c1" d="M536.41,155.14a17.77,17.77,0,1,0,17.77,17.77A17.77,17.77,0,0,0,536.41,155.14Zm0,28.68a10.9,10.9,0,1,1,10.9-10.9A10.9,10.9,0,0,1,536.41,183.81Z"></path>
<path class="cls-1 circle c2" d="M1345.09,82.44a17.77,17.77,0,1,0,17.77,17.77A17.77,17.77,0,0,0,1345.09,82.44Zm0,28.68a10.9,10.9,0,1,1,10.9-10.9A10.9,10.9,0,0,1,1345.09,111.12Z"></path>
<path class="cls-1 circle c3" d="M70.12,363A17.77,17.77,0,1,0,87.89,380.8,17.77,17.77,0,0,0,70.12,363Zm0,28.68A10.9,10.9,0,1,1,81,380.8,10.9,10.9,0,0,1,70.12,391.7Z"></path>
<path class="cls-1 circle c4" d="M170.47,751.82a17.77,17.77,0,1,0,17.77,17.77A17.77,17.77,0,0,0,170.47,751.82Zm0,28.68a10.9,10.9,0,1,1,10.9-10.9A10.9,10.9,0,0,1,170.47,780.5Z"></path>
<path class="cls-1 circle c5" d="M1457.34,762.73a17.77,17.77,0,1,0,17.77,17.77A17.77,17.77,0,0,0,1457.34,762.73Zm0,28.68a10.9,10.9,0,1,1,10.9-10.9A10.9,10.9,0,0,1,1457.34,791.4Z"></path>
<path class="cls-1 circle c6" d="M1829.15,407.49a17.77,17.77,0,1,0,17.77,17.77A17.77,17.77,0,0,0,1829.15,407.49Zm0,28.68a10.9,10.9,0,1,1,10.9-10.9A10.9,10.9,0,0,1,1829.15,436.17Z"></path>
</g>
</g>
<g data-name="Layer 2" id="fortyfour">
<g class="four a">
<rect class="cls-2" height="466.29" rx="57.1" ry="57.1" transform="translate(918.39 330.19) rotate(90)" width="120.71" x="233.74" y="391.14"></rect>
<rect class="cls-3" height="396.88" rx="60.36" ry="60.36" width="120.71" x="333.83" y="475.1"></rect>
<rect class="cls-3" height="604.75" rx="60.36" ry="60.36" transform="translate(290.49 -70.78) rotate(35)" width="120.71" x="197.13" y="122.89"></rect>
</g>
<g class="four b">
<rect class="cls-2" height="466.29" rx="57.1" ry="57.1" transform="translate(2244.26 -994.14) rotate(90)" width="120.71" x="1558.84" y="391.91"></rect>
<rect class="cls-3" height="396.88" rx="60.36" ry="60.36" width="120.71" x="1658.92" y="475.87"></rect>
<rect class="cls-3" height="604.75" rx="60.36" ry="60.36" transform="translate(530.57 -830.68) rotate(35)" width="120.71" x="1522.22" y="123.66"></rect>
</g>
<path class="cls-3" d="M956.54,168.2c-194.34,0-351.89,157.55-351.89,351.89S762.19,872,956.54,872s351.89-157.55,351.89-351.89S1150.88,168.2,956.54,168.2Zm0,584.49c-128.46,0-232.6-104.14-232.6-232.6s104.14-232.6,232.6-232.6,232.6,104.14,232.6,232.6S1085,752.69,956.54,752.69Z" id="ou"></path>
</g>
<g data-name="Layer 3" id="umbrella">
<g>
<circle class="cls-4" cx="1187.53" cy="240.3" r="7.66" transform="translate(236.36 990.8) rotate(-49.71)"></circle>
<g>
<path class="cls-5" d="M1219.56,359.67l55,100.52c32.7-48.48-6.87-142.43-91.75-214.38-84.41-71.55-183-95.33-225.81-56l114.21,44.14Z"></path>
<path class="cls-6" d="M1182.79,245.81c-84.41-71.55-183-95.33-225.81-56l114.21,44.14Z"></path>
<polygon class="cls-7" points="1182.79 245.81 1071.19 233.91 1219.56 359.67 1182.79 245.81"></polygon>
</g>
<polygon class="cls-8" points="1180.91 409.02 1274.54 460.19 1219.56 359.67 1071.19 233.91 956.98 189.76 1021.95 274.29 1180.91 409.02"></polygon>
<g>
<rect class="cls-4" height="5.1" transform="translate(108.21 955.38) rotate(-49.71)" width="175.58" x="997.45" y="358.35"></rect>
<rect class="cls-4" height="32.27" rx="10.73" ry="10.73" transform="translate(515.04 -573.16) rotate(40.29)" width="21.46" x="1028.09" y="399.36"></rect>
</g>
</g>
</g>
<g data-name="Layer 4" id="pillow">
<path class="cls-1" d="M754,627.07c7,.54,12.92-2.82,13.35-7.59s-4.95-9.24-12-9.87a18.55,18.55,0,0,0-2.17,0l-74.9-81.64c0-.1,0-.19,0-.29,0-7.09-4-12.83-8.8-12.81s-8.75,5.77-8.73,12.87c0,0,0,.09,0,.13l-50.21,46.07h-.09c-7.06-.63-13.14,2.77-13.57,7.59s4.87,9.16,11.85,9.84l76.08,82.92s0,0,0,.06c0,7.09,4,12.83,8.8,12.81s8.65-5.66,8.71-12.65Z"></path>
<path class="cls-9" d="M669.46,514.82c-4.77-.83-8.75,5.77-8.73,12.87,0,0,0,.09,0,.13l-50.21,46.07h-.09c-7.06-.63-13.14,2.77-13.57,7.59s4.87,9.16,11.85,9.84l76.08,82.92s0,0,0,.06c0,7.09,4,12.83,8.8,12.81s8.65-5.66,8.71-12.65C570.55,573,702.07,520.47,669.46,514.82Z"></path>
</g>
<g data-name="Layer 7" id="cup">
<polygon class="cls-1" points="1173.69 748.21 1140.52 715.42 1195.79 647.35 1241.13 692.16 1173.69 748.21"></polygon>
<polygon class="cls-8" points="1173.69 748.21 1140.52 715.42 1143.93 711.27 1177.81 744.75 1173.69 748.21"></polygon>
<polygon class="cls-5" points="1194.68 731.46 1157.04 694.24 1183.8 661.7 1226.91 704.32 1194.68 731.46"></polygon>
<g class="cls-10">
<path class="cls-8" d="M1176.32,667.78h0a4.19,4.19,0,0,1,4.19,4.19v33.54a0,0,0,0,1,0,0h-8.38a0,0,0,0,1,0,0V672a4.19,4.19,0,0,1,4.19-4.19Z" transform="translate(822.53 -628.67) rotate(44.67)"></path>
<path class="cls-8" d="M1172.73,709.7l23.58-23.85a4.19,4.19,0,0,1,5.92,0h0a4.19,4.19,0,0,1,0,5.92l-23.58,23.85Z"></path>
<path class="cls-8" d="M1185.11,722.09l23.58-23.85a4.19,4.19,0,0,1,5.92,0h0a4.19,4.19,0,0,1,0,5.92L1191.06,728Z"></path>
</g>
<path class="cls-5" d="M1197.85,660.5h45.69a5.7,5.7,0,0,1,5.7,5.7v8.32a0,0,0,0,1,0,0h-57.09a0,0,0,0,1,0,0v-8.32A5.7,5.7,0,0,1,1197.85,660.5Z" transform="translate(829.53 -667.66) rotate(45)"></path>
<path class="cls-8" d="M1191.49,664.74h53.94a5.25,5.25,0,0,1,5.25,5.25v4.79a0,0,0,0,1,0,0h-64.44a0,0,0,0,1,0,0V670a5.25,5.25,0,0,1,5.25-5.25Z" transform="translate(822.83 -663.17) rotate(44.67)"></path>
</g>
<g data-name="Layer 8" id="clock">
<circle class="cls-5" cx="847.7" cy="247.59" r="74.66" transform="translate(-32.91 314.05) rotate(-20.6)"></circle>
<circle class="cls-1" cx="847.7" cy="247.59" r="63.44" transform="translate(-32.91 314.05) rotate(-20.6)"></circle>
<rect class="cls-3 clock-hand-1" height="58" rx="3.02" ry="3.02" width="6.04" x="845" y="189.5"></rect>
<rect class="cls-3 clock-hand-2" height="38" rx="3.02" ry="3.02" transform="translate(1611.22 -230.4) rotate(130.4)" width="6.04" x="845" y="209.5"></rect>
<circle class="cls-3" cx="847.7" cy="247.59" r="3" transform="translate(-32.91 314.05) rotate(-20.6)"></circle>
</g>
<g data-name="Layer 9" id="box">
<g id="box-top"><polygon class="cls-8" points="569.71 382.28 653.74 329.39 747.13 320.1 679.2 369.85 569.71 382.28"></polygon>
<polygon class="cls-5" points="691.95 367.2 570.87 392.34 565.32 383.35 687.8 357.45 691.95 367.2"></polygon>
<polygon class="cls-5" points="661.54 337.48 570.87 392.34 562.42 378.92 652.25 322.38 658.12 321.34 661.54 337.48"></polygon><polygon class="cls-7" points="661.54 337.48 570.87 392.34 562.42 378.92 652.25 322.38 658.12 321.34 661.54 337.48"></polygon><polygon class="cls-5" points="747.13 320.1 661.54 337.48 652.25 322.38 738.4 307.1 747.13 320.1"></polygon>
</g>
<path class="cls-5" d="M588.28,420.26s3.44,5.2,5.19,8l43.1,68.48,158.81-100-43.1-68.48q-2.63-4.17-5.47-8Z"></path>
<path class="cls-7" d="M588.28,420.26s3.44,5.2,5.19,8l43.1,68.48,158.81-100-43.1-68.48q-2.63-4.17-5.47-8Z"></path>
<rect class="cls-5" height="90.58" transform="translate(-89.78 450.43) rotate(-32.19)" width="83.99" x="693.73" y="335.51"></rect>
</g>
<g data-name="Layer 6" id="rucksack">
<g id="stripe"><path class="cls-12" d="M1200.32,473.91h0a13.74,13.74,0,0,0-18.41,7.44l-55,129.86a14.82,14.82,0,0,0,7.13,19.21h0a13.74,13.74,0,0,0,18.41-7.44l55-129.86A14.82,14.82,0,0,0,1200.32,473.91Z"></path>
<path class="cls-13" d="M1202.18,606.34h0a14,14,0,0,0-16.18-11.8l-48.83,9c-7.59,1.4-12.66,9-11.31,16.89h0a14,14,0,0,0,16.18,11.8l48.83-9C1198.46,621.82,1203.53,614.26,1202.18,606.34Z"></path>
</g>
<path class="cls-8" d="M1300.86,603l-122.93,22.74-15.44-90.91c-5.75-33.86,15.89-66.17,48.34-72.18l11.58-2.08c32.45-6,57.26,17.66,63,51.51Z"></path>
<path class="cls-1" d="M1307,601.91l-112.32,20.78-15.9-93.61c-5.5-32.36,15.19-63.25,46.2-69h0c31-5.74,60.62,15.85,66.12,48.21Z"></path>
<path class="cls-8" d="M1296.76,603.8,1215,618.92l-4.89-28.77c-2.11-12.42,5.83-24.27,17.73-26.47l38.67-7.15c11.9-2.2,23.26,6.08,25.37,18.5Z"></path>
<path class="cls-5" d="M1296.76,603.8l-73.41,13.58-4.92-29c-2-11.62,5.45-22.72,16.6-24.78l33.07-6.12c11.14-2.06,21.77,5.69,23.75,17.32Z"></path>
<path class="cls-4" d="M1231.77,469.69l-13.42,2.48a10.25,10.25,0,0,0-8,11.92l2.38,14a9.9,9.9,0,0,0,11.42,8.33l13.42-2.48a10.25,10.25,0,0,0,8-11.92l-2.38-14A9.9,9.9,0,0,0,1231.77,469.69Zm7.17,20.84a6.39,6.39,0,0,1-5,7.43l-8.36,1.55a6.17,6.17,0,0,1-7.12-5.19l-1.48-8.73a6.39,6.39,0,0,1,5-7.43l8.36-1.55a6.17,6.17,0,0,1,7.12,5.19Z"></path>
<path class="cls-14" d="M1233.74,471.13l-13.42,2.48a10.25,10.25,0,0,0-8,11.92l2.38,14a9.9,9.9,0,0,0,11.42,8.33l13.42-2.48a10.25,10.25,0,0,0,8-11.92l-2.38-14A9.9,9.9,0,0,0,1233.74,471.13Zm7.17,20.84a6.39,6.39,0,0,1-5,7.43l-8.36,1.55a6.17,6.17,0,0,1-7.12-5.19L1219,487a6.39,6.39,0,0,1,5-7.43l8.36-1.55a6.17,6.17,0,0,1,7.12,5.19Z"></path>
</g>
<g data-name="Layer 5" id="bike">
<path class="cls-8 wheel" d="M1139.82,780.44a76.59,76.59,0,1,0-57.9,91.53A76.59,76.59,0,0,0,1139.82,780.44Zm-28.12,6.33a47.59,47.59,0,0,1,.83,15.8c-30.14-6.28-47.68-21.65-54.39-52.52A47.73,47.73,0,0,1,1111.69,786.77Zm-70.46-30.9c10.35,26.88,10.14,50.4-13.73,70.77a47.67,47.67,0,0,1,13.73-70.77Zm34.35,88a47.55,47.55,0,0,1-34.94-5.62c16.8-20.36,41.71-25.94,67.09-19.46A47.66,47.66,0,0,1,1075.58,843.85Z"></path>
<path class="cls-8 wheel" d="M864.89,789.69a76.59,76.59,0,1,0-66.13,85.78A76.59,76.59,0,0,0,864.89,789.69Zm-28.59,3.7a47.59,47.59,0,0,1-.64,15.81c-29.43-9-45.47-26-49.3-57.33A47.73,47.73,0,0,1,836.3,793.39ZM769,756.1c7.82,27.72,5.43,51.12-20.22,69.2A47.67,47.67,0,0,1,769,756.1Zm26.06,90.78a47.55,47.55,0,0,1-34.27-8.83c18.61-18.72,43.93-22,68.6-13.16A47.66,47.66,0,0,1,795.06,846.88Z"></path>
<g>
<rect class="cls-1" height="53.21" transform="translate(-165.97 273.38) rotate(-16.19)" width="12.87" x="871.39" y="693.37"></rect>
<path class="cls-5" d="M813.93,679.35c-3.72-5.2,2.24-18.5,9.16-16.13,33.43,11.46,73.85,10.45,73.85,10.45,8.84.15,14.44,10.34,7.27,15.48-14.36,8.79-33.13,17-56.35,9.76C830.17,693.41,819.83,687.6,813.93,679.35Z"></path>
<path class="cls-7" d="M813.93,679.35c-3.72-5.2,2.24-18.5,9.16-16.13,33.43,11.46,73.85,10.45,73.85,10.45,8.84.15,14.44,10.34,7.27,15.48-14.36,8.79-33.13,17-56.35,9.76C830.17,693.41,819.83,687.6,813.93,679.35Z"></path>
<path class="cls-5" d="M817.15,680.06c-3.59-5,1.69-16.51,8.37-14.22,32.3,11.09,71.41,7.83,71.41,7.83,8.54.14,17.45,9.94,7.43,15.88-13.87,8.51-32,16.44-54.44,9.44C832.84,693.67,822.85,688,817.15,680.06Z"></path>
</g>
<g>
<circle class="cls-9" cx="1022.66" cy="599.55" r="11.57" transform="translate(-4.86 8.38) rotate(-0.47)"></circle>
<path class="cls-1" d="M1069.76,792.37l-34.89-96.74,1.93-.8-1.71-4.15-1.74.72-13.26-36.76,1.27-.42-2.25-6.76,5.94-2-2.57-7.72-9.7,3.22c-11.55-22.55,2-36.33,15-41.86l-5.57-8.81c-23,10.29-29.61,28.75-19.53,54l-9.38,3.12,2.56,7.72,5.47-1.82,2.25,6.76,2.36-.78,13.62,37.76-2.35,1,1.71,4.15,2.16-.89,34.65,96.09a7.47,7.47,0,0,0,9.56,4.49h0A7.47,7.47,0,0,0,1069.76,792.37Z"></path>
<circle class="cls-11" cx="1027.9" cy="587.94" r="12.99" transform="translate(-4.77 8.42) rotate(-0.47)"></circle>
</g>
<path class="cls-5" d="M1021.29,654l-17.73,6.15,1.72,5.59-31.41,82.36c-19.35,32.53-66.3,36.72-75.56,16.68l-7.09-21.5L879,747.1l3.28,10.09-94.65,33.95c-11.49,2.29-11.85,15.79-2.61,17.84,0,0,39.11,3.66,103,9.5a92.75,92.75,0,0,0,40.89-5.29c44.32-16.56,57.73-50.67,57.73-50.67l26.82-67.26a1.37,1.37,0,0,1,2.53,0l1.42,3.33,17.75-7.62Z"></path>
<path class="cls-7" d="M1021.29,654l-17.73,6.15,1.72,5.59-31.41,82.36c-19.35,32.53-66.3,36.72-75.56,16.68l-7.09-21.5L879,747.1l3.28,10.09-94.65,33.95c-11.49,2.29-11.85,15.79-2.61,17.84,0,0,39.11,3.66,103,9.5a92.75,92.75,0,0,0,40.89-5.29c44.32-16.56,57.73-50.67,57.73-50.67l26.82-67.26a1.37,1.37,0,0,1,2.53,0l1.42,3.33,17.75-7.62Z"></path>
</g>
</svg>
<h4>There's nothing here!</h4>
<p>Sorry, the page you were looking for in this blog does not exist.</p>
<a class='homepage' href='/' expr:title='data:blog.title'><data:blog.title/></a> © <script>document.write(new Date().getFullYear())</script>. All Rights Reserved
</div>
</b:if>
Conclusion
Hopefully, the Above tutorial has completely helped you to learn How To Add Custom 404 Error Page in Blogger Website. If you have got any issue in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us
Was it helpful? If it was then don’t forget to share this article with your other friends too. Thank you for visiting. Happy Blogging..
© Tech & Fun Zone