Notification texts go here Contact Us Buy Now!

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

    custom 404 error page
    • 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

    Custom 404 Error Page

    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.

    1. First of All You Need to Go to Your Blogger.com.
    2. Then Login with Your Blogger Account.
    3. After This Click on Theme Menu.
    4. Now Click on Edit HTML.
    5. Then Copy the Code Provided Below and Paste it Above the <head> tag in Your Theme.
    6.   
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>  
      <title>Oops. The Page you are Looking For is not Avaible.</title>  
      </b:if>
    7. 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.

    1. Go to Your Blogger Account.
    2. After This Click on Theme Menu.
    3. Now Click on Edit HTML.
    4. Then Copy the Code Provided Below and Paste it Above the </head> tag in Your Theme. Hit the save button.
    5. 
      <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.

    1. Go to Your Blogger Account.
    2. After This Click on Theme Menu.
    3. Now Click on Edit HTML.
    4. Then Copy the Code Provided Below and Paste it Above the </body> tag in Your Theme. Hit the save button.
    5. 
      <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>
    6. Change https://techandfunzone.eu.org/ with your web address.

  • 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

    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.

    1. First of All You Need to Go to Your Blogger.com.
    2. Then Login with Your Blogger Account.
    3. After This Click on Theme Menu.
    4. Now Click on Edit HTML.
    5. Then Copy the Code Provided Below and Paste it Above the <head> tag in Your Theme.
    6.   
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>  
      <title>Oops. The Page you are Looking For is not Avaible.</title>  
      </b:if>
    7. 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.

    1. Go to Your Blogger Account.
    2. After This Click on Theme Menu.
    3. Now Click on Edit HTML.
    4. Then Copy the Code Provided Below and Paste it Above the </head> tag in Your Theme. Hit the save button.
    5. 
      <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..

    © Tech & Fun Zone

    Post a Comment

    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.