2.09.2015

How To Style A Custom 404 Page With Images and Widgets For Blogger




A 404 error page is the page where your blog or website will send people if they hit a broken, incorrect, or missing link to your site.  In the Blogger platform it has been a pretty simple and standard page with text and a gray box behind it until Blogger rolled out custom error pages.  Even the standard "Custom" page only allows you to change the wording of the text.  and has an ugly gray box as a background.

Many other websites have really great looking and sometimes funny custom 404 pages.I decided that I wanted a custom 404 page for my Blogger blog and I spent a considerable amount of time learning just how to do that and make it pretty.
Most of the tutorials that I found forced you to use their images. I wanted to style my page to go with my brand and I couldn't find any that suited me.  I also didn't want to send all my traffic to their website (even for a split second) to get their image.  I finally finished making my own 404 image and styling my custom 404 page and here is what mine looks like:  Texasdaisey 404 page.  You can find out what your current 404 page looks by typing this   Your URL/404  (Replace the red words with your own url.) in your browser.

Change Wording On Standard Page:
If you are happy with just the basic Blogger 404 page but want to change the wording then you can change the wording by going to your Dashboard.  Click on Template.  Click on Settings.  Click on Search Preferences.  Click on Edit next to Custom page not found.  This will open up a box.  Delete anything inside the box. Type your wording in that box.  Click on Save Changes.

Remove Gray Box From Blogger 404 Page:
First Click on Template.  Click on Backup (located upper right corner). This will download your entire current blog template to a file on your computer.  This is a good idea any time you are making changes to your template.  Click on Edit HTML.  Place your cursor anywhere on area where there is code and Hold down Control F on your keyboard.  This will open the search box on the upper right corner of of your HTML Code. In the search box type:      </head>
and then hit enter. This should highlight the code you just typed in on your HTML Page.  Just above the code you highlighted paste the code from the 1st Large gray box on this page:  Blogger Widgets

Click Save after pasting your code snippet. Now when you look at your 404 page the gray box along with the border should be gone.

Style A Super Custom 404 Page In Blogger:
If you would like to go a step farther and style your 404 page to be super custom and match your own brand and style by adding images and/or widgets such as an email signup form, then it is easy and here is how you do it:
Click on New Post in Compose.  Understand that we are going to design and style your page from here but we are NOT going to Publish it.  Add any images, and text and widgets that you like just as if you were writing a blog post only this will be your 404 error page.

To Add A Widget or Form To Your 404 Page In Blogger:
In Compose place your cursor in spot you want to add the widget or form.  Click on HTML.  Add your snippet of code for the widget or form.  Click on Compose.  You should see the widget or form.

When you are happy with it:  DO NOT PUBLISH!  Click on HTML.  Copy the entire code from there.  Click Save and then Close.  This should put you on List of Posts page.  Click on Template from left column.  Click on Settings.  Click on Search Preferences.  Click on Edit next to Custom Page Not Found.  A box should open up.  Delete any content in box.  Paste your code in that box.  Click Save Changes.  Now go check your new and beautiful 404 Page.

Note: I saved my entire page html code into a Word Document and then deleted my post where I designed it so that I would not accidentally Publish.

Code Snippet: "Custom 404 Error Pages for Blogger." - Blogger Widgets. N.p., n.d. Web. 09 Feb. 2015.

Linking Here: 

Enter Your Email To Get Posts in Your Email Box:

Pin It

1 comment:

Heather Grow said...

This is awesome! Pinned.