How to Install Error 404 Page in Blogspot Blog in 2020
One of the necessities for good blog route is to give clear objectives and decisions when guests are on a page on your blog. Also, the 404 error page .
Error 404 page is a page that viewers will see when they try to open a specific page that is not on your Website, it could be on the grounds that the page has been removed or erased, or the connection is broken, or the website viewers put the URL address by mistakenly.
There are one of three reasons that as I would like to think, so we feel much improved on the off chance that I utilize these custom 404 error pages as opposed to utilizing the 404 mistake page given by blogspot or blogger.
The data submitted isn't enlightening in light of the fact that it just peruses "Sorry, the page you are searching for in this blog does not exist." , with the goal that the impression feels so exhausting and uninteresting.
With the custom Error 404 page, we can provide more clear data, give look choices or give headings to guests to the landing page. That way, every guest/viewer who comes from web indexes or web referrals, can in any case enter and visit our website or blog.
This page seems just in the primary body area where the posting page/static page shows up and still shows the header, sidebar and footer. This can be a hindrance for those of you who have turned into an Ad-sense distributor and have put promotions outside the principle body. So when a mistake page 404 shows up, at that point the promotion will at present show up and this is something that isn't prescribed for publicists to show advertisements on that page.
Indeed, hence, this time we will give data on the best way to introduce Error 404 pages with a Search Form that you can change again so it is progressively useful and keeps guests agreeable when they locate the missing page.
How to Install/run Error 404 Pages with Search Form also
First of all Login to your Blogger/web and then go to Theme now go to Edit HTML Search for code to search simply press Ctrl+F and search bar will popup </head> or </head><!--<head/>--> and then place the following code on 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:180px;height:180px;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:circle} #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:circle} #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:circle} #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:circle} #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:800;line-height:1.4em;font-size:30px} #error-inner p{line-height:1.7em;font-size:18px;color:#111;padding:0;margin:10px auto 0 auto} #search-404{max-width:90%;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:100%;color:#198;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:#bfa;transition:all .6s} #search404 input[type=search]:hover{border-color:rgba(0,0,0,0.08)} #search404 input[type=search]:focus{background:#cff;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>
<b:if cond='data:blog.pageType != "error_page"'></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 Page</h3> <div class='box-404'> <div>404</div> </div> <h2>Page You are looking for Not Found</h2> <p>Woppsie!! Looks like something completely went wrong :<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='Type here What you are looking for...' 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> Go back to <a expr:href='data:blog.homepageUrl'> Home <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>
Results will looks Like This
After successfully following the above steps lets head over to final step i.e. most important step ( Some People Miss it in hessel ) Finally Save the Template and the results will be seen if you find an error link on your Website or blog.
I hope that you find this article helpful to you and if you like then don't forget to share with others.
If you still have any doubts feel free to comment i'm happy to help (Tech Online Help)
Comments