503 Service Unavailable in Blogger

Posted by D on Tuesday, September 28, 2010

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.


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.


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)

Continue reading »

Numbered Page Nagivation hack for Blogger

Posted by kranthi on Saturday, August 28, 2010

This post explains how to add numbered page navigation widget to blogger (blogspot) blogs:

What is Numbered Page Navigation ?

In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.

So, how to add this to your Blogger blog ?
(first backup your blog template before editing anything)

1. Sign into your Blogger account » Settings » Formatting
Choose the number of posts you want to display on homepage

set the amount of posts to be displayed on the homepage
2. Go to Design » Edit html » tick the expand widget templates

Scroll down to the bottom of the template code and find this


PASTE this code above that line

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';

<script type='text/javascript'>


function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}



In that above code, Edit the part that I highlighted in red color according to Step 1. It determines the number of posts that to be displayed per page. (Make sure, the number you set is same like the one in Step 1)

3. Control + F and search for all the occurrences of this code


and replace it with this

'data:label.url + &quot;?&amp;max-results=5&quot;'

Again, the number in the above line depends on the number you set in the STEP 1.

4. Now, the styling part.. I've made x styles.. you can choose the one you wish..

(i) Default


.showpageArea a {
background: #ffffff;
padding: 10px 10px 10px 10px;

.showpageNum a {
border: 1px solid #cccccc;
border-top: 1px solid #cccccc;
margin:0 3px;
.showpageNum a:hover {
border: 1px solid #cccccc;
.showpagePoint {
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
.showpageOf {
margin: 0 3px 0 0;
.showpage a {
border: 1px solid #cccccc;
.showpage a:hover {
.showpageNum a:link,.showpage a:link {

Copy the above code. Find this line and paste that code ABOVE IT.


Save the changes.

I've made a few more navigation styles.. I'll post them in a few min.. look for it.

Credits: Blogger Plugins

Continue reading »

How to add Blogger Share Buttons to Custom Blogger Templates

Posted by kranthi on Tuesday, August 24, 2010

Recently, Blogger released their new Share Buttons feature which makes it easier for your Blog visitors to bookmark, tweet, fshare, email ,etc your post.

But, if you're using any custom blogger template.. you may not see the widget appearing in blog..even though you activate it.

So, if you have that problem. here is how to fix it.
(before making any changes..first backup your template)

1. Sign into Blogger > Design > Edit html
(tick the expand widget templates)

2. Add this line anywhere you want the widget to appear

<b:include data='post' name='shareButtons'/>

Normally, in most templates, you can add it after this line..

<p class='post-footer-line post-footer-line-1'>

If you don't find that above line in your template....
Find this one.


and add this code after that line..

<div style='clear:both; padding: 10px 10px 10px 10px;'> <b:include data='post' name='shareButtons'/> </div>

Note: If you're using Magazine style blogger template, You can find the data:post.body line TWO TIMES.. So, try in both ways and find out which one is working..and remove the other one.

Finally..Save the template!

If you still don't see it in your Blog, Make sure..you activated it by going to
Blogger dashboard > Design > Click the 'edit' button of the Blog post section.

Continue reading »

Another STUNNING Magazine Style Blogger Template "Novinture"

Posted by kranthi on Monday, August 16, 2010

stunning blogger template Novinture

It's been quite a while since I've released any new blogger template...because of my studies,etc..but, Here I'm ...again back with another Stunningly looking Magazine Style Blogger Template.."Novinture".

I've did so many blogger templates sofar, but for me this one is the best of all.. I love the color combination..looks very professional and cool... and ofcourse with an amazing slideshow feature.

Here are some of the features :

  • Top Nav links
  • Stunning Slideshow
  • Retweet button
  • Facebook Share button
  • 4 Column footer
  • Email Subscriptions
  • Feed Counter
  • Built in Search Box
  • Wonderful Comment section (with avatars)
  • Most Wanted feature.. Page Navigation Enabled
  • Automatic Thumbnails on homepage
  • Automatic Post summaries on homepage
  • Advertisement banner ready (on header)
  • many more.....
Look at few more screenshots...

Page Navigation Ready!

Clean and Professional Comments Section

comments section

And the best thing is..its very easy to install.

Here are Installation Instructions:
(Before you do this, first backup your current template)

1. Download the template and Sign into Blogger » Design » Edit html

and Upload the template file (xml file) and Save it.

2. Editing Top Navigation Links...

To Edit the top Nav links (Home, About Us, Photos,etc..)

Sign into Blogger » Design » Edit html » Tick the "Expand Widget Templates"

Control + F (to search)

Find these lines


<a href='http://www.bloggertricks.com'>Blog Tips</a>


<li><a href='http://templates.bloggertricks.com'>Blogger Templates</a></li>


<li><a href='http://YOURLINK.blogspot.com'>About Us</a></li>

<li><a href='http://YOURLINK.blogspot.com'>Photos</a></li>

<li><a href='http://YOURLINK.blogspot.com'>Videos</a></li>

<li><a href='http://YOURLINK.blogspot.com'>Contact</a></li>

Edit the URL's and their respective Anchor Text's to whatever you like.

3. Editing the Feedburner links

Suppose, if your Blog's Feedburner url is


Search for "BloggerTricksdotcom" in the template code.. (it will appear 5 times)
and replace every "BloggerTricksdotcom" with "YOURBLOG"

Save the template!

And for Editing Slideshow, Adding Adsense inside post,etc .. Refer to the Complete guide.

If you've any questions,doubts... feel free to ask HERE (template support link) .. I'll help you out..

I hope All of you like the template... looking forward for the comments! :)

Continue reading »

How to Make your Blogger Blog ready for Mobile Phones

Posted by kranthi on Tuesday, August 10, 2010

making your blogger blog mobile friendlyAs you know, millions of people use their mobile phones to access internet. The mobile internet speed is also very fast these days with 3G's , mobile apps,etc.

From this, we can say many of your readers are coming to your blog through mobile phones..But, if you don't make your blog mobile friendly, .you may lose all your mobile readers because in a mobile phone, a normal blog takes lot of time to load and there are other issues that your site not fitting properly in the mobile screen.

So, here is how to make your Blogger (blogspot) blog mobile internet friendly..

Sign into your Blogger account > Design > Edit html

Find this line..

<b:include data='blog' name='all-head-content'/>

Paste this code below that line...

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>


<meta content='width=1100' name='viewport'/>


Save the Changes!

That's it! Now, your visitors can access your blogger blog through mobile phones with blazing speed...

Thanks to Gyms who let me know this first..

Continue reading »

Follow me on twitter

Popular Blogger Tips,Tutorials

Popular Tools

favicon generator

Favicon Generator

Free tool to generate favicons online...
blogger ad code converter

Blogger Ad Code Converter

Free tool to add adsense inside posts..
online logo maker

Online Logo Maker

Create Stunning 3d logos online...
yahoo invisible detector

Yahoo Invisible Detector

Check your buddy is online or offline or invisible...
keyword density checker tool

Keyword Density Checker

Find out how often keywords are repeating in your site...

Home | Privacy Policy | Contact us | Submit Blogger Templates
2007-2010 Blogger Tricks. All rights reserved. Blogger Templates