Creative Custom Error 404 Page with Search Box

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

<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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsIBC7TDFv7tt9Ix1a4eVCjEBo3EczzJze6NyPs1nQf9KPXu8_7zuWyrzRrG7ifzO9qL8hCWfGvuWgtugfhEAs9oWKHcafk_3CKLJ5OqenLJ0bAZBm7yzkxzUaMjhhbgacHpwDOfsKSewv/s1600/17-error-404-page.jpg "/>

Custom Error Page Style 2

<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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4qhE8U-riP2tmzw3sQDT3_tQh3gAjSiKR-04L9uFVo-u9n6W_vcOPuG1ZM9k8pDqoYRjCpdHsoSCBo2BiYBnb26C2nNU8wzITt3w4FvDmFq8GIKCuecpSGGC2Bd9wfEBHycP09nj4faoo/s1600/27-error-404-page.jpg"/>

Custom Error Page Style 3

<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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0SFj5weO43g1Bm0UQwIqfYqeSufwF4EvNJqVrvMMPtw0-bbkYbfSoSPQrpTEPNwfbsO7CIDwruRJQgd4IsyDE-qzRX9Xe8V3EEsGlKueDhvhRUyDGQEtbD5OJBWc3zXNEaMrtizJUc0x_/s1600/28-error-404-page.jpg"/>

Custom Error Page Style 4

<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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaEZWFsBnK8eCHMWzMRYNxOgxRPsXjS_bQDCitkAqYhIb8X9I8JnXZkgNTe4ox4Yn8JvmN4O71VEfnY13gtIgjl2bhCyMs5q2e0Ny11rv1Wx6v4fmn_zV3-4vw6lG74gXSAYNt7FXCwxEd/s1600/29-error-404-page.jpg"/>

Custom Error Page Style 5

<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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauiCikX4Tnsoe928lkkULZqZHCMmhg2KAqRLRIWfY0NIGQDoiNSnsGyxB0YWupDRVQFCfYugHbAQ6bc021eGBE8Ta-rsG2a_wZOG0-HpFGDPZj6NKjuHWQRFz6yXqEpJ9oihu5JXJWMk1/s1600/40-error-404-page.jpg"/>

Custom Error Page Style 6

<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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcd9NElAtFLa72xIfJZ2VXu-RnGOcAJG04IaFN_pWG5GotnPhGskYfuxbc4t0hrHplihrNP-qzhnPhq_yrCp_JOXiTkTvBr_5UJMnbJPvXSQcPEfzMGuWgjOq3J95UWw2ufnjiCDABvKxJ/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.