Are you getting this error message on your blog dashboard, or while you are trying to access your blog?
Read on to find out what this problem is all about and how to help blogger to solve it.
What does 503 mean?
503 “Service Unavailable” is a “response code” like 404 “Page not found”. The 503 response code is a bit more complicated as it is not a page that is missing it is 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, this 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 in Google analytics and check your traffic sources, select search engines and select the keyword that brings most of the traffic to your blog, 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 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 talking 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 could take in order to help Blogger to solve the issue.
Basic level (no skills required)
- Summarize your posts.
- Show only the most relevant post 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.
Medium Level (some skills and knowledge are required)
- Use a light weight template and avoid using the “template designer” from Blogger
- Use Light 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 blogger dashboard) by typing the url in the address bar of the browser. Take note of the time that it takes for your blog to load completely, now go to blogger and change your template for 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 java scripts and/or have a background image.
Images play an important part in saving some bites, you can use PNG format or GIF as these are lightweight formats, you can also use JPG but you must 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 GIPM; an open source software with features like Paint Shop Pro; easy to use especially to change image formats.
High level (Skills and Knowledge are 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 “Firebug” for Firefox. Firebug will report a series of problems that your blog may have in order to reduce the loading time of your blog which is one of the determining factors of 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 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 saving you time in editing those images.
Overall there are alot 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 is 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 easy: this is not just Blogger’s problem this is a blog problem, and in this case, blogs worldwide. This is not 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 if Blogger changed the rules and started to charge it’s users for their 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 user 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
(These links open on a new window and will open the Official sites where you can find more info before downloading each software. All software is Open Source and free of charge)
Add Navigation Bar in Header Image
In our article on Horizontal Menu and Navigation Bar, we have given you a how-to guide on adding a horizontal navigation bar into the Blog template. This Navbar can be text links, image links, or both. Since they are navigation tools, they should be somewhere at the top of the page and easily noticeable. You may have a background image in the Header and after adding the Navbar, you find the Navbar sitting at the top or bottom of the Header. Perhaps you want the Navbar somewhere in the middle of the image instead. In this article, we shall explore further customization tips on aligning the Navigation Bar and moving it to the exact position within the Header.
Header Image using Blogger feature
If you have inserted the background image into the Header using the 'Edit Header' method, and added the Navigation Bar, you will see the Header image and the Navbar as 2 separate items like this:-
This is because they are different widgets, i.e., the Header image is comprised in the Header widget whereas the Navbar is in the HTML widget. One comes after the other in the layout. To move the Navbar further up so that it is within the Header image, we can set the top and bottom margins of the Navbar widget. If you have inserted the Navbar through our tutorial, you would have remembered that we called the widget “newnavbar”. Go to Template -> Edit HTML and add another code:-
#newnavbar{
margin: -80px 0 80px 0;
}
There are four values in the margin setting. They are respectively the top margin, right margin, bottom margin and left margin. By indicating a negative top margin value, we are shifting the Navbar upwards, into the Header image. The result is the menu bar within the Header like this:-
If you want the Navbar further to the right, put a negative value to the right margin setting. Similarly, if you want to shift the Navbar to the left, indicate a negative left margin setting. Since image sizes and template styles differ, you would have to try out different margin values to find an optimum setting for your template. Preview the template to see the new layout.
Header Image by modifying stylesheet
The second way to insert the background image into the Header is the 'Modify Stylesheet' method. This is done by uploading the Header image onto a server and placing a link in the Header style:-
#header-wrapper {
background-image: url(URL of image);
}
Once you have added the Navigation Bar, you would notice that it is positioned immediately after the Blog Description, and it is within the Header image.
However, there is still a need to fine-tune the position. For example, you can see that our picture in the center of the Header image is 'cut off'. Our image height is 400px but since the Title and Description do not take up much space, the Header image is not fully shown. If we want to show the entire Header image, we can insert a height specification into the header-wrapper definition like this:-
#header-wrapper {
background-image: url(URL of image);
height:400px;
}
Next, as we had mentioned, the menu bar is after the Description and within the Header. We want to move this downwards so that it is at the lower part of our Header image. Same as before, we insert another style definition for the “newnavbar”:-
#newnavbar{
margin: 400px 0 0 0;
}
This time, we want to shift it down, so we add a positive value to the top margin. There we have it, a full Header image, and the horizontal Navigation Bar at our desired position within the image.
Unable to Remove Header Image
A reader brought up an unusual problem. After uploading an image into the Header, the reader was unable to remove the Header image. We do not know the reason why the image cannot be removed. This uploading of Header image is a Blogger feature and not a blog hack. The solution as we shall explain is to remove the Header and reinstate a new Header.
Uploading Header Image
For those who have yet to put images into their Headers, read this how-to guide on Adding a Background Image into the Blogger Header. This Blogger feature allows you to have the image as a backdrop to the Title and Description, or as a replacement to both the Title and Description. If you choose the latter, only the image will be seen and the Title and Description are hidden from view.
Removing Header Image
To remove or substitute the image, all you need to do is to go back to the Header page element via Template -> Page Elements and click the “Edit” link at the bottom right corner. Remove the picture and save.
If, for whatever reason the image cannot be removed, a solution is to remove the Header altogether. As per our article Add Page Element to Blogger Header, go to Template -> Edit HTML and scroll to these lines:-
Change them to these and save the template:-
Go to Template -> Page Elements and you should now see the option to Add a Page Element in the Header and be able to remove the Header. Click the “Edit” link in the Header, select “Remove Page Element”. The Header together with the image will disappear.
Next, reinstate the Header by clicking “Add a Page Element” at the Header area. Near the bottom of the list is the “Page Header” element. (You are entitled to have one Page Header. The previous Header has to be removed before you can add a new one.) Enter the Title and Description and upload your new picture if you'd like. Save when done. You should see a new Header and/or Header image.
Blog Posts
Arrange, customize and shift the Blog Posts and Footer elements
We wrote an article on customizing Blog Post Footer elements, adding pictures, signature, changing the wordings of the elements, etc. If you are not thinking of adding images, but simply changing the text or the position of these Blog Post elements, there is an easy way to do it.
Login to your Dashboard, go to Template -> Page Elements. You should be able to see the “Blog Posts” widget. Click the “Edit” link at the bottom right corner.
The elements you can change or edit are:-
1. Number of posts to be displayed on main page
You can set a number of posts to be shown or number of days with post. If your posts are lengthy, try not to set the number too high because it affects the load time of your page.
2. Date format
You may even uncheck it so as not to display dates. The caution note here is that some blog directories and Ad companies will not accept your Blog unless they can see the date of posts. This is their way of ensuring that you have an active Blog.
3. Posted By
As you can see, these words can be replaced with other text like “Author” or “Poems by”. The author's name will still be shown. To remove the author's name or change it to an image, you may look up the above guide.
4. Time stamping
The word “at” and the time formats are variables you can change. Not a big deal. If time is not really important to your posts, you may uncheck the box.
5. Links to this post
These are the backlinks showing who link to your posts. Change the text. You can also configure this under Settings -> Comments and choose to show or hide the backlinks.
6. Labels
Labels are the tags you have used to describe your posts. For some, other words like “Subjects”, “Genre”, “Topics” or “What About” may be more suitable.
7. Quick Editing
Only the blog authors can see this pencil icon when they are logged in to their Blogger account. At a click, they can edit the various posts. Without this function, you would need to go to Posting -> Edit Posts in order to edit any earlier published post.
8. Email Post Links
Display this to allow users to email your post to their friends. It is a no-harm-having-it feature, so you may want to leave it there.
9. Show Ads Between Posts
For those who want to have Google AdSense Ads appear after every post, this is what you have to tick. You will be able to configure the type of Ad size and color scheme. Should you have more than 3 posts shown on a page, Google will display only 3 Ad units (including any Ad in your sidebars) on a page, the current allowable number. To maximize your income opportunity, you may want to complement your Google AdSense with other non-conflicting Ad services like AuctionAds. Also, should you want to place these Ads at the top of the posts or the side, you may follow our tutorial at AdSense Code in Blogger Post Body.
10. Arrange Footer Elements
Finally, under “Arrange Items” you can adjust and shift the positions of the Post Footer items. Drag and drop them to the desired position. When all is done, Save the Changes and view your Blog to see the new formatted layout of your Blog Posts.
Image beside Blog Post Title
We had in our earlier article showed you how to add Images or Icons to Sidebar Links. Many readers are also interested to add images next to the Blog Post Titles. You can have a small picture to automatically appear in every Post Title. This guide will explain how this can be done.
The image we are talking about has to be small, perhaps about 20px in width. But for the purposes of this guide, we shall also use a bigger image double that size, to let you see the difference.
First, we have to create that image. If you have an existing photo or picture, you can use an image editor like Google's Picasa to crop or resize it to a small image size. After that, upload it onto a free image server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Copy down the IMAGE URL.
Example 1
In this first example, we use an image of 20px by 20px. Login to Dashboard and go to Template -> Edit HTML. In the Minima Template that we have, we would see these lines:-
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-family:trebuchet ms;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
If you are using a different template, you can still locate .post h3 and although the styles defined may vary slightly, the way to insert the image is the same. The codes that should be modified or inserted are highlighted in red.
.post h3 {
background:url(IMAGE URL) no-repeat;
margin:.25em 0 0;
padding:0 0 4px 30px;
font-family:trebuchet ms;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
The IMAGE URL is the location where the image is uploaded, beginning with http:// To test whether the link works, enter that into a browser and press Enter. You should see that image without being prompted to download it.
We adjusted the padding to shift the Post Title. The padding is the space between the border and the element. Our intention here is to add a space between the left border of the Blog Posts and the start of the Post Title. How the value works is this. In a shorthand declaration, the padding property can take these forms:-
.post h3 {padding: 10px;}
This indicates that the padding is 10px on all the four sides of the Post Title.
.post h3 {padding: 10px 20px;}
Here, the top and bottom padding is 10px, and the left and right padding is 20px.
.post h3 {padding: 10px 20px 30px;}
Where there are three values, the top padding is 10px, the left and right padding is 20px, and the bottom padding is 30px.
.post h3 {padding: 10px 20px 30px 40px;}
This declaration style is what we use to adjust the Post Title to the exact position where we want it. With 4 values, the top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 40px.
As you would understand by now, since our image width is 20px, we added a left padding to the Title to give a space of 30px between the border and the start of the Post Title. You would have to change the values of this padding setting to cater to your image size and blog design. Always Preview the Template and do not save it until you are happy with the change.
Example 2
In this example, we use an image size of 40px by 40px. The modification to the template code is the same as above. However, our paddings will have to take care of this larger image.
We can change the padding to this:-
.post h3 {
background:url(IMAGE URL) no-repeat;
margin:.25em 0 0;
padding:10px 0 4px 50px;
font-family:trebuchet ms;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
We set a top padding (space above the Post Title) in addition to the left padding. The Title is aligned to the middle of the picture. If the Title is to be aligned to the bottom, we would have increased the top padding from 10px to 20px. Experiment with your padding settings to align the Post Title. Preview the Template and save it if you like the new layout. Refresh the Blog and you will have an image displayed beside each of the Post Titles.
Pre-formatted text in Blog Posts
Just as we sign off every letter in a particular style, we may want to end every Post with a standard text, signature, logo, graphic or link. There are 2 ways to have this pre-formatted text automatically appear in the template or post template, so that you need not have to retype them every time you post.
Modifying the Template
The first method is to modify the template. Readers who have followed our guides to insert Social Bookmarking Links, AdSense Codes, Digg buttons, etc., will be familiar with template modification. Still, we would recommend this only to the users who are proficient in CSS and codes.
When you are logged in, go to Template -> Edit HTML and check the box next to “Expand Widget Templates”. Scroll to where you see this:-
If you want the standard text to appear right after the Post Title but before the Blog Post, insert the TEXT above this code. If you'd like the text to appear immediately after the Blog Post but before the “Posted by” line in the Footer, insert the TEXT below this code.
Because the placement is in the template, to align the text, add the alignment codes like these, before and after the TEXT:-
TEXT
You can also have images, text links, etc. instead of plain text. These codes are discussed in Hyperlinks and Image Links.
Using Post Template
This method is what we think every Blogger can easily use to insert standard text, boilerplate clauses or pictures into every post. It is Blogger's way of saving you the time of retyping these into every post. You can therefore configure the text that you want, and insert that once into the Post Template. This text will always appear in the Post Editor when you create a new Post in the same manner as a signature is appended to each of your Yahoo or Google mail. In short, your Post Editor is now pre-formatted to include this text.
First, create a draft post. Use the “Compose” mode and type in the text, add the links, change the font style and color, etc. When you are happy with the text, switch to “Edit HTML” mode. Copy the entire piece of writing together with all the style codes.
Next, go to Settings -> Formatting and at the bottom of the page, you will see a “Post Template” box. Paste the code into the box and click “Save Settings”.
The draft post we created may be deleted. The next time we write a new post, this pre-formatted text will appear in the Post Editor. We can delete or edit this text or leave it at the foot of our Post.
Change Blogger Post URL – SEO Tip
Search engines look for keywords and it is widely believed that keyword-specific domains and subdomains rank highly in the search engine algorithm. This is so because having the keyword in the URL suggests that the site contents are related to the keyword. Also, when visitors look at the search results, they are likely to click the link that contains relevant keywords. With this in mind, we should ensure that keywords appear in the Blog URL and Blog Post URL for search engine optimization (SEO) purposes.
Blog URL
In case you are lost as to what we are referring to, consider this. Suppose you want to blog about politics in planet Mars (fictional of course). You start to create a new blog. Between the two – one bearing your name http://tom-dick-harry.blogspot.com and the other bearing the URL http://politics-in-planet-mars.blogspot.com – which do you think will attract the search engines and potential visitors? Quite obviously the second URL. People who are interested in this topic will search for the keywords “politics”, “planet” and “mars” and are never going to search for your name. Search engines identifies these keywords in the Blog URL and displays that in their search results.
It may be that over time, you are so famous that your name is synonymous with this topic and people will search for your name instead. The start will be slow and more effort has to be put into publicity, such as submitting your blog to Blog Directories, Feed Directories and Search Engines. Until such time, you would have to endure trickling traffic to your Blog. If you are starting a new blog, bear this in mind.
Blog Post URL
Under Settings -> Archiving, if you have selected “Yes” to “Enable Post Pages”, each of your posts will have a unique web page. Blogger automatically generates the Post URL based on the Title of the Post. The title follows a fixed format:-
|-----------------------------------------------------|
|http://blogname.blogspot.com/2007/09/post-title.html |
|-----------------------------------------------------|
There is a limit to the number of characters in the URL. Let's assume you have written a Post about healthy lifestyle and happily called it “How to add more spice and flavor into our lives.” Once the Post is published, the Post URL may look like this:-
|--------------------------------------------------------------------------------|
|http://blogname.blogspot.com/2007/09/how-to-add-more-spice-and-flavor-into.html |
|--------------------------------------------------------------------------------|
Based on what we said about SEO, you may get hits from people who want to find out about spices used in food or food recipes. This is vastly different from your intended visitor profile. One way to get around it is to give the Blog Post a Title that contains the necessary keywords. For instance, name it “Healthy Lifestyle Choices and Tips.” Publish your Post and the Post URL will be something like:-
|-----------------------------------------------------------------------------|
|http://blogname.blogspot.com/2007/09/healthy-lifestyle-choices-and-tips.html |
|-----------------------------------------------------------------------------|
After the Post is published, go back to edit the Post and change the title. You can have a fanciful and yet relevant Post Title. Republish your Post. Even though the Title is changed, the Post URL will remain the same. However, the title that appears in the feed and search engine index will be the new edited title. In a way, you have the best of both worlds, a title that you like and a Post URL that contains the keywords for search engine optimization.
Add Scrollbars to Blog Posts
If you have followed our main article Add Scrollbars to Blog Widgets, you would be able to introduce horizontal and vertical scrollbars to all or any of the widgets in the Blogger template. These scrollbars can be made to automatically appear when the contents overflow a certain specified width or height setting. We have also talked about how scrollbars can be added to the Blog Post body. We shall in this tutorial elaborate on that and let you know how to add the scrollbars within each Blog Post.
Scrollbars to Blog Post body
As we had mentioned in our article, to have the scrollbars to each of the blog posts, once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown
.post {
height:200px;
overflow:auto;
}
This will give you scrollbars to every post:-
Scrollbars within Blog Post
Sometimes, you may not want to have the scrollbars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylesheet.
For example, we can insert in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows this setting, scrollbars will automatically appear:-
.scrollbox {
height:100px;
width:400px;
overflow:auto;
}
Save the template. Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode.
Add these tags (shown in red) before and after the part of the text that you want to enclose within the scrollbox.
TEXT TO BE INCLUDED IN THE SCROLLBOX.
You can continue typing the post by switching back to the “Compose” mode.
After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scrollbox
Header
Insert an image to the left of Blog Title and Description
Instead of having an image occupy the entire Header section, some might want to have a small image beside the Blog Title and Description, either on the left or on the right of the Header. Blogger has a simple feature which allows you to upload an image to the Header. However, as we had explained in our article Background Image for Blogger Header (New), this image appears as a backdrop to the Blog Title and moves with the Title. To have the image on one side, we suggest two methods which you can try.
Using Blogger Header Image Upload
Let's say we have a small picture (150px by 150px) that we want to put on the left of our Blog Header. Use an image editing software to create a new blank canvas of 760px (width) by 150px (height). Check the Header width of your template. Normally it is found under #header{ of the template. Change the width to cater to your Header.
If you need a free software, try Irfanview. Next, open the small picture, copy and paste it into our blank canvas. In our example, we shift it to the extreme left of the canvas.
Save this newly created image into our computer and we are ready to upload it to our Header. Go to Template -> Page Elements and click the Edit link in the Header. Upload this image and for “Placement” select “Behind title and description.”
When you view the Blog, you would probably notice that the Title and Description overlaps the Image because most templates align the Blog Title to the left.
The next step is to align the Header Title and Description by adding a left margin greater than the width of the picture. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if you are using a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.
In our example, we added a left margin as follows:-
h1.title {
margin-left: 200px;
#header .description {
margin-left: 200px;
Preview the template. Save. We now have a nice little Header Image beside our Blog Title and Blog Description!
Using Picture Links
The second method is one we highlighted in our Add Picture Banner Link to Blogger Header article before Blogger introduced the Header image upload feature.
Again, we use an example of a 150px by 150px picture. This time, there is no need to create new images. All we need to do is to upload this image to a free image server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL. After uploading the picture, take note of the Image URL.
Go to Template -> Edit HTML and scroll to where you see this:-
Amend the values to that shown in red. Save the template. You should be able to add Page Elements to the Header section. Under Template -> Page Elements, click to “Add a Page Element” in the Header, and select “HTML/JavaScript.” Copy and paste the image link code below:-
Type in the Image URL where your image is hosted. Enter the width and height settings of the image. The Description is an alternative text displayed when the image is not loaded for whatever reason. Add the text you want it to show. Notice that we have aligned the image to the left. If you want it on the right, change the word "left" to "right".
Once it is done, our next step is aligning the Blog Title and Description as discussed earlier. Set a left margin and when it is done, the final Header you get is the same as the picture shown above, a picture on the left of the Header just next to the Blog Title and Blog Description.
