Edit your 404 error page

Edit your 404 error page

Sometimes when you visit a web site you stumble upon a link that isn’t valid anymore, a broken link. Perhaps the author refered to an old, now removed post and when you click on the link you get an error code, a 404 page.

404 is one of the status codes available and stands for Not found. Perhaps you recognize a few more codes, for example 301: Permanently moved and 302: Moved temporarily, for when a web site has changed it’s address. If you are interested you can read more about it on Wikipedia


Blogger 404 error

As you can see above, Bloggers error page isn’t fun at all, but the good news is that you can change that. You can edit the message and the way it looks.

Let’s start

Go to your blog’s Admin panel – Settings – Search preferences – Errors and redirections. Click Edit next to Custom Page Not Found.


blogger edit error page



When you do this a text area will open and this is where you can put the text you want the visitor to read. This is also where you can put code to alter the way your 404 page looks.


Blogger error message


Do you want a more styled look for your error page? Perhaps add an image?
You can do this by adding some html-code.


Error message 404 page


The code for the example above looks like this:


<div style=padding: 20px; background:#fff;><div style=fontsize:40px; marginbottom:30px;><b>Oops</b></div> <center><img src=“https://image.jpg” /></center> <div style=color:#0a6897; fontsize:20px; margintop:20px;> I belive you got a little lost there?<br> Click<a href=“https://yourblog.blogspot.com/”>here</a> to get to my blogs frontpage and start over with your search.</div></div>


<div style=”padding: 20px; background:#fff;”>

First I added a div tag to box everything in. In that tag I added some space around everything, the padding:20px; I also added a white background, background:#fff;


<div style=”font-size:40px; margin-bottom:30px;”><b>Oops</b></div>

Next comes the title above the image. I made it bigger by adding the font size, font-size:40px; and made some space down towards the image, margin-bottom:30px;


<center><img src=”https://image.jpg” /></center>

I wanted an image and I wanted it to be centered.


<div style=”color:#0a6897; font-size:20px; margin-top:20px;”> I belive you got a little lost there?<br> Click<a href=”https://your.blogspot.com/“>here</a> to get to my blogs frontpage and start over with your search.</div></div>

This is a little longer tag, but it’s not all that difficult. First up is the color of the text, It’s decided with something called a hex code and you can find your prefered color herecolor:#0a6897; After that comes fontsize again, font-size:20px; and lastly we want some margin from the image above, margin-top:20px;

In this tag you can also find a place to insert your blogs adress. This will make the link with the word here lead the visitor back to your front page.

That’s it! Copy the code in the code area above and past it in the text box we mentioned earlier. Edit it to match what you want your message to look like, change colors, text, add an image – what you want.

Any questions about your code? Ask here in our forums!


The result


Now you want to see what your new error page actually looks like of course. Open one of your blog’s posts and alter the address just a little, but make sure you do this in the blog posts part of the address and not in your actual blog address. If you do that, the browser will try to find the blog with that altered address.


Blogger web address


Here above I added an extra number in my blog posts address and that led me to my error page.

Good luck!


Close Menu