How to Install 404 Error Page with Search Form

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article is about 404 Error Page with Search Form. This is one of the requirements for good blog navigation is to provide clear goals and choices when visitors are on a page on your blog. Similarly the 404 error page.

Error 404 Page is a page that visitor will see when trying to open a page that is not on your blog, it could be because the page has been deleted the link is broken or the visitor typed the URL address incorrectly. There are three reasons that with my opinion so i feel better if i use the custom 404 error page instead of using the 404 error page provided by blogspot.

  1. The information submitted is not informative because it only reads "Sorry, the page you are looking for in this blog does not exist." so that the impression feels so boring and uninteresting.
  2. This page appears only in the main body section and still displays the header, sidebar and footer. This can be an obstacle for those of you who have become an AdSense publisher and have placed ads outside the main body. So when an error page 404 appears then the ad will still appear and this is one of the things that is not recommended for advertisers to display ads on that page.
  3. With the custom Error 404 page we can provide clearer information, provide search options or provide directions for visitors to the home page. That way every visitor who comes either from search engines or referrals, can still enter and visit our blog.

How to Install Error 404 Page with Search Form on to Blogger Template

First of all Log in to your Blogger Blogspot then go to Theme> Edit HTML> Search for code </head> or &lt;/head&gt;&lt;!--<head/>--&gt; then place the following code just after this code.

<b:if cond='data:view.isError'>
<style type='text/css'>
/* Error 404 */
#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%}}
The next step is to find out this code <body> and then paste the below code just after it.

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 After this you can now looking for this code </body> or &lt;!--</body>--&gt;&lt;/body&gt; then place the following code above the code.

<b:if cond='data:view.isError'>
   <div class='error-wrapper' id='error-wrapper'>
      <div id='error-page'>
         <div id='error-inner'>
            <div class='box-404'>
            <h2>Page Not Found</h2>
            <p>It looks like you are lost! Try searching here :<br/></p>
         <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" />
               Or, back to
               <a expr:href='data:blog.homepageUrl'>
                  <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" />

 After these all step don now just Save your Blogger Template.

After this if you want to check this 404 Page working perfectly so please type your blogger domain name in Address bar like that

I hope this article is really helpful for you if you like this article so please share it on social media and thanks for reading.

Post Tage: How to redirect 404 error page in php, How to redirect 404 error page in blogger, Custom 404 page for blogger, 404 error page,