How To Add Custom 404 Error Page in Blogger Website

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.

  
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>  
<title>Oops. The Page you are Looking For is not Avaible.</title>  
</b:if>

Don't forget to hit the save button.

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 == &quot;error_page&quot;'>  
<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: &quot;&quot;;  
  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: &#39;&#39;;  
  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.

Panic with the javascript part? Do not worry, it is super lightweight and we added <b:if> conditions, so they won't impact your web performance.

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.


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>  
<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>

Change https://techandfunzone.eu.org/ with your web address.

Here are a few hand-picked articles for you to navigate

Stylish Email Subscription Widget For Blogger Free Script

Top 5 Stylish HTML Sitemap For Blogger 2022

How to Setup Stylish Download Timer in Blogger

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.

  
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>  
<title>Oops. The Page you are Looking For is not Avaible.</title>  
</b:if>

Don't forget to hit the save button.

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

Now Copy the code Given below and paste it Above the </body> 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>

Then Don't Forget To Click on Save Button to save your work. tag.

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..

Go to Link

Cyber1101 en

How To Add Custom 404 Error Page in Blogger Website

Features of the attractive custom 404 error page for blogger

What is a 404 Error?

So, What motivated me to share this amazing Cutom 404 error page?

Configuration

1. Animated Custom 404 Error Page with Emoji

How To Create Custom 404 Error Page in Blogger

Step 1: Adding a catchy title for the error page.

Step 2: Adding CSS Code for custom 404 Error Page.

Step 3: Adding HTML and JavaScript code for custom 404 page.

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.

Step 2: Adding CSS Code for custom 404 Error Page.

Adding HTML Tag

Conclusion

Post a Comment

How to Setup Rose Bot in Telegram Group Tutorial

Free Premium Crunchyroll Account Cookies and More ♻️!

How to Create Stylish Contact Us Page in Blogger Website [100% Working]

Fineshop Design