You are Here : / / / Attractive 404 Page Not Found Styles For Blogger

Sunday, 25 March 2012

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:
  1. Has a Go Back Link so users can easily return back to the link which they were previously viewing 
  2. Posses a link to your Home Page so users can discover your site from very beginning 
  3. 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&nbsp;Available&nbsp;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)">&lt;&lt;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&nbsp;</span><b style="font-family: Verdana, sans-serif;"><a href="Your-Home-Page-Url">Home Page</a>&nbsp;</b>&nbsp;<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;">&nbsp;</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.bsresearcher.blogspot.com/" rel="dofollow">www.bsresearcher.blogspot.com</a></span></b></div>
</div>
</div>
</div>
<style>
<----MBL 404 Not Found Style Starts------>
</style></div>


Customization:

  1. Replace  Your-Home-Page-Url With your Blogs Url
  2. 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:

  1. Posses a link to the Previous Page which users had navigated previously 
  2. Posses a link to your Home Page so user can discover your blog
  3. Posses a link to your Contact Us Page so users can submit support tickets
  4. 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..&nbsp;</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&nbsp;</span></b></h2><div><span style="font-family: Verdana, sans-serif;"><b>1.</b>Go To<b> <a href="javascript:history.go(-1)">&lt;&lt;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&nbsp;</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&gt;&gt;</span><b>&nbsp;</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/AVvXsEgqEwM-9kAYV8Y0tMxR4PtTFMHRf99aJpB01Wlz5PglV-tlXwDwuczWbkKSjznQ-SNwgmttPzpaE6DXZCJ92GUQFZ6RSA9REWvyiB_W9513J0NlgR_z-6HzSIZvJJHQgSWO7MrLco-KVI8/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/AVvXsEgqEwM-9kAYV8Y0tMxR4PtTFMHRf99aJpB01Wlz5PglV-tlXwDwuczWbkKSjznQ-SNwgmttPzpaE6DXZCJ92GUQFZ6RSA9REWvyiB_W9513J0NlgR_z-6HzSIZvJJHQgSWO7MrLco-KVI8/s400/MBL.gif" 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 &nbsp;By:</b><a href="http://www.bsresearcher.blogspot.com/">bsresearcher.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:

  1. Replace Your-Home-Page-Url  With your Blogs Url
  2. 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
  3. 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:

  1. To Adjust the 404 Not Found  Image width Change 423 
  2. To Adjust the  404 Not Found   Image  height  263
  3. If you want to change the current 404 Not Found Image simply replace this url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqEwM-9kAYV8Y0tMxR4PtTFMHRf99aJpB01Wlz5PglV-tlXwDwuczWbkKSjznQ-SNwgmttPzpaE6DXZCJ92GUQFZ6RSA9REWvyiB_W9513J0NlgR_z-6HzSIZvJJHQgSWO7MrLco-KVI8/s400/MBL.gif 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 :)


Attractive 404 Page Not Found Styles For Blogger
4/ 5
By
On Comment

GET OUR BLOGGING SECRETS DIRECTLY TO YOUR INBOX!

Want access to our blogging secrets,We never shared on our blog.Just enter your email address below to get access to our 3 ultimate guides on how to run a successful blog!

Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!

Subscribe to: Post Comments (Atom)