Attractive 404 Page Not Found Styles For Blogger

The Previous post publisher here was Custom 404 Page Not Found For Blogger in which I promised you to share 404 Page Not found Styles for Blogger so you all would not feel any stress in creating your custom 404 page style.If you use simple Html it will look very dull same like Blogger's old Not Found page.To make it lot attractive and sparkling we have to take the help of Css Styles with the combination of Html it gives perfect results.

Due to the latest addition in blogger tools we can now even convert our Not found page into a machine which could gerantes heaps and heaps traffic for us.For instance some one arrives to your Not found Page and he found nothing on your website all he got is a dull looking page written with bold black words "404 Not Found" with white background the visitor will not even think of going to your home page and he will directly leave your blog/website.The chances are very high that he might never visit your site because the "Not Found" incident will keep on revolving in his mind.

Don't worry these kinds of nightmare are the stories of past :) But now we are in future with new and improved Blogger Tools which enable us to make our blog more stunning not only look wise but also technically.

Here are the Few latest and unique Designs for 404 Not Found Page optimized with Html and Css style sheets to gave your page an attractive look.

404 Not Found Page Style 1:

Features:

Has a Go Back Link so users can easily return back to the link which they were previously viewing
Posses a link to your Home Page so users can discover your site from very beginning
Posses a link to your Contact Us Page so users can easily contact you

How To Get Started:

Go to Blogger.com >> Settings >> Search Preference
Custom Page Not Found >> Edit >> Then Paste The Following code
Customize it >> Save

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
<----MBL 404 Not Found Style Starts------>
</style><br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;"><span style="color: red; font-size: x-large;">Whoops..... </span><span style="font-size: small;">It Seems Like The Page You Are Looking For Is Either Broken or It is No Longer Available on Our Server.Kindly Perform the Following Functions.</span></span></h2>
<div>
<div style="text-align: left;">
<span style="font-family: Verdana, sans-serif;"><b>1. <a href="javascript:history.go(-1)"><<Go Back</a></b></span></div>
</div>
<div style="text-align: left;">
<div style="text-align: left;">
<span style="font-family: Verdana, sans-serif;"><span style="color: #333333; line-height: 25px;"><b>2</b>.</span><span style="line-height: 25px;">Talk to our Technical Department <b style="color: #333333;"><a href="Your-Contact-Us-Page-Url">Click Here</a></b></span></span><br />
<b style="font-family: Verdana, sans-serif;">3</b><span style="font-family: Verdana, sans-serif;">.Go To </span><b style="font-family: Verdana, sans-serif;"><a href="Your-Home-Page-Url">Home Page</a> </b> <span style="color: #333333; font-family: Verdana, sans-serif;"><span style="line-height: 25px;"><br /></span></span></div>
</div>
<div style="text-align: left;">
<div style="text-align: left;">
<span style="font-family: Verdana, sans-serif;"><b>4.Search</b> The Content That You Desire Using Search Box</span></div>
</div>
<div style="text-align: center;">
<span style="color: red; font-family: Verdana, sans-serif; font-size: 250px;">404</span></div>
<div>
<div style="text-align: center;">
<b><span style="font-size: 80px;"><span style="color: blue; font-family: Verdana, sans-serif;">Not Found</span></span></b><b><span style="font-size: 80px;"> </span></b><br />
<b><span style="font-size: 12px;"><br /></span></b><br />
<span style="font-size: 12px;"><b><br /></b></span><br />
<span style="font-size: 12px;"><b><br /></b></span><br />
<span style="font-size: 12px;"><b><br /></b></span><br />
<b><span style="font-size: 12px;"><br /></span></b><br />
<div style="text-align: right;">
<b><span style="font-size: x-small;">Powered By:<a href="http://www.megabloggerlab.blogspot.com/" rel="dofollow">MegaBloggerlab.blogspot.com</a></span></b></div>
</div>
</div>
</div>
<style>
<----MBL 404 Not Found Style Starts------>
</style></div>

Customization:

Replace Your-Home-Page-Url With your Blogs Url
Replace Your-Contact-Us-Page-Url with your Contact us Page Url if you don't have the Contact us page Get it from here

Remember: Don't forget to include http:// before your website URL

404 Not Found Page Advance Style:

Features:

Posses a link to the Previous Page which users had navigated previously

Posses a link to your Home Page so user can discover your blog

Posses a link to your Contact Us Page so users can submit support tickets

Posses a search box so user can easily find what they are looking for

<style><----MBL 404 Not Found Advance Style Starts------></style><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><style><----MBL 404 Not Found Style Starts------></style><br /><div dir="ltr" style="text-align: left;" trbidi="on"><br /><div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;"><b><span style="font-family: fantasy, sans-serif; font-size: 50px;">Aw,Snap.. </span><span style="color: blue; font-family: Verdana, sans-serif; font-size: small;">Sorry this happen due to some Technical flaws our best team is working on it.You can use the following function to insure best results </span></b></h2><div><span style="font-family: Verdana, sans-serif;"><b>1.</b>Go To<b> <a href="javascript:history.go(-1)"><<The Previous Page</a></b></span></div><div><span style="font-family: Verdana, sans-serif;"><b>2.<a href="Your-Contact-Us-Page-Url">Support a Ticket</a> </b>to our Technical Department </span></div><div><span style="font-family: Verdana, sans-serif;"><b>3.</b>Go To Our<b> <a href="Your-Home-Page-Url">Home Page</a></b></span></div><div align="left"></div><form action="Your-Url-Search" id="searchthis" method="get" style="display: inline;"><span style="font-family: Verdana, sans-serif;"><b>4.Search </b>the Page that your Desire>></span><b> </b><input id="b-query" maxlength="255" name="q" size="20" type="text" /><input id="b-searchbtn" type="submit" value="Search" /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FC8SQDUd1HypJZPcVMhgzxmITv5QTXzmoKmCXJmuOXp9PRZ2AIOn15ah4k1pnODW00QZnYKJM-zQe9uBQC-HNwU0FdqTq6kP_wY47xFk0KgDf4XlDtNteYuZ_Y-epTWxzecES7eOM64/s1600/MBL.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3griJZsPqhMi9EHrUagQ88Umgs2cwReVPSswn08rD8og70_Tgl1FKMdc8TRpr98FE_B7kpeojbWEAJitLYkEDTjuEQ661dYLZy95G2qbYG8U3dBx2eFskO5WIWeCs2lQNjphi3i9rHNY/s1600/MBL.png" width="423" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: right;"><span style="font-size: x-small;"><b>Powered  By:</b><a href="http://www.megabloggerlab.blogspot.com/">MegaBloggerLab.Blogspot.com</a></span></div><div style="text-align: center;"><br /></div></form></div></div></div><style><----MBL 404 Not Found Style Ends------></style></div>

Customization:

Replace Your-Home-Page-Url With your Blogs Url
Replace Your-Contact-Us-Page-Url with your Contact us Page Url if you don't have the Contact us page Get it from here
Replace Your-Url-Search with your blogs url to make the search box work perfectly

Remember: Don't forget to include http:// before your website URL

Additional Customization:

To Adjust the 404 Not Found Image width Change 423
To Adjust the 404 Not Found Image height 263
If you want to change the current 404 Not Found Image simply replace this url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3griJZsPqhMi9EHrUagQ88Umgs2cwReVPSswn08rD8og70_Tgl1FKMdc8TRpr98FE_B7kpeojbWEAJitLYkEDTjuEQ661dYLZy95G2qbYG8U3dBx2eFskO5WIWeCs2lQNjphi3i9rHNY/s1600/MBL.png with your own designed 404 Not found image URl.

All The coding's works perfect.If you want to change a bit of text or styling coloring paste the coding in your Blogger Post Editor in "Html tab" and start editing until you get the perfect results.I was only able to publish two styles.The work is still under progress soon we will publish more 404 page styles with more advance features till then Take Care and Happy Optimizing :)