How to Install Error 404 Page with Search Form on Blogger

One good blog navigation requirement is to provide clear goals and choices when visitors are on a page on your blog. Likewise with error page 404.
Error 404 page not found image
Error 404 page is the page that visitors 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 who typed the url address incorrectly.


There are 3 reasons that I think, so I feel better if I use a custom 404 error page instead of using a 404 error page provided by blogspot.

1. The information submitted is not informative because it only says "Sorry, the page you are looking for in this blog does not exist." , so that the impression feels so boring and unattractive.

2. This page appears only in the main body section (where the post/static page appears) and still raises the header, sidebar and footer. This can be an obstacle for those of you who have become Adsense publishers 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 thing that is not recommended for advertisers to display ads on the page.

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

Well, therefore, this time TechAshik will provide information on How to Install Error 404 Page with 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 Error 404 Pages with Search Form

Log in to Blogger then go to Themes> Edit HTML
Find the code </head> or &lt;/head&gt; then put the following code above it.

<b:if cond='data:view.isError'>
<style type='text/css'>
/* Error 404 design by TechAshik.com */
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>

The next step, look for the <body> or &lt;body&gt; code then put this code below it.

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

Look for the code </body> or &lt;/body&gt; then put the following code above the code.

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

Last Save the theme and the results will be seen if you find an error link on your blog or just test with a url like this.
www.techashik.com/error

Thus, How to Install Error 404 Pages with Search Form, hopefully useful.

Post a Comment

0 Comments