HOWTO: Redirect Blogger to a Country Domain

Recently a reader sent me a question asking how a Blogger blog can be re-directed to a custom domain representing a country domain. This post is about how this blog, The Blogger Guide, was moved in to its current address in the .lk domain.

Basically, there are two steps.

Firstly, you should configure a CNAME (or Canonical Name) record with your country domain registry. (Additionally you can provide an A-record as well, but that is optional). Let's look at this in a bit more detail.

When a visitor want to reach www.bloggerguide.lk from a browser, the program will first contact a .lk domain registry through the DNS (Domain Name Service) system. Technically, this is called a DNS look-up. A DNS look-up simply maps a domain name (or URL) to a physical web hosting server which actually hosts the web site (or blog, or any Internet service for that matter) corresponding to that domain name. In this instance, the domain name www.bloggerguide.lk is hosted by Blogger and, the .lk domain registry should return the Blogger's hosting service as the reply to the DNS look-up. A CNAME entry is, in fact, an alias to another server which actually hosts the given URL

For example, the CNAME entry given to the .lk domain registry for this blog is given below.

www.bloggerguide.lk. 3600 IN CNAME ghs.google.com.

Once this CNAME entry is configured, for every look-up request for www.bloggerguide.lk, the .lk domain registry (or the name server) will return ghs.google.com (technically, that's another domain name which needs to be resolved, but that is not relevant for this post).

Secondly, you have to tell Blogger that you will be hosting the blog on a custom domain. This step will link your blog with the custom domain name. When that is done, Blogger will know that a request asking, for example www.bloggerguide.lk, is actually looking for this blog which is running inside its servers.

The way to configure the custom domain in Blogger is very simple.

• Go to Settings : Basic : Publishing
• Click "Switch to advanced settings"
• Enter the custom domain name and click Save

Once the above two steps are completed, you are done with moving your Blogger blog to a custom domain. Of course, the DNS system might take about 24 hours to properly start resolving this new name.

See the Blogger's help article on custom domains for more details.

HOWTO: Link to All Posts of a Given Day

If you have several posts written on a given day and want to create one link to all of them, here's a little tip that will help you to achieve that.

Even though there is no direct way of getting this done, you can use Blogger's Archive feature as a workaround. All you should do is to set your archive frequency to Daily. (Settings -> Archiving -> Archive Frequency). Then the Archive widget will show a breakdown up to a single day. (see figure below)

Each day in the widget carries a link to a page that lists all the posts in that day. That's the reference you need to use to link to all posts of a given day. Even if you don't have the Archive widget, you can still make up the URL for a given day. It has the format http://<your blog address>/YYYY_MM_DD_archive.html.

Add Pages in Blogger

"How can I add pages to my Blogger blog?"; this is a frequent question on Blogger Help forums, which I think comes from bloggers who have used other blogging platforms such as Wordpress.

The simple answer is that you cannot add pages to Blogger blogs. But, of course, there are workarounds.

Most people who ask about pages have a requirement to direct the readers to some key pages in their blogs such as an About page or a Contact page.

There are some simple workarounds to achieve the desired effect. In all cases, you would need to write normal posts with the content that you want in your pages. Once you publish those posts, one way to get the pages effect is to add a simple navigation bar at the top and link to your relevant posts from there. (for example, see the navigation bar for this blog)

Another alternative is to use a Link List widget or an HTML/Javascript widget in your sidebar and linking to the required posts from that widget. Placing such a widget at the top of your sidebar with a suitable caption can catch enough attention from your readers.

HOWTO: Customize Post Page Labels

This is an answer to a question I got from a reader. The question had two things; firstly "How do I change the 'comments' label to something like 'reviews'?" and secondly "How can I change the label 'Posted by' to something different?"

There's something common about both of these questions. They both are Post Page labels (the word labels is used to mean string literals and not the labels used to categorize posts). Customizing these strings to something of your own is pretty simple. Just open the Blog widgets configuration dialog and change the strings as you like.

The illustration below is about how you can change the default comments label to "reactions".

A Better Read More Option

In a previous post I presented a simple technique to add a Read More option to hide a desired portion of long blog posts. But that method has a drawback because it shows the "Read More" link even for the posts that do not have hidden parts.

Here's an improved version of that technique which shows the Read More link only if you have decided to hide part of a post. [Note that the "Read More" link will be displayed only on the blog home page and archive (i.e. label) pages]

1) Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.

2) Locate the </head> tag and copy the code shown in red in the following snippet, above that tag.

]]></b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style>span.fullpost {display:inline;}</style>
<script>function tbgHideReadMores() {}</script>
<b:else/>
<style>span.fullpost {display:none;}</style>
<script>
function tbgHideReadMores() {
var els = document.getElementsByTagName(&#39;*&#39;);
for (i = 0; i &lt; els.length; i++) {
if ((els[i].className == &#39;post-body&#39;) || (els[i].className == &#39;post-body entry-content&#39;)) {
tbgHideReadMore(els[i])
}
}
}

function tbgHideReadMore(post) {
var spans = post.getElementsByTagName(&#39;span&#39;);
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].className == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
}

var lnks = post.getElementsByTagName(&#39;a&#39;);
for (var i = 0; i &lt; lnks.length; i++) {
if ((lnks[i].innerHTML == &quot;Read More&quot;) &amp;&amp; (found == 0)){
lnks[i].style.display = &#39;none&#39;;
}
}
}
</script>
</b:if>
</head>

3) Locate the <body> tag and modify it as shown below.

<body onload='tbgHideReadMores()'>

4) Locate the <data:post.body/> element and add the code shown in red below.

<div class='post-body entry-content'>
<p><data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read More</a>
</b:if>
</p>

5) Then for each post that you want to display a summary, you have to add the following piece of code enclosing the part that you want to hide. (Do this from the Edit Html tab of the post editor)

This is a sample long post. Only these two lines are visible on the homepage.

<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More
link.</span>

Notes:

• Instead of "Read More", if you want some other phrase such as "Continue...", then you have to put that exact string in the places in which "Read More" appears in steps (2) and (4).
• The unnecessary Read More links get hidden only after the page is fully loaded. So you might see them initially, until the home page gets fully loaded in the browser.

Stikcy Posts

Blogger's posts are by default displayed in the reverse chronological order (i.e. the most recent post is displayed first). This means that, as and when you write new posts, the visitors to your blog's homepage get to see those new posts.

A sticky post is a post that gets stuck to the homepage and remains at the top no matter how many other posts you write. This is very useful if you want to make your blog index page similar to that of a normal website, which has the same homepage all the time.

The trick is to manipulate the post date and time of the particular post that you want to remain as the homepage. All you have to do is to set the date and time of that post to somewhere in the future. For example, if this post is forward-dated to, say, July 26th 2010, it will remain on the index page for another year. The farther you set the post date, the more it stays stuck at the top.

The "Post date and time" settings are found at the bottom of the post editor window, and are illustrated in the figure below.


Remember to first publish your post in the normal way and then to modify the post date and time from the edit post mode. If you forward-date the post before its initial publishing, then it will go as a scheduled post.

Other than creating the pseudo homepage, this trick is useful to create notices that you want to stay on top for some time. For example, if you are organizing some event that occurs in two months time and you want all the readers to your blog during the next two months to see that notice, you can forward-date it by two months so that it will remain at the top until the event is over.

Another thing you might want to do is removing the displaying of the post date and time from the Post Page Options section. Otherwise, your visitors might get the feeling that they have time traveled to reach your blog.

HOWTO: Add a Read More Option

Update:
Please follow this better Read More option, instead of the one described here.

If your blog contains long posts and you want to only show a selected snippet of each post on your homepage, here’s a simple method to add a “Read More” option to hide part of a post on the homepage (and also on archive pages).

• Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.

• Then locate the </head> tag and add the code shown in red in the following snippet, above that tag.

]]></b:skin>
<style><b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if></style>
</head>

• Then locate the <data:post.body/> element and add the code shown in red below.

<div class='post-body entry-content'>
<p><data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read More</a>
</b:if>
</p>

• Then for each post that you want to display a summary, you have to add the following piece of code enclosing the part that you want to hide. (Do this from the Edit Html tab of the post editor)
  

This is a sample long post. Only these two lines are visible on the homepage.
<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More
link.</span>

Reference:
Expandable Post Summaries

Aligning the Header Image

In a previous post I talked about how the Blogger’s header image gets resized depending on the size of the image, the available space in the header and the configuration of the header widget. In this one, I will answer another question I get so often from my readers; “How can I center the header image?" This handy tip will help you not only to center align the header image, but also to right align it, if required.

First add the header image as you would normally do it. Then, to center Blogger’s header image, simply add the following CSS snippet to your template’s skin. (Read this to learn more about the Blogger template structure)

For placement “Behind title and description” add:

#header-inner {
margin-left: auto;
margin-right: auto;
}

For placement “Instead of title and description” add:

#header-inner img {
margin-left: auto;
margin-right: auto;
}

You can add it anywhere inside the skin. But, to keep all header related styles close apart, add it after a style such as the #header-wrapper or #header.

To right align the header image, simply remove the “margin-right: auto;” statement from the above block.

This trick has been tested on Denim, Denim Stretch, Rounders and Scribe templates. (Minima has it by default). But it should work on all other default Blogger templates. If it doesn’t work on a particular template, please let me know.

Variable for File Host Location

This post explains how you can add a template variable to define a third party file host location. The file host defined here will be used to host all the custom images provided free with The Blogger Guide's various popular HOWTOs such as the three column and wider two column template conversions.

Go to Layout -> Edit HTML mode and add the variable as described below.

The template variable we add here is of type automatic. To incorporate it, simply add the code shown in red below, right to the end of your template's Variable declaration section. (Usually, the last variable on a default Blogger template is the endSide variable)

<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
<Variable name="imageHost" description="Image Host Location"
type="automatic" default="http://idssl.fileave.com/tbg"
value="http://idssl.fileave.com/tbg">

*/

To learn more about Blogger template variables, read the article shown in Related Posts below.

Related Posts

• Blogger Template Variables

Blogger HOWTOs

Given below is a categorized list of HOWTOs available on The Blogger Guide.

Template Customizations

• How to Add a Third Column - clear and simple instruction to convert popular Blogger templates in to 3 columns
• How to Expand Post Width - easy to follow, step by step tutorials to widen the Blogger post column
• How to Add a Custom CSS to Blogger - tweak Blogger templates' look and feel with additional styles
• How to Customize Fonts and Colors - add your favorite fonts to Blogger

Site Traffic

• How to Monitor Visitors - learn about visitor meters
• How to Exclude Your Visits from Google Analytics - tell Analytics to ignore internal traffic
• How to Exclude Your Visits from Feedjit - ignore internal traffic from Feedjit

Blog Promotion

• How to Add to Google Webmaster Tools - register your blog with GWT
• How to Add a Sitemap - help Googlebot to crawl your Blogger blog

Miscellaneous

• How to Get Spam Blog Cleared - contact Blogger support to unflag spam status
• How to Backup Your Template - learn to easily backup and restore your template

Last Updated: 2009 Jan 29

HOWTO: Upload Files to Blogger

A frequently asked question on many Blogger user groups is "How do I upload files to my blog?". Files refer to types of files such as .doc, .xls, .pdf etc. The simple answer is, you cannot upload any files to Blogger, other than images. But, don't worry, there is a simple alternative.

All you have to do is to upload your file to an online hosting service and link to that file from your Blogger blog. There are many free hosting services available today. Just google for "free file hosting" and you would a get a zillion of hits.

One such service is Google Pages, which allows you to create up to three accounts, each offering 100 MB of free storage. For example, the free resources provided by The Blogger Guide's three column conversion tutorials, wider post column tutorials, and the pdf file showing a mapping of CSS styles to Blogger templates are all hosted on such a Google Pages account.

Update: (2009 Sep 23)
Google Pages does NOT offer new accounts now. Fileave.com is another free file host.

HOWTO: Add More Gadgets

First of all let me wish you a Happy New Year on this very first day of the year 2009. Today I will be presenting a simple, but useful tip on modifying your template to add more gadgets.

In a default Blogger template you can add gadgets only to the sidebars and the footer. For example, the following image illustrates the Page Elements view of a default Minima template.


As you can see, the “Add a Gadget” (or widgets as they are called sometimes) button is available only at the sidebar and the footer.

But these aren’t the only places where you can add gadgets in a Blogger template. With a simple modification of the template code, you can enable gadgets in several other sections. In this article we’ll see how.

If you view your template’s code using the Layout -> Edit HTML option, you can see several code elements enclosed in <b:section>…</b:section> tags. A b:section element defines a major section of your template such as the Header, Posts column etc. These elements have two optional attributes (or properties) called showaddelement and maxwidgets. The first property controls whether a given section should display the “Add a Gadget” button or not, and the maximum number of widgets for that section is defined by the second property.

For example, the default values for the Header section are as follows.

<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>

Gadgets in the Header section can be enabled by simply changing the value of the showaddelement property to ‘yes’. Absence of the maxwidgets property implies that there is no maximum limit, so removing that property is the easier thing to do.

Therefore, by changing the above code line to this:

<b:section class='header' id='header' showaddelement='yes'>

your Page Elements view will change to the following.


The cross column (an invisible, horizontal column separating the Header and the content columns) and the Posts column are two other sections that can be modified as above, giving you more options in placing gadgets. The following code snippets display the beginning of those two sections respectively.

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

<b:section class='main' id='main' showaddelement='no'>

HOWTO: Add an image beside a URL

In this article, we will learn a simple technique to display an image by the side of a URL. This method uses a simple CSS class to dress up the URL.

First, we need to select an image to be displayed. In this example, I'm using a 14x14 pixel image hosted on this blog's companion site. (Note: The selected image must be hosted online)

Then, we add a simple CSS rule, such as the one below, to the blog's skin.

a.image {
padding-right:16px;
background:url(http://thebloggerguide.googlepages.com/icon_ext_window.png) no-repeat 100% 50%;
}

In the above code, the a.image selector is called, in CSS jargon, a class selector. What that means is that any anchor element (i.e. <a>) that has the class property set to image will be modified according to the rules defined in that selector. In this instance, the first rule tells the browser to insert some space (i.e. padding) to the right of the URL and the second rule inserts a background image to be displayed in that space.

The following screenshot illustrates how this CSS code can be added by going to Layout -> Edit HTML.


Once this code is added to the blog skin, it is available to be used from within blog posts.

The last step is to attach this CSS rule to the URL that needs to be modified. All you need to do is to add class="image" attribute to that URL.

<a href="some URL" class="image">The Link Text</a>

For example, the following HTML:

<a href="http://thebloggerguide.googlepages.com" class="image">The Blogger Guide Web Site</a>

will be displayed as follows.

The Blogger Guide Web Site

That's it. Try it yourself and let me know how it goes.

PS:
This is the first post after a long silence of about 3 months. Though new content was not added, I was responding to my readers' queries. Hope to get back to more frequent posting again. Many thanks to all the readers out there!

Related Posts

• URLs
• HOWTO: Add a custom CSS class to Blogger

HOWTO: Add a Recent Posts Feed

If you want to add a feed that shows your Recent Posts in the sidebar, you can use the BuzzBoost feature from FeedBurner (www.feedburner.com). It is very simple.

First, burn your feed at FeedBurner. Then go to your feed's homepage on FeedBurner and click the Publicize tab. From that section select BuzzBoost. (See figure below)


Configure the number of posts to display and the content to appear and then copy the given Javascript code. Add it to your blog using an HTML/Javascript widget. (You can alternatively use the "Use as a widget in" option provided on the BuzzBoost page. This will take you to the "Import Page Element" page of Blogger.)

That's it. View your blog and you will see the recent posts appearing on your sidebar.

HOWTO: Backup and Restore your Template

Blogger provides an option where you can edit the template directly in HTML mode. This mode allows you to do a lot more customization than possible using its standard interfaces. For example, if you want to convert your blog to 3 columns or increase the width of your post area, you can do it using the Edit HTML mode.

However, most non-technical Bloggers are somewhat afraid of trying out such changes, even by following simple step by step guides. The Backup and Restore option should give you that additional bit of confidence to go ahead and try out a bit of tinkering by yourself.

This article will illustrate how you can back up and restore your template. It's very easy.


Backup
To backup your template go to Layout -> Edit HTML. The very first option in this pane is "Backup / Restore Template". Under that click the link "Download Full Template" (See Label 1 in the above figure). Choose the option to "Save" from the next dialog that pops up. Browse to the location you want to save it (e.g. Desktop) and click Save.

The template will be downloaded to the specified location. It's a small XML file and will be named as "template-<your blog id>.xml" where <your blog id> is a long series of digits. That's it; this XML file has all the details of your current template.

Restore
Restoring is also as simple as backing up.

Let's say you tried out some changes for your template and didn't get it right. When you try to save your template you get this frightening error message in red! (Clear Edits will not work here because you have saved your changes)

Don't panic. Remember you backed up your template earlier. Just click the Browse button (Label 2 in above figure) of the Backup / Restore option and browse to the downloaded template file and click Open. Then click Upload (Label 3). Then Blogger will restore your template to the state it was, prior to your edits. Then save your restored template.

You will be back to square one. Try your change some other day. As long as you back it up properly, you can restore it until you get your change right. :)

HOWTO: Customize Fonts and Colors

Fonts and Colors in the Blogger templates can be used to tweak the look and feel of a given blog. The usual way of changing them is to use the Fonts and Colors pane.


However, this option gives you only a limited set of colors and fonts. There are two other, slightly advance ways in which you can customize the fonts and colors in your template. They are:

• Use of template variables and
• Direct modification of the CSS code

I will use the Minima template as an example. (Though most templates use a common set of variables, some have slightly different variables depending on the design of the template)

Use of template variables
Let's say you want to change the Text Font from the default Georgia font. The Font and Colors option gives only 5 other fonts. If you want to use a different font other than the given ones, you can do so using the bodyfont variable.

Go to Layout -> Edit HTML and scroll down to the "Variable definitions" section in the template skin. Locate the bodyfont variable. (See figure below)


As you can see, the bodyfont variable has 5 attributes. In this article, we will focus on the two attributes named default and value. (See the article on Blogger Template Variables for a detailed discussion on them) The attribute default contains the default Text Font for the Minima template. Whenever you click the "Revert to template default" option in the Fonts and Colors pane, Blogger applies these default font settings. The attribute value contains the current settings for the Text Font.

It is not adviceable to change the settings in the default attribute. The prudent way to set a different font is to change the value attribute. For example, if you want to use the font Tahoma, you need to change it as shown below.

<variable name="bodyfont" description="Text Font" type="font"
default="normal normal 100% Georgia, Serif"
value="normal normal 100% Tahoma, Serif">

Color variables work the same way. You should provide a hexa-decimal number as the RGB color value. Changing the text color to blue can be done as follows.

<variable name="textcolor" description="Text Color" type="color"
default="#333" value="#0000ff">

Direct modification of the CSS code
The second method is to directly modify the CSS code in your template skin. For example, let's consider the textcolor variable. The variables defined in the "Variable definitions" section are accessed elsewhere in the skin by prefixing its name with a '$' character as in $textcolor. Do a Find (Ctrl+F) in your browser for the string '$textcolor' to see where it is used. In Minima, one use of that variable is in the body CSS selector.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
...
}

When the blog actually gets loaded in a browser, the Blogger platform will replace this variable with the color specified in the value attribute of the textcolor variable. You can directly specify a color value in this place, bypassing the replacement step. Here you can provide an RGB value or one of the standard 16 color names. For example:

body {
background:$bgcolor;
margin:0;
color:#ff0000;
...
}

body {
background:$bgcolor;
margin:0;
color:red;
...
}

(In addition to the standard 16 color names, most browsers support this extended set of color names)

Remember, however, that using the direct modification method to replace existing variables is of little use, because thereafter, any modification you do through the Fonts and Color pane has no affect on the variables you replace. Use the direct modification method when you want to override one of the template defaults or you want to tweak the look and feel in a manner not provided by the template.

Related Posts

• Template Variables

HOWTO: Submit a Sitemap to Google Webmaster Tools

Update (Jan 2009):
This article explains the earlier interface of Sitemap submission. For the new simplified interface go here.

In a previous article we looked at how you can submit your site to Google Webmaster Tools (GWT). Once you submit your blog and verify your ownership to GWT, the next step is to add a sitemap.

Put in a simple way, a Sitemap is an XML file carrying the details of the posts in your blog. Because it is an XML file, computers (computer programs to be precise) find it easy to read it. Such files are also known as machine readable files. (Note, however, that the Sitemaps we refer to here are different from the human readable HTML pages that certain web sites carry, which guide the human visitors to all the pages on those sites). These Sitemaps are processed by search engine spiders such as the Googlebot, to discover the pages in web sites/blogs. Sitemaps are particularly useful to be used with blogs that have dynamic content. See the About Sitemaps help topic on GWT help center for more information on them.

The purpose of this article is to illustrate how to add a Sitemap of your blog to GWT. You can accomplish this by following the steps given below.

1) Login to GWT and click Sitemap -> Add for the relevant blog. (if you have submitted more than one blog, all of them will appear in your dashboard)

2) Choose General Site Map from the next screen.

3) Under the 3rd option which reads as My Sitemap URL is, type the following line.

feeds/posts/default?max-items=500&start-index=1

http://[your blog name].blogspot.com/feeds/posts/default is the default RSS feed for your blog. Since the RSS feed is an XML file, that can work as a Sitemap. The two parameters we provided in the above line instruct GWT to take 500 posts starting from the first post, as the content of this Sitemap. Later, if you want to add the second 500 posts, all you have to do is to add another Sitemap which looks like:

feeds/posts/default?max-results=500&start-index=501.

It is not a must to submit 500 posts at a time. It can be any number as long as the Sitemap does not exceed the limit of 50,000 URLs or 10MB in size.

4) Click Add General Site Map

You will see a confirmation page once the Sitemap is successfully added. Be a little patient until the Googlebot consumes this and build up the index for your blog. Remember, it can take well over a month for indexing to happen.

The following figure illustrates the 4 steps just described.

HOWTO: Add your blog to Google Webmaster Tools

Google Webmaster Tools (GWT) is a service that helps you to see and control how Google sees your site/blog. It provides lot of statistics such as the index stats (i.e. what pages of your site are currently in Google's index), crawl stats etc. It lists various errors encountered by Googlebot while crawling your site. You can use it to submit sitemaps of your site to Google and also remove certain URLs of your site from the Google's index.

This article will illustrate how to add your blog to GWT and then verify it.

Add Site
Before you add a site you need to sign in to the service with a Google account. Then enter the URL of your blog's homepage and click Add Site.


Verify Site
Once you add your blog, it will appear on your dashboard. Click on that and you will go the Overview page for your blog. As soon as you add it, the blog will be in the unverified state. Therefore you will see a message asking you to verify it. Verification is the process by which you confirm to GWT that you are the owner of this blog.

Click on Verify your site link.


From the Verify a Site page, select Add a meta tag as the verification method.


You will then be presented with a meta tag. Copy the whole tag.


Go to your blog's Layout Editor and open the Edit HTML mode. Paste the meta tag you just copied immediately under the <head> tag. Save the template and go back to GWT.


Click on the Verify button.


Go back to your dashboard and check whether the verification step is complete. (It might take a few minutes to get your status updated).


That's it. You have now added and verified your blog to GWT. Next step would be to submit a Sitemap to Google Webmaster Tools for Googlebot to start crawling your site.

HOWTO: Monitor Visitors to your Blog

You start a new blog and then write up some content on it. Once you think that you've got enough posts for people to hang around, you let your friends, family and colleagues know about your blog. And now you want the whole world to visit your blog! Fair enough.

But how do you know whether these people actually visited your blog? How do you count the number of visitors to your blog? Well, it turns out that there's quite a number of ways of doing that. There are many traffic monitoring services available out there and in this article we will take a look at a few of them.

I have been using 4 such services to track the visitors to my blog. (Note, however, that you don't have to use that many to track visitors. Even a single monitoring service can do the job.) Feedjit, SiteMeter, StatCounter and Google Analytics are those 4 services and all of them are free services.

Feedjit offers two widgets to track visitors; a traffic feed which shows the 10 most recent visits to and exits from your blog and a miniature traffic map. Both widget are updated real time (i.e. as and when visitors arrive). The traffic feed shows the location (country, city) of visitors, the referring URL, the entry page and the exit page for each visitor (all these details are not available for certain visits). This is ideal to know who's visiting from where, but it doesn't readily give a count of your visitors.

SiteMeter and StatCounter both provide counts of visits and page views per visit. In fact, both provide almost identical data though with different presentations. The tracking code from these services, which you install in your blog also displays a count of visitors.

Registering with SiteMeter is simple and installing the tracking code in your blog is pretty easy. It offers a very good set of statistics in a neat, compact format. The presentation of information in SiteMeter is what I like most about it. With respect to each visit, the visitor location, the referring URL, entry and exit pages, duration of the visit, time zone information and a lot of system stats such as the browser used, screen resolution, color depth etc are provided. Many bar and pie charts that summarize the visits are also provided. Absence of the navigation path of each visitor (i.e. what pages were viewed other than the entry and exit pages) is one of the disadvantages of SiteMeter.

StatCounter, on the other hand, provides the navigation path of each visitor which is very useful to see what people actually read once they get in. Other than that, it's almost the same set of data as provided by SiteMeter. My personal preference, however, is SiteMeter for its neat, easily comprehensible presentation of data. (Besides, I don't like the ugly counter by StatCounter displayed on the blog once we install the tracking code)

Last but certainly not least, Google Analytics (GA) is the service which offers the most complex analysis of data. As with many Google services, the user interface (i.e. presentation) is excellent. You have a configurable dashboard and you can drill down on each item on the dashboard. Visitor trends, visitor loyalty and a lot more useful stats are provided. The difficult and time consuming installation (compared to the other 3), non real time data (stats are updated only once a day) and complexity can be stated as the primary disadvantages of GA. The complexity is because of the added focus towards AdWords customers. In my view, GA is useful if you have huge amount of visitors and you want to direct these visitors to targets such as increased sales from your site. Another problem with GA is the difficulty of excluding your visits (i.e. internal visits) to the blog whereas it is just a click of a button with the other 3 services.

One thing you must remember though is that the stats, especially the visitor counts and page views, from these 4 different services are very rarely in agreement. They differ from each other depending on factors such as the time interval that makes two adjacent visits from the same person count as two visits or one visit. For example, if the same person visits your blog more than once within a space of 'x' hours, all of that will count as one visit. But this 'x' differs from service to service.

In conclusion, I can say that I check my SiteMeter stats every so often and use Google Analytics to drill down for more complex stats.

Related Posts

• Feedjit
• Ignoring internal visits from Feedjit
• Excluding internal visits from Google Analytics
  

HOWTO: Exclude your visits from Google Analytics

Introduction

In my view, one of the minuses of Google Analytics (GA) is the difficulty of excluding our own traffic (aka internal traffic) from the reports. As per this help article, there are two methods of achieving this. One is to set up a filter to exclude traffic from a given IP address or a range of addresses. This method is undesirable if you are using a connection that assigns dynamic addresses for each session.

The other method is to filter using a cookie installed in your browser. This method is more reliable and safer than using the first method. But the caveat is installing the cookie as it is not straight forward. And the second method described in the help page is flawed according to this discussion.

The Steps

Here are the tried and tested steps to exclude your traffic from GA.

1) Open your template in the Edit HTML mode and scroll right to the end where your tracking code is installed. Locate the script shown below and add the line shown in red.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();
pageTracker._setVar("exclude_ids_bguide");
</script>

Replace the variable passed to the _setVar() function with something applicable to you. The string you provide here ("exclude_ids_bguide" in this case) is called the filter pattern and it will be used later when we create the filter.

2) Save the template and visit your blog from all the browsers that you want this cookie installed. For example, if you are using Firefox and IE, visit your blog's homepage from both the browsers. If the page is already loaded, make sure that you do a page refresh.

The next step is VERY IMPORTANT!

3) Go back immediately and remove the line added (i.e. the line shown in red) in step (1), from your blog template and save it again. If you leave this line, all visitors to your blog will also get the cookie installed and you will not have any visits. That's the danger here. Make sure that you remove it immediately after step (2)

4) Login to GA and create a Custom Filter for this cookie. Provide the values as shown in the figure below and select the profile (i.e. your blog address) that you want to exclude. Make sure that you copy the exact filter pattern that you gave in step (1) above.


You will have to wait about a day until you confirm that your visits are now excluded.

Reference:
The content of this article is based on this discussion thread on the Analytics Help user group. I thank all the contributors to that thread.