How to add a custom 404 error page

As we're discussing on Blogger's search preferences setting today here I'm back with another amazing tutorial and a 404 error page. To add it to blogger follow the steps given below.

How to add it to Blogger

-Go To Blogger >> Settings >> Search Preferences

-In the Crawlers and Errors Section, Look For Custom 404 Page and Click on "Edit".
-Now a box will appear where you have to paste the following code.

<p style='line-height: 30px'><strong><font color='#ff0000' size='5'>Oops!</font> <font color='#666666'>Looks like you either clicked a broken link or a page that you were looking for doesn't exist. <br/> Kindly do one of the followings:</font></strong></p> <ol style='line-height: 25px'> <li><a href='javascript:history.go(-1)'>« Go Back</a> </li> <li>Report the Problem to us by <a href='CONTACT PAGE URL'>Clicking Here</a>    (<em>This will help us serve you even better</em>) </li> <li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a> <br/></li><li>Search Anything Using Below Search Box</li> </ol><br /> <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'><input id='searchinput' name='q' onblur='if (this.value == '') {this.value = 'Type Here & Hit Enter';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Type Here & Hit Enter'/><input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/></form></center> <p> <br/> <br/> <br/></p><p align='center'><font size='5'>Page Not Found!</font></p><br /> <br /> <br /><p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p><style>.status-msg-wrap { font-size: 100%; margin: none; position: static; width: 100%;}.status-msg-border { display:none}.status-msg-body { padding: none; position: static; text-align: inherit; width: 100%; z-index: auto;}.status-msg-wrap a { padding: none; text-decoration: inherit;}#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }#searchinput {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcb1Kw4y7s5MflBCIEc38x_pHsGcqhWujYIoyZHHcwGMayxTtWWPEb_6rBHKgkkdp-BfWmi9f1muY3NAZ9X9UOFFAeQwCZJFFMA8cJheQekIzaxrZoTUPUauB1S8-xwQm4igxv-XgQc3m/s0/search.png) no-repeat 7px 8px;background-color: #FFF;border: 1px solid #ddd;color: #A0A0A0;display: inline-block;font-family:arial;font-size: 12px;font-weight:bold;height: 24px;width:300px;margin: 0;margin-top: 5px;padding: 5px 15px 5px 28px;vertical-align: top;}#searchinput:hover{border: 1px solid #bebebe;box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 5px 15px 5px 28px;}#searchbutton {background:#444;color:#fff;height:35px;border-radius:5px 5px 5px 5px;box-shadow:1px 2px 1px 1px #ABABAB;border:1px solid #fff;margin-top:3px;padding:8px;}#searchbutton:hover{background:#555;}</style>

Save it

that's its :)

You May Also Like