Creative Custom Error 404 Page with Search Box

Creative Custom Error 404 Page with Search Box

4
data:blog.title
hacks

Error 404 page is important to hold visitors for longer time. Suppose a visitor didn't find any page then the visitors can go away another site. Generally in blogger default  page it will display like Page Not Found Error when any link not found or any invalid search query by visitors. Broken link is responsible for this. But we can simply make Error 404 page more attractive by adding some images where your visitors will attract to stay on your site. I have collection those custom 404 images from various sites and resize those for best match for your custom error 404 page. In addition I have added a search box where a visitors can search more deeply and relevantly. So let's proceed to the tutorial.

Live Demo

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by Pressing Ctrl+F  

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates. 

/* Error Page by www.bloggerspice.com*/
.error-custom {
overflow: hidden;
padding:10px 15px 100px;
}
.error-custom:before, .error-custom:after, .error-body:before, .error-body:after {
position: absolute;
content: "";
height: 0;
width: 0;
border: 44px solid transparent;
}
.error-custom:before {
border-right-color: $(poside.head.color);
border-bottom-width: 114px;
border-right-width: 163px;
bottom: -44px;
right: 0;
}
.error-custom:after {
border-right-color: $(poside.head.color);
right: 0;
bottom: -12px;
}
.error-body:before {
border-left-color: $(poside.head.color);
bottom: -33px;
left: 0;
border-left-width: 106px;
border-top-width: 106px;
}
.error-body:after {
border-left-color: $(poside.head.color);
left: 0;
bottom: -66px;
border-left-width: 54px;
border-bottom-width: 106px;
}
</b:if>  

Step 5 Save your template now.

Step 6 Now go to Settings-> Search Preference -> Custom Page Not Found -> Edit

Step 7 Now Paste any code from below and Click on Save Changes

Custom Error Page Style 1


tips

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Dig it Deeply...
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>
</h3><img src=" http://4.bp.blogspot.com/-YewwGyQsrIs/UkQJTo7BG0I/AAAAAAAAEzQ/xRmdR1fbKKM/s1600/17-error-404-page.jpg "/>


Custom Error Page Style 2


404 pages

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Dig it Deeply...
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>
</h3><img src=" http://4.bp.blogspot.com/-Ge8V8bJJp3g/UkQJTma23tI/AAAAAAAAEzU/SdFRqYV7dS4/s1600/27-error-404-page.jpg"/>

Custom Error Page Style 3


awesome 404 page

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Dig it Deeply...
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>
</h3><img src=" http://1.bp.blogspot.com/-E4oABOilVz4/UkQJUDBKaDI/AAAAAAAAEzk/zSElgy2Lnqg/s1600/28-error-404-page.jpg"/>

Custom Error Page Style 4


creative trick

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Dig it Deeply...
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>
</h3><img src=" http://2.bp.blogspot.com/-ioM1Cj15VDI/UkQJUV7u0oI/AAAAAAAAEzc/yM_z3plUhmY/s1600/29-error-404-page.jpg"/>

Custom Error Page Style 5


blogger tricks

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Dig it Deeply...
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>
</h3><img src=" http://3.bp.blogspot.com/-YqeWhP_7DXE/UkQJUhLiSGI/AAAAAAAAEzo/uokxQQuGGTU/s1600/40-error-404-page.jpg"/>

Custom Error Page Style 6


widget

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Dig it Deeply...
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>
</h3><img src=" http://1.bp.blogspot.com/-L9kVg6lDnfE/UkQJVe9zuXI/AAAAAAAAEz0/Iu-y4JhoE-Y/s1600/48-error-404-page.jpg"/>

If you face any trouble then feel free to contact with me. And I am expecting your feedback about custom error 404 page. Stay tune for more exciting release. 
Creative Custom Error 404 Page with Search Box
4 Stars stars - "Creative Custom Error 404 Page with Search Box" Error 404 page is important to hold visitors for longer time. Suppose a visitor didn't fin...

nice rabbi... ill put this now :)

thanks Ronnie...I will share soon full wide custom 404 error page.

thanks for dropping a comment here.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *