How to Install a 404 Error Page with Search Form | Droidnur123

How to Install a 404 Error Page with Search Form | Droidnur123

One of the important for best blog navigation is to provide clear goals and choices when visitors are on a page on your blog. 

What Is The 404 Page?

A 404 page is the page that visitors will see when trying to open a page that doesn't exist on your site or blog, it could be because the page has been deleted, the link is broken, or the visitor entered the wrong URL address.

Why Should You Use Custo 404 Page?

There are three reasons in my Couse, so I feel it is better to use my own custom 404 error page than to use the 404 error page provided by Blogspot by  Default.

1 The information submitted is not Perfect because it only re "Sorry, the page you were looking for in this blog does not exist." so the impression feels Really so boring and uninteresting.

2 This page appears in the main body section only (where the posting page/static page appears ) and that Couse still displays the header, sidebar, and footer. This can be an obstacle for those of you who are already an AdSense publisher and have placed outside the main body. 

3 This page appears in the main body section only (where the posting page/static page appears ) and that Couse still displays the header, sidebar, and footer. This can be an obstacle for those of you who are already an AdSense publisher and have placed outside the main body. So when the 404 error page appears, the will still appear and this is one thing that is not recommended for absence advertisers to display on that page.

Benefits Of Custom 404 Error Page

With a custom 404 Error Page, we can provide clearer information, provide search options or provide directions for visitors to go to the home page. That way, every visitor who comes (either from search engines or referrals, can still enter and visit our blog or website)

Well, therefore, this time Droidnur will provide the easiest unique information on how to Install a 404 Error Page with a Search Form that you can modify again so that it is more informative and still makes visitors comfortable when they find the missing page.

How to Install a 404 Error Page with Search Form Guide

First Of All Log in to Blogger Then Go to Thems> Edit Html Fiend The Code</head> or &lt;/head&gt;&lt;!--<head/>--&gt; then put the following code above it.

<b:if cond='data:view.isError'>
<style type='text/css'>
/* Error 404 */
body{background:#fff;line-height:1.4em}
#error-page{background:#fff;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}
#error-inner{margin:9% auto 35px;padding:0;list-style:none!important}
#error-inner .box-404{display:inline-block;position:relative;font-weight:bold;width:200px;height:200px;background:#e84118;color:#fff;font-size:70px;line-height:190px;margin:25px auto}
#error-inner .box-404::after{content:'';width:0;height:0;position:absolute;top:0;right:0;border-width:30px;border-style:solid;border-color:#fff #fff transparent transparent;display:block}
#error-inner .box-404::before{content:'';width:0;height:0;position:absolute;top:0;left:0;border-width:30px;border-style:solid;border-color:#fff transparent transparent #fff;display:block}
#error-inner .box-404 div::after{content:'';width:0;height:0;position:absolute;bottom:0;left:0;border-width:30px;border-style:solid;border-color:transparent transparent #fff #fff;display:block}
#error-inner .box-404 div::before{content:'';width:0;height:0;position:absolute;bottom:0;right:0;border-width:30px;border-style:solid;border-color:transparent #fff #fff transparent;display:block}
#error-inner h3{text-transform:uppercase;color:#ed5858;font-size:50px;margin:0 auto 20px;font-weight:700;letter-spacing:10px}
#error-inner h2{color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px}
#error-inner p{line-height:1.7em;font-size:18px;color:#111;padding:0;margin:15px auto 0 auto}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}
#search-404 .icons{width:26px;height:26px;fill:#aaa;vertical-align:middle}
#search-404 .icon-Forward{width:20px;height:20px}
#search-404 p{font-size:90%;color:#999;padding:20px 20px 0;text-align:right}
#search404 input[type=search]{width:100%;border-radius:99em;height:48px;box-shadow:0 10px 12px rgba(0,0,0,.05);border:1px solid rgba(0,0,0,0.05);padding:0 48px 0 20px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fafafa;transition:all .6s}
#search404 input[type=search]:hover{border-color:rgba(0,0,0,0.08)}
#search404 input[type=search]:focus{background:#fff;border-color:#74b9ff}
#search404 .src-btn404{background:transparent;border:none;padding:0 16px;outline:none;height:48px;line-height:48px;font-weight:700;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}
@media screen and (max-width:600px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}}
</style>
</b:if>

Then, find the code <body> then put this code below it.

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Find the code </body> or  &lt;!--</body>--&gt;&lt;/body&gt; then place the following code above the code above.

</b:if>
<b:if cond='data:view.isError'>
   <div class='error-wrapper' id='error-wrapper'>
      <div id='error-page'>
         <div id='error-inner'>
            <h3>Error</h3>
            <div class='box-404'>
               <div>404</div>
            </div>
            <h2>Page Not Found</h2>
            <p>It looks like you are lost! Try searching here :<br/></p>
         </div>
         <div id='search-404'>
            <form action='/search' id='search404'>
               <input name='cof' type='hidden' value='FORID:10'/>
               <input name='ie' type='hidden' value='ISO-8859-1'/>
               <input class='src-form404' name='q' placeholder='Search here...' required='required' type='search'/>
               <button class='src-btn404' title='Search' type='submit'>
                  <svg class="icons icon-Search" viewBox="0 0 24 24">
                     <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
                  </svg>
               </button>
            </form>
            <p>
               Or, back to 
               <a expr:href='data:blog.homepageUrl'>
                  homepage 
                  <svg class="icons icon-Forward" viewBox="0 0 24 24">
                     <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
                  </svg>
               </a>
            </p>
         </div>
      </div>
   </div>
</b:if>

and the results will be visible if you find an error link on your blog or just test with a URL that looks like this.

https://droidnur123.blogspot.com/error404

That's, How to Install a 404 Error Page with Search Form | Droidnur123 hopefully, it's useful.

Go to Link