The Blogger Guide

Moving to a Custom Domain

2009-11-08T21:03:00.004+05:30

When you decide for sure that you will switch for a custom domain, the next thing is to plan and implement the move. Given below is a brief checklist for the domain transition process.

Purchase the Domain (if you don’t own already) – If you use the Blogger wizard the purchase (and setup) is quite trivial. But if the top level domain you want is not provided by the wizard, then you will have to purchase it from an external registrar.
Reconfigure External Services – It is most likely that you will have several external services such as visitor meters, feeds etc installed on your blog. Update the respective accounts of those services to reflect the change of blog URL. Some examples for such services are:

AdSense (if you have limited the URLs which can publish ads)
Google Webmaster Tools – re-submit the blog and sitemaps
FeedBurner or such feeds
Technorati, Alexa and other such rating services
Google Analytics, SiteMeter, Cluster Maps and similar visitor meters

Inform your Readers – Even after you switch to a custom domain, Blogger ensures that your previous BlogSpot URL will be redirected to the new domain. Nevertheless, inform your readers about the forthcoming change, say, by writing a post in advance.
Effect the Transition – Go the Settings -> Publishing section on your blog’s admin console and enable the custom domain. If you purchase the custom domain via Blogger, setting up your blog to use it is a no-brainer as Blogger will do the required technical configurations for you. However, if you buy it from a third party, then you will have to manage it yourself.

Last, but certainly not least, is the most important question; what will happen to your existing PageRank (PR) because of this move? You will have a temporary drop in PageRank as your custom domain is new to Google. But the good news is that you will very quickly recover the PR as Blogger will setup a 301 Redirect – Moved Permanently on its servers.

The transfer of PR can happen as quickly as within a couple of weeks as confirmed by a Google employee on the Google Webmaster Help forum.

References:
Custom Domains - The Real Blogger Status

Deciding to Move to a Custom Domain

2009-11-01T20:09:00.003+05:30

If you are starting a fresh blog, then publishing it on a custom domain straight-away is not much of a problem. If you already own a domain or do not want to use the blogspot.com domain, then switching to a custom domain right at the beginning is a safer and simpler method.

If, however, your blog has been running for a while under blogspot.com and has incoming links, some PageRank and also installed third party widgets, then moving to a custom domain needs some planning.

First, let’s have a look at some reasons that will make going for a custom domain worthwhile.

Independent domain – Unlike a yourblogname.blogspot.com URL which is just a sub-domain under BlogSpot, a custom domain gives the chance to publish at an independent domain
Ability to integrate with an existing domain – If you already have a web site, say at www.mydomain.com, then a custom domain gives the chance to integrate your blog to the same domain, say at blog.mydomain.com
Intangible asset – In this information age, a popular domain is a valuable asset. So if you own a custom domain and your blog ramps up in popularity, that is added value for you
Good for branding – If you are using the blog for some business/freelance activity, then a custom domain related to your business brand is better than a blogspot.com URL

Once you decide that you want to go for a custom domain, the next step is to prepare a checklist of things to do for the transition, which is going to be the focus of the next article in this series.

Custom Domains for BlogSpot

2009-10-28T05:34:00.004+05:30

Starting your own blog on Blogger is pretty simple. Just follow three steps and you are ready to go. You post some interesting entries and then you want to share it with your friends and family. That’s when you fire an email saying “hey, check out my new blog at http://yourblogname.blogspot.com”.

Did you ever wonder why is it that your blog URL ends with blogspot.com and not just .com? Did you ever wonder why is it that some of your friends have blog URLs that looks like http://www.yourfriendsname.com? In this post, we’ll see why.

The default URL assigned by Blogger when you create a blog lies in the blogspot.com domain. A domain in Internet jargon here is a set of names. For example, the .com domain is the entire set of Internet names that end with .com and the domain blogspot.com represents a sub set of this bigger set. In technical terms, blogspot.com is called a sub-domain. (Each sub-domain can be further sub divided into smaller sub-domain.) This system of names used on the Internet is called the Domain Name System or the DNS in short. The DNS is a distributed, hierarchical system that governs the way Internet names (or domain names) are assigned and also how computers work with those names.

You cannot arbitrarily pick a domain name and use it because that name must first be registered with an authority that controls the particular domain or sub-domain. The .com is called a Generic Top Level Domain and it is controlled by an organization called the ICANN or the Internet Corporation for Assigned Names and Numbers. Similarly, we can say that blogspot.com is a sub-domain (under .com) for which Blogger has acquired the right to use and maintain. Therefore, while Blogger has no problem in assigning the URL yourblogname.blogspot.com as the default URL, they cannot assign the name yourblogname.com because they have no authority over the .com domain. This is where the custom domains come in to play.

What Blogger refers to as a custom domain is a domain that does NOT end with blogspot.com. If you want your blog to have the URL yourblogname.com, first you must acquire the right to use that domain name. For Blogger blogs this can be done via Blogger itself as described here. Otherwise you can purchase it from a third party domain registrar. Domain registrars are organization accredited by the ICANN to manage Generic Top Level Domains on its behalf. (There is another type of top level domains called County Code Top Level Domains which are managed by the naming authorities in those respective countries)

Once you purchase a custom domain such as yourblogname.com, then you can instruct Blogger to publish your blog using that custom domain. But before you decide to go for a custom domain, make sure that you analyze the pros and cons of custom domains. In follow up articles we’ll take a look at why you should use custom domains and what things you should worry about.

HOWTO: Customize Post Page Labels

2009-10-24T22:14:00.004+05:30

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".

AdSense FAQ

2009-10-03T20:35:00.003+05:30

Here is a list of some common questions I get from readers regarding AdSense ads.

How do you place AdSense ads on Blogger?

Four methods are available to place AdSense ads on Blogger blogs. They are:

The AdSense Gadget - From the Page Elements view, if you select an Add Gadget option in any of the sections, the list of gadgets provide an AdSense gadget. You can easily configure the ad options from the dialog box and place the ad unit in any place where gadgets can be dragged and dropped. (See How to Add More Gadgets to increase the ad placement options)
Ads Between Posts - The Posts gadget has an option to display ads between posts. From the Page Elements window, go to Blog Posts -> Edit and select Show Ads Between Posts.
The Monetize Tab - This is more recent addition which offers a convenient way of adding ads. Go to the Monetize tab on your blog's admin console and select the required display option
HTML/Javascript Widgets - This is the most flexible method of adding ads which gives you more control over how to place them. Simply copy the ad code from your AdSense accout and use an HTML/Javascript widget to place it anywhere you want.

How many adds can I display at a time?

AdSense has a limitation of only 3 ads of one type per page. That means you can have up to 3 ad units and 3 link units per page.

I enabled Ads Between Posts. Now my sidebar ads are gone?

This can happen due to the limit of 3 ads of one type per page. If you have configured your Posts widget to show 4 or more posts on the homepage, then the Ads Between Posts option will consume the maximum of 3 ad units on the home page. If the sidebar loads after the posts column (which is usually the case when the sidebar is on the right), then the ads on the sidebar will not be loaded ad they will exceed the ad limit per page.

My blog shows irrelevant ads. Why?

There can be several reasons for this.

Firstly, if your blog is new, then it takes some time for Google to properly index it and understand the relevant type of ads.

Secondly, if your blog is not focussed on a particular topic, it becomes hard for AdSense to decide which type of ads are relevant.

Thirdly, even if your blogs is focused on a particular niche, that niche may not have enough relevant ads. The focus of this blog itself is an example for such a case.

Fourthly, due to the geo-targeting of ads (i.e. serving ads based on the locality of visitors), you might not see relevants ads on your blog. But visitors from the other parts of the world miget see more relevant ads than what you see.

There can be more reasons. But the above are the most common ones for irrelevant ads.

My earnings are random. Why?

See Fluctuations in AdSense Earnings

How can I optimze my ads?

See AdSense Tips for some useful tipe on making more out of your ads.

3 Columns : 565 : Two Right Sidebars

2009-09-21T19:59:00.004+05:30

Article Series: 3 Column Step by Step Guides

This is a tutorial that gives steps to convert a Blogger default 2 column 565 template in to a three column template with two sidebars on the right hand side of the main post area.

(If you want to know the internals of what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that entire section and paste it below the existing sidebar section (it doesn't have to be below) and rename it to #right-sidebar-wrapper
Change the float: $endSide to float:$startSide of the existing #sidebar-wrapper section

#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

#right-sidebar-wrapper {
background:$sidebarBgColor
url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif")
no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix ... float */
}

2) Add a new div element, as a child of the content-wrapper, to hold the 2nd sidebar

Locate the <div id='sidebar-wrapper'> element.
Copy the code shown in red, below that section (this must be below)

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 1006 pixels

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:1006px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 6 pixels. (add the line shown in red)

#main-wrapper {
width: 460px;
margin-right:6px;
float: $startSide;
...
}

5) Copy the following CSS styles shown in red, below the #sidebar selector

#sidebar {
margin:0;
padding:2px 20px 10px;
}

#right-sidebar {
margin:0;
padding:2px 20px 10px;
}

#right-sidebar a {
color: $sidebarLinkColor;
}

#right-sidebar a:visited {
color: $sidebarVisitedLinkColor;
}

#right-sidebar a:hover {
color: $sidebarVisitedLinkColor;
}

6) Modify the CSS rules for the wire frame layouts editor.

Locate the end of the skin denoted by "]]>"
Add the following code shown in red, above that line.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer-wrapper {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)

Three Column Templates Explained

Google Certified Ad Networks with AdSense

2009-08-26T09:21:00.005+05:30

Google has announced an interesting new feature in AdSense, Google-certified ad networks.

Ad networks are like the ad marketplaces where advertisers and publishers get together. Though the advertisers and publishers don't meet each other physically, the ad network works as the intermediary between these two parties who want to buy and sell advertising space.

Up until now, AdSense served only AdWords ads (except for some display ads from third party vendors). With this change, they are going to allow third party ad networks to serve ads to AdSense publishers. This feature will be initially made available to publishers in North America and Europe, but according to Google, will be rolled out to other regions in due cause.

This means that more advertisers will be competing for ad spaces and the additional competition is certainly good news for publishers.

For more information, see this post on the AdSense blog.

Why the URL colors changed suddenly?

2009-08-07T20:44:00.004+05:30

Copying content from MS Word and pasting directly on to the Blogger post editor can upsets the template styles and on most occasions, it directly affects the URL colors (i.e. the link, visited link colors etc). Over the past six months or so I have observed this question getting raised on the Blogger help forums several times and on all occasions it was caused by the same reason. (see this one for example)

Here's how it happens.

The text editor in MS Word is referred to as a Rich Text editor, meaning that it support various rich formatting such as bold, italics, different fonts and colors and also many styles such as Heading 1, Heading 2, Body Text and so on. It's true that Blogger editor also gives some formatting options, but MS Word offers much much more style and formatting options. In order to support these additional formatting, MS Word keeps a whole lot of meta data in addition to the basic text you type. If you copy some text from a Word document, all the meta data also gets copied in the background and, when you directly paste that on to Blogger, you get that whole gamut of meta data as well. (Paste a single word directly from MS Word, go to the Edit HTML mode of Blogger editor and see the amount of meta information that get's pasted for that single word)

Once you publish such a post, your template styles get messed up due to the styles copied over from MS Word and the final result will be problems such as the one describe above.

If you draft your posts using MS Word, first pasting on to a simple text editor such as Notepad will strip off all the style information and will leave you with only the text you typed. Then copy from Notepad and paste on to Blogger editor. You will now have all what you typed minus all the formatting (such as bold, italics, fonts etc). This obviously has the problem of you having to reapply all the formatting using the Blogger's editor, but that is a safer approach as it will not mess up your template styles.

(Note: Same problem can occur with other Rich Text editors as well)

A Better Read More Option

2009-08-05T11:36:00.009+05:30

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('*');
for (i = 0; i < els.length; i++) {
if ((els[i].className == 'post-body') || (els[i].className == 'post-body entry-content')) {
tbgHideReadMore(els[i])
}
}
}

function tbgHideReadMore(post) {
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
}

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

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

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

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.

Fluctuations in AdSense Earnings

2009-08-02T23:01:00.004+05:30

The AdSense earnings can vary from as few as two to three cents per click to as much as one dollar per click. These fluctuations are quite normal and are usually the result of one or more of the following reasons.

Drop in ad impressions due to reduced traffic or page views
Drop in the click-through-rate (or CTR) - A CTR of 1% to 4% is considered normal but I have seen days where it drops to as low as 0.5%
Lack of relevant contextual ads for the content of the pages - low relevancy would mean that AdSense would serve low paying ads
Reduction in advertising budgets of advertisers
Seasonal variations - for example, festive seasons may attract bigger advertising budgets and therefore there will be higher cost-per-clicks (CPC)

The advertisers seem to bid higher on the beginning and in the middle of a month. But, CPC seem to drop towards the end of the month, probably because advertisers run out of gas.

Further Reading:

Stikcy Posts

2009-07-27T21:39:00.005+05:30

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

2009-07-25T06:27:00.009+05:30

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.

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

2009-07-19T11:42:00.004+05:30

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

2009-07-12T18:55:00.010+05:30

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.

Blogger Template Variables

Screen Resolution and Template Size

2009-07-04T20:45:00.003+05:30

What is the best screen resolution to target a web site template design? This is an important question for those who are interested in designing templates and also who customize templates. That is because the screen resolution is a determining factor when it comes to what your website’s visitors see and don’t see.

Firstly, what is screen resolution? In simple terms, it is the number of pixels (or dots) that make up your entire screen. It is usually expressed as the number of pixels horizontal in to number of pixels vertical. For example, a screen resolution of 1024 x 768 means that a screen can display 1024 pixels across and 768 pixels down. The total number of dots that make up your entire monitor is the multiplication of those two numbers.

It is difficult to pick one right resolution to target your template’s size. Monitors used by Internet users around the world range in resolutions from 640 x 480 (very rare now) to 1600 x 1200 or higher. Further, as technology advances and hardware becomes cheaper, more and more people will move in to high resolution monitors. According to w3schools.com, in January 2009, 96% of its visitors had resolutions of 1024 x 768 or higher. The flip side is that 4% still has 800 x 600 resolutions.

Some time ago, websites were designed targeting an 800 x 600 resolution. But now that the share of that resolution has gone down significantly, the current practice is to optimize a website design for 1024 x 768, a fact even recommended by Jakob Nielsen, the web usability guru, back in 2006.

So what’s the use of this knowledge for the regular blogger? Well, if you want to use a custom third party template or go for a modification of the existing template by adding a new column or increasing its width, check whether the resulting template fits within the 1024 x 768 resolution. You should worry more about the horizontal resolution than the vertical one. Generally, if your custom or modified template has a width of less than 1000 pixels then you can safely assume that a very large percentage of your readers can see the entire width your site without having to scroll horizontally.

565 with a Wider Post Area

2009-06-21T18:24:00.004+05:30

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the 565 template by a desired amount. If you need to upload images/embed videos etc that are wider than the default width of the post column, this modification will give you more room in your posts.

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

Go to Layout -> Edit HTML
Locate the #main-wrapper CSS selector (Do a Find using your browser)
Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 660 by adding 200 to the default width of 460 pixels.

#main-wrapper {
width: 660px;
...
}

3) Increase the width of the outer wrapper to accommodate the expanded main wrapper.

Locate the CSS section called #outer-wrapper
Expand its width property by the same amount of pixels selected in step (1)

#outer-wrapper {
width: 744px;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.

How I got a Page Rank of 4

2009-05-28T22:09:00.003+05:30

Today is an important day for The Blogger Guide (TBG). Its Google Page Rank has gone up to four 4! (It might have been updated a couple of days ago, but I noticed it only today). It took approximately a year and four months to get to this level. Of course, Page Rank will not simply go up as time goes by. One needs to put a significant effort to earn such a rank and, in this post, I will share some tips about how I got there.

Content with Value

In the SEO circles, it is said that content is king. Although good content alone won’t attract much success, it is a vital ingredient. All most all articles on TBG are written after lot of research to ensure accuracy and completeness. Simple copy-and-paste type of articles don’t really add any value to the readers and also don’t give any authority to a blog.

Good content is the key in attracting incoming links, which are vital for a good page rank.

Niche Blogging

This is another advice that bloggers hear very often. It is easier said than done, but staying focus on an adequate size niche increases the value of a blog. I used the word adequate because, if your niche is too narrow, then you can soon run out of ideas to write content.

TBG’s focus, as the name suggests, has been on Blogger. While being more specific about Blogger, I have also touched upon more general topics that all bloggers are interested, such as monetization and blog promotion.

Use of Illustrations

A picture is worth a thousand words. Being a blog about technical stuff, it is very important that what I write is easily understood by the readers. Explaining technical stuffs in simple, non-technical language, amply supported by illustrations is another reason for the success of TBG. I spend quite a lot of time in developing these illustrations either by drawing from scratch or by annotating screenshots. (See the article series on the Blog widget for example)

Offering Genuine Help

Helping Blogger users in forums such as the official Blogger Help Group, Blogger Forum and Blog Catalog etc to solve their problems was another reason. Staying focused on a niche is advantageous here because most niches have online forums of users who are interested on that topic. You must locate the most active forums for your niche and participate in them. An active forum will drive you more visitors and leaving the URLs of your articles there will count towards your page rank as well. But be careful to not to spam the forum with unrelated URLs.

Respond to Readers

I reply to my readers who leave comments or directly email me, mostly within a day. Fast responses are really appreciated by them as evident from the replies I get back. Most of them really don’t expect me to reply that soon. Responding quickly tells the readers that this is a lively blog and that it is not an old unmaintained one.

Posting Regularly

Google doesn’t like blogs that don’t update frequently. Posting new content at least once a week is also required to run a successful blog. There was a period of 3 months in which I could not write a single article, and I noticed a sharp decline in visitors during that time.

Not Relying on Short Cuts

Last but certainly not the least, I relied on working hard based on the tips listed above and did not resort to short cuts such as spamming forums or other blogs, link exchange etc. Today’s search engines don’t just look at the link, but they also evaluate the context in which it appears. If the link appears in a meaningful and relevant context, that will score more in their ranking algorithms. In contrast, they are also smart to identify blogs that employ short cuts such as the ones mentioned above.

That's it for now. I hope you will find them useful.

3 Columns : 565 : Left and Right Sidebars

2009-05-24T21:16:00.004+05:30

Article Series: 3 Column Step by Step Guides

This is a tutorial that gives step by step instructions to convert a default 2 column 565 Blogger template in to a three column template with two sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #left-sidebar-wrapper
Change the float: $endSide to float:$startSide of this newly copied section
Change the occurrences of $startSide in the background property to $endSide. (See the code snippet below)

#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

#left-sidebar-wrapper {
background:$sidebarBgColor
url("http://www2.blogblog.com/no565/corner_sidebar_$endSide.gif")
no-repeat $endSide top;
width:254px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix ... float */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 1006 pixels

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:1006px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a left margin of 12 pixels. (add the line shown in red)

#main-wrapper {
width: 460px;
margin-left:8px;
float: $startSide;
...
}

5) Modify the CSS rules for the wire frame layouts editor.

Locate the end of the skin denoted by "]]>"
Add the following code shown in red, above that line.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer-wrapper {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #left-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)

Three Column Templates Explained

Technorati Authority

2009-05-16T21:37:00.001+05:30

In a previous post, we looked at the Alexa Traffic Rank and its importance. This one will take a peek at another popular blog ranking method called the Technorati Authority.

Technorati is a blog search engine that indexes millions of blogs around the world. Because of its massive index, it can instantly identify which blog is linking to which other blogs in the blogosphere. This data is used by Technorati to calculate a metric which they refer to as authority.

Stated simply, Technorati Authority is the number of blogs linking to a website in the last six months. Higher the blogs that link to a given blog, higher the authority it has. A blog will get more incoming links if it is writing quality, authoritative content that is accepted by others.

Because only the links that are made during the last six months are counted towards authority, one needs to keep producing better content to be able to get new links. But even old articles which are discovered by new visitors to a site may attract new links. Multiple links from the same site are counted only once. But a recent link from such a site will refresh its vote for another six months.

One problem though is that only blogs which are on Technorati, or in other words, which are indexed by Technorati will add to your authority. If a blog which is not listed on Technorati links to your blog, Technorati is not able to count it.

Alexa Traffic Rank

2009-05-08T12:00:00.003+05:30

There are many ranking systems that measure the popularity and the quality of websites and blogs. Google Page Rank, Alexa Traffic Rank, Compete and mozRank are some examples of such systems. There are some other ranks such as the Technorati Authority and BlogCatalog Rank, which are more focused towards blogs. This post will take a look at the Alexa Rank which has established itself as a popular and reliable website ranking system.

The Alexa Traffic Rank is derived from the website traffic data collected from millions of Internet users who have installed the Alexa Toolbar and also from other traffic sources. These data are analyzed over a moving three month period and therefore, the rank on any given date is based on the traffic data during the past three months.

The traffic rank is a combined measure of a website’s reach and page views. The reach is the percentage of all Internet users who visits a given site. If a website has a reach of 1%, it means that out of all users who browsed the Internet, 1% has visited that site. Page views are the total number of pages viewed by the visitors to a given site during the period of statistics calculation (i.e. three months).

The popularity of a site is inversely related to the rank number. A site with a lower rank number ranks better than a one with a higher rank number. In other words, the closer a rank gets to #1, the better that site is. Alexa considers the top 100,000 sites as the special ones out of the zillions of sites on the Internet and getting included in that list is quite an achievement.

The Alexa rank has gained a reputation as an important yard stick in measuring the value/worthiness of a website or a blog. This is especially important when it comes to website advertising. A site with a higher rank can enjoy better ad pricing among the advertisers and ad networks. If you are concerned about monetizing your site, then keeping an eye on, and working towards improving, your Alexa rank is a prudent thing.

Like most measurements, the Alexa rank is not a perfect gauge of the quality/popularity of a site. The sample size used by Alexa (which is several millions according to them), may not be representative of the entire Internet population. The Internet World Stats sites reports that, as of March 31st 2009, the total Internet users have gone beyond 1.5 billion! A sample of even 1% of such a massive population amounts to more than 15 million users. But, in the absence of perfect data, Alexa rank works as a formidable measure.

The rank of The Blogger Guide as of today is 430,987 and is nothing much to write home about. However, the three month change (i.e. the difference between the rank three months ago and that of today) shows a gain of over hundred thousand, which is a positive sign. This gain is in accordance with the growth in traffic seen over the same period.

For more information, see this FAQ page on the Alexa website and this good article on doshdosh.com.

Monetization - A Reality Check

2009-05-04T21:02:00.003+05:30

Blogging for Money is not as easy as the hype that goes around. It is certainly not a matter of simply starting a blog, putting some ads on it and waiting for the monthly checks to arrive at your post box.

This recent post on the Alexa Blog presents an estimated calculation on possible earnings from blog monetization, serving as a reality check on money blogging. It is estimated that, despite the economic setbacks, the online ad spending in US alone will expand to an impressive $24.5 billion in 2009. The figure worldwide will be much more and a portion of that money can be grabbed by all the bloggers out there. The problem, however, is that it needs lot of hard work from the part of the bloggers, to be of any success. The above mentioned calculation is somewhat narrowly scoped in that it only considers CPM (Cost per Thousand Impressions) ads, but the overall message it conveys is still true.

So remember, if you want to monetize your blog, don't expect anything soon. Be prepared to invest lot of time and effort to build up your visitors by offering quality content and being responsive to their questions etc. It may require a year or two for you to be successful. (The time period will, of course, vary depending on your blogging niche and the amount of effort put)

Header Image in Widened Blogs

2009-04-26T12:27:00.004+05:30

This is a question I get from time to time from the people who have widened their blog by following one of the three column conversion or wider post column guides. This post is an answer to that question.

The header image is uploaded via the Header element in the Layouts -> Page Elements section.

The available size for this image depends on the size of you header. For example, in the Minima template, it is the width of the #header-wrapper CSS selector. If the image you upload is smaller than this maximum available size, Blogger will upload it as it is. But if the image you upload has a higher width than the available size, Blogger's action will depend on whether you've selected the Shrink to fit option in the Configure Header dialog box. If that option is selected, the width of the image you upload will be resized to the maximum possible size. (The height of the image will also be adjusted to the same scale to avoid distortion. But the reference dimension is the width). If Shrink to fit is not selected, the image will be uploaded as it is despite it being bigger.

When you customize your blog either by adding a third column or by expanding the size of the post area, the header size will also be widened to match the new blog width. Therefore, you will have to re-upload the header image. If the current header image is smaller than the new blog width after the expansion, then you have to widen the header image as well. For that you need to use some image processing software such as Photoshop. If, however, the image you uploaded had an actual width that is bigger than the new expanded header size, a simple re-uploading will do.

3 Column Templates : Rounders 3 : Two Right Sidebars

2009-04-10T09:09:00.005+05:30

Article Series: 3 Column Templates Step by Step Guides

The Rounder 3 template of Blogger comes by default with only two columns. However, most bloggers want to have three column templates as they give more options in arranging the many gadgets on a blog. If you are one of them, this tutorial will give you the steps on how to modify a default 2 column Rounders 3 template in to three columns with the two sidebars on to the right hand side of the main column.

(For the more interested readers, the article series Three Column Templates Explained will explain the under the hood details of what's happening here.)

This guide is specific for Rounder 3. For other Rounders templates, check the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. This is due to the required background images provided in this tutorial are being set to that size. If you need custom size templates, please contact me.

1) Add a new CSS id selector for the new second sidebar.

Switch to Layout -> Edit HTML
Find the #sidebar-wrap selector
Copy that full section and paste below the existing sidebar section and rename it to #right-sidebar-wrap
Change the float property of the existing #sidebar-wrap selector to $startSide (See the code snippet below)

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for ... float */
}

#right-sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Add a new div element, which will be the placeholder for the second sidebar

Locate the <div id='sidebar-wrap'> element
Copy the code shown in red, below that section

3) Adjust the parent wrappers to accommodate the newly added sidebar

Find the CSS section called #outer-wrapper
Modify its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) Change the required margins, padding etc

Locate the #sidebar-wrap section
Change the left margin to 7 pixels

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 ;
...
}

5) Add the required CSS selectors for the second sidebar.

Locate the #sidebar h2 selector
Copy the code shown in red below, after that selector.

#sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

#right-sidebartop h2 {
line-height:1.5em;
color:#ffffff;
border-bottom: 1px dotted #ffffff;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom: 0.5em;
}

#right-sidebartop a {
color: #ffffff;
}

#right-sidebartop a:hover {
color: #ffffff;
}

#right-sidebartop a:visited {
color: #ffffff;
}

#right-sidebar a {
color: #99ddbb;
}

#right-sidebar a:hover,
#right-sidebar a:visited {
color: #ffffff;
}

#right-sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}

6) Replace the existing background images with the expanded ones as shown below.
All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images with the ones shown in red below.

#header-wrapper {
background: url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

7) Modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

/** Page structure tweaks for layout editor wireframe */

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:830px;
}

body#layout #main-wrap1 {
width: 485px;
margin-right:10px;
}

body#layout #sidebar-wrap,
body#layout #right-sidebar-wrap {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar might not be visible until you add some gadgets to it)

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://bguide.blogspot.com/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://bguide.blogspot.com">The Blogger Guide</a>

</body>
</html>

Post Date Header

2009-04-05T22:56:00.004+05:30

The Date Header is that part of a Blogger blog which displays the date in which a post was created. This is sometimes referred to as the date stamp as well. We can easily control whether the Date Header should be displayed or not, and if displayed, in what format should it be displayed.

First let’s see how the appearance of the Date Header can be controlled. In Layout -> Page Elements view, if you open the Blog Posts widget in Edit mode, you get the Configure Blog Posts dialog. In that, the first check box under Selected Items is the button to ON/OFF the display of the Date Header. This is illustrated by the first red arrow in the figure below.

The format of the date stamp can be controlled from the drop down next to the check box mentioned above. However, it can also be set from the Settings -> Formatting section as shown below.

The Date Header is displayed only once for a given date. i.e., if you do more than one post per day, all of them will get only one date stamp when they are displayed on the blog’s main page. (Each of them, however, will have a date header on their individual post pages.) This is because the layout data tag (data tags are bits and pieces of information held in the Blogger database with respect to each blog) for the Date Header is set only once for all the posts in a given day.

This data tag is the post.dateHeader tag and this Blogger Help page says that it is “only present if this is the first post in the list that was posted on this day”.

CSS Basics – Part 4

2009-03-28T09:34:00.004+05:30

This will be the final part of a series of articles which introduced the basics of Cascading Style Sheets (CSS). In this one, we will take a look at what makes up a style sheet. One might think that this is something that we should have looked at the very beginning of an article series for CSS basics. However, I took a different approach here in first explaining the why before looking at what.

First a quick reminder; part 1 was about how CSS got its name, part 2 covered its use in separating content from presentation and part 3 was about how the separated presentation (i.e. style) is hooked up with content with the use of selectors.

A style sheet is nothing more than a collection of rules. Each rule has a name (or selector to be precise) and a declaration block. A declaration block is a collection of declarations enclosed within a pair of braces (i.e. “{}” ), where each declaration consists of a property name, followed by a colon, followed by one or more comma separated values. Each declaration in a rule should be separated with a semicolon.

If the above sounds complicated, take a look at the following figure, which illustrates the anatomy of a CSS rule. What is shown on top there is an exploded view of a rule marked with Label (1). This exploded view highlights the important elements of a rule described above; i.e. the selector, the block delimited by opening and closing braces, the declarations and their constituent parts property name, colon, values and the semicolon.

You normally see rules as shown by Label (1). However, the whitespaces (i.e. tabs, spaces and line breaks) have no significance to the computer program (usually a browser) that processes these rules. Therefore, rules shown by Labels (2) and( 3) also have the same effect as the rule tagged as Label (1).

This format is technically referred to as the syntax of a CSS rule. Think of it as the grammar of a natural language, say English. To write proper English you must use its grammar correctly. Likewise, proper adherence to CSS syntax is a must. When you define a CSS rule, you have be very careful to put the braces, the colon and the semicolon in the required places. If you miss any or add more than what is required, your style sheet can go haywire and as a result you web page or blog can end up in a mess.

All right, this brings us to the end of this four part series covering the basics of Cascading Style Sheets in simple, non-technical English [as much as possible :)]. Hope you found it useful. For the more interested readers, I recommend the CSS Tutorial at W3Schools and the more comprehensive CSS Guide by Westciv.