August 1, 2014

How to Create a Custom 404 Error Page - Lauren Paints | a beautiful life Blogger Tutorial Series

No one wants to find an error page, on any website,
but it happens on occasion.

Whenever a reader finds a link that no longer exists,
your blog most likely sends them to a typical error page that looks similar to this:
Simple 404 Error Page


With a custom 404 error page, you can add several features on the 404 error pages that make them more user-friendly and interactive. You can customize the page by giving the reader the option to contact you, to go to the home page, and more.
 I decided I wanted to spice things up so I'm changing how my error page looks. I figured I'd write up a simple tutorial to help my fellow blogger friends out if they want to do the same.

Follow the steps below to make your own custom 404 error page!
How to Create a Custom 404 Error Page

Let's get this party started:


1. Go to Your Blogger profile, click "Settings" on the side bar,
then "Search Preferences".
How to Create a Custom 404 Error Page






2. Scroll to find "Custom Page Not Found"
under "Errors and Redirection".
How to Create a Custom 404 Error Page



3. In another window, create a new post 
and use the HTML editor to create the HTML for the error page { do not publish at any point. }
You can just type in something funny and format it as you please,
custom design a graphic, the possibilities here are endless!
Get creative and make it your own.
Now click the HTML tab in the corner and Select all + Copy!

How to Create a Custom 404 Error Page

I custom designed a graphic in photoshop, uploaded it onto photobucket,  then used image mapping to make the links clickable.
{That's a whole different tutorial that I'll be posting soon.}
 

4. Paste the code into the "Custom Page Not Found" box and save.
How to Create a Custom 404 Error Page

5. Now test out your link and make sure it works:
Just type "YourSite".com/404 into your address bar.
How to Create a Custom 404 Error Page



No comments:

Post a Comment

Keep the conversation going... Leave a comment!