Custom 404 (File Not Found) Error Page for Blogger Blogs

 

There have been quite a lot of complaints in Blogger help forums about the lack of a custom 404 (File not found) error page. This is a major issue that does not just affect user experience, but SEO as well. Of course, if you are overly concerned with SEO, then you are probably not using Blogger anyway.

However, if Blogger wants to be a serious contender in the blog CMS field, it should give us the necessary features. Many improvements have come recently, but their primary focus was on design.  There are still issues with site architecture that have not been addressed.

Unfortunately, there does not seem to be any real way of creating a custom 404 page for your Blogger-powered blog. If you are on the blogspot.com domain, then you will always be limited to the following simple Blogger 404.

blogger-404-page

Pretty lame, don´t you think?

Not only are your users thrown out of your blog's beautiful design onto a boring error page, but you will never be aware of this. Your analytics code isn't on this page, and Blogger doesn't report the occurrences of 404s to you. You could have incorrect backlinks out there, and won't even realize it.

If these links do exist, then they're sending PageRank to this 404 page. The majority is probably being sent back to your blog's index via the two prominent links. But in the footer is a plethora of Blogger links, also stealing that wayward PageRank.

 

Solution

There is a solution. Unfortunately, it requires you get off of the blogspot.com domain and have your own hosting. Not a free solution. Domains aren't too expensive, and you only need the most minimal of hosting, as you just need the 404 page.

Once you have this, you'll need to set your domain up to have two subdomains.  One for the blog, and the other one for the custom 404 page. If you already have your domain split up into blog.domain.com and www.domain.com, then this is easy. If your site is a blog and nothing else, then you might want www.domain.com to be pointing to Blogger and use something like hosting.domain.com to point to your web server.

Now, once you have this worked out, you can create a custom 404 page to your personal liking. Make a web page on your hosting server. Give it the design you want, add Google Analytics to it and throw in any other features you want.  It's not exactly integrated with your blog, but it's customizable.  (If you don't know how to do this, comment and maybe I'll write a tutorial on custom 404s.  However, there is plenty of information out there on this stuff, so you can just Google it.)

Test your 404 page by going to hosting.domain.com/randomtext and see if you get the page you created. If so, you're ready to update your Blogger settings

Under Settings --> Publishing, you'll see the option to „use a missing files host“.  This will redirect any 404 to a different subdomain.  So, if someone goes to blog.domain.com/nonexistent, they'll be sent to www.domain.com/nonexistent, which will trigger your custom 404 page.

custom404pageforbloggeradvanced

That´s all! You now have a custom 404 page for your Blogger blog.  For you SEO nuts out there, you'll be depressed to know this creates a 302 redirect to your missing files host.  It is a same domain 302, which isn't that bad, though. If you don't like it, use Drupal or something.

Good luck!

Solutions for 503 Service Unavailable in Blogger

 

clip_image001

Are you getting this dreaded error message on your blog dashboard, or while you are trying to access your blog?
In this post I am going to tell you what this problem is all about and how you can help Blogger to solve it.

What does 503 mean?

503 „Service Unavailable“ is a „response code“ similar to 404 „Page not found“. The 503 response code is a bit more complicated. In this case you are not dealing with a missing page but a server problem. Usually this happens when a server cannot cope or deliver its hosted content to web users, in other words: Blogger servers have been overloaded.

Background

Back in March Google engineers introduced Auto Pagination which basically reduces and summarizes the amount of posts that a blog displays on the home page, which only affects blogs that show all or most of their full posts on the home page. This approach to the problem by Blogger has proved ineffective, and Blogger are now having problems in the delivery of certain blogs worldwide.

Who is affected by this 503 „Service Unavailable“?

This problem affects all blogs worldwide. One of the ways to find out if you have been affected is to login to Google Analytics and check your traffic sources, select search engines and select the keyword that brings most of the traffic to your blog, then compare the data with previous months. A notable change in your bounce rate or average time will be a good indicator that your blog had been affected by this 503 response code. The logic behind this is simple, a user trying to view your blog has opened the 503 page and assumed the site down and gone to another site. Due to this you will receive a 100% bounce rate for that keyword as well as a low time average.

Understanding the problem and its consequences

The consequences of this problem are that you can start to lose traffic and experience a drop in your ranking in search engines. You need to understand that this is not a problem of resources, this cannot be fixed by getting a new server for Blogger (if it was I would not be here writing about it).
This is a problem of how we blog and what we do with our blogs.

How to solve the 503 “Server unavailable” on Blogger

Here are a few steps you can take in order to help Blogger solve the issue.

1) Basic level (no skills required)
- Summarize your posts.
- Show only the most relevant post(s) on your home page.


If you show full posts on your home page you have a greater chance of encountering the „503“ problem, as your blog is using more resources from Blogger to deliver or load your blog. Secondly an excessive number of posts on the home page (even summarized posts) may result in a 503 as there is a delay with Blogger loading your blog. You can opt to show your latest post or more relevant posts, and include a widget with some links to your previous posts. This is SEO friendly and will reduce the amount of problems you will have with your blog.


2) Medium Level (some skills and knowledge required)
- Use a light weight template and avoid using Blogger´s „template designer“
- Use lighter images


If you are using a template made from the „template designer“ tab, there is a simple test that you can do to reveal how efficient your template is: Clean the cookies of your browser and open your blog (not the Blogger dashboard) by typing the URL in the address bar of your browser. Take note of the time that it takes for your blog to load completely, now go to Blogger and change your template to any free template and repeat the same steps, clean your cookies and open your blog again and compare the time. Some of the templates made with the „Template Designer“ have a poorer performance, especially those that have some JavaScript and/or a background image.


Images play an important part in saving some bites, you can use PNG or GIF as these are lightweight formats, you can also use JPG, but you should always compare them to find out which is the lightest one. PNG is not always the best. If you don’t know how to change the file formats of the images you can search on Google for GIMP, an open source software with features like Paint Shop Pro.It is easy to use, especially when it comes to changing image formats.


3) High level (skills and knowledge required)
- Speed test using Firebug for Firefox


The best way to analyze and get a full report on the performance of your blog is by using the free add-on „Firebug” for Firefox. Firebug will report a series of issues that your blog may have in order to reduce the loading time of your blog which is one of the main factors contributing to the 503 „Service Unavailable“ error.


You will get specific reports on how your CSS is performing, where you can reduce the size of your CSS, where to put your JavaScript files, and much, much more. Most importantly, it will create a compressed version of your CSS (best performance) for you to use as well as a copy of all images in a different format, for instance if you have some JPG images, Firebug will compare the same image to other formats and will give to you the same image but under a different format, thereby saving you time in editing those images.
There are quite a lot of things that you will find out about your blog after running a test on Firebug that you may not know how to solve. If that happens to be the case you can jump into the forum and ask questions about it.

Why should you bother with all of this?

You may be thinking „Why do I need to bother with all of this, why not just wait for somebody from Blogger and Google to solve the problem?“. Well the answer to that is simple: This is not just Blogger’s problem, this is a blog problem, and in this case a problem of blogs worldwide. This is not easily solved by buying an extra server or hiring somebody to solve the problem, this can in part be solved by us bloggers and the way we do things. Blogger is the only blog platform that offers you the best of both worlds: the benefits of a self hosted blog for free. You just have to ask yourself: „Would I like Blogger to change the rules and start to charge its users for their currently free service?“


This may or may not happen, but for now this is just an appeal to all Bloggers to change the way they do things for the best. At the end of the day it will help your blog as well as the experience that you offer to your blog users.

Resources

Firefox: Download Firefox Official Site
Firebug: Download Firebug Official Site
GIMP image editor: Download GIMP Official Site

How to Replace the Page List Menu Gaget with a Link List

 

As you may know, the Default Blogger Templates (which can be customized using the Designer) all use the so-called „Blog Pages” as your blog’s top navigation menu. This is achieved by using a Page List Gadget. But this gadget is not the ideal solution für everyone, because you might want to set up your own menu with custom links. To do so, you need to replace the Page List Gadget with a  Link List. In this tutorial I am going to show you how you can replace the Page List with a Link List without loosing the Menu Styling (and the highlighted active links).

How do I add Non-Page Links to my Menu?

This is a frequently asked question on the Blogger Help Forum. The solution is simple: if you want to display anything other than page links on your Menu, then you will have to use a Link List Gadget instead of a Page List. If you are using one of the default blogger templates, and if you have added a Page List Gadget below the header, you will be using „Page“ links as the Navigation Menu. To change this to a Link List, just follow these simple steps:

1. Login to your Blogger Account and navigate to Design --> Edit HTML. Do NOT check the „Expand Widget Templates“ option.

2. Look for (Ctrl + F):

<b:widget id='PageList

and you will find some line  like:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>

3. Replace this line with the following code:

<b:widget id='LinkList123' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>    <ul>      <b:if cond='data:blog.url == data:blog.homepageUrl'>      <li class='selected'>      <a expr:href='data:blog.homepageUrl'>Home</a>      </li>      <b:else/>      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>      </b:if>      <b:loop values='data:links' var='link'>        <b:if cond='data:blog.url == data:link.target'>        <li class='selected'>        <a expr:href='data:link.target'><data:link.name/></a>        </li>        <b:else/>        <li><a expr:href='data:link.target'><data:link.name/></a>        </li>        </b:if>      </b:loop>    </ul>    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Save the template.

5. Now you can manually add links to the menu by using the Quick Edit Wrench Button. The styling of the gadget will be preserved and the active links will be highlighted.

That´s all!

Good luck!

‚Link To Me’ Widget for Blogger

 

In this post I am going to present you with a nice little widget which can find its place in the sidebar of your Blogger blog. You might want to let your readers link back to you in an easy way. We will now make a new Link To Me Widget which will display the code needed for a reader to link back to your blog. Furthermore, we will provide an Add link using Blogger button.

This button will work like a widget installer, which makes it easier for your readers to add your link. They can link back to you easily and quickly by adding your „Link To Me“ widget.

How to make the Link To Me Widget

1. First of all make a Small Logo of your blog, which can easily fit into any blog sidebars. It should be small, pretty and easily recognizable.

2. Now upload this image someplace. (You can use Blogger to upload the logo if you want, or you can opt for some service like tinypic.com.)

3. Note the URL of your uploaded image.

4. Okay, now copy the following code into a text file:

<p>If you like this blog,then link back to me.<br/>
This is what you will see.</p>
<div style="text-align: center;">
<a style="border:0px;text-decoration:none;" href="Your_Blog_URL" title="Your_Blog_Title">
<img alt="Your_Blog_Title" style="border: 0px;" src="Url_of_a_Small_logo_of_your_blog"/>
</a>
</div>
<textarea rows="3" cols="30">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea><br/>
<br/>

Optionally use this Widget installer to add this link to your blogger blog.

<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input style="display: none;" value="My Favourite Site" name="widget.title"/>
<textarea style="display: none;" name="widget.content">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea>
<br/>
<input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/>
</form>

5. In the above code, replace all occurrences of Your_Blog_Title with the actual title of your blog.

6. Replace all occurrences of Your_Blog_URL with the url of your blog.

7. Replace all occurrences of Url_of_a_Small_logo_of_your_blog with the URL of the logo that you uploaded.

8. Now your code is ready for installation.

9. Copy the modified code from your text editor.

10. Sign in to Blogger, then go to Dashboard --> Design.

11. Choose to Add a gadget and opt for HTML/JavaScript.

12. Paste the modified code into the new gadget and save.

Voila! Now you should have a link to me widget on your blog. If you want to test the Add Link With Blogger Button, then try adding the widget to your blog itself. (You can always remove it after testing!)

With slight modifications to the code, you can change this to a text link instead of an image link.

If you want to change it to a text link instead of an image link you need to remove the following line (the 10th and 19th line in the code provided):

<img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" />

and replace it with YOUR TEXT.

That´s all!

Good luck!

P.S.: You can check out the widget in the sidbar of this blog.