The Blogger Guide

Using CSS Web Design

2011-07-25T20:31:00.001+05:30

Finding the right website hosting company is a crucial step in designing your own website online. With a professional hosting company such as Network Solutions supporting you, you can have access to a number of invaluable features that can make your website easier to manage, more simple to navigate, and just generally more professional. Of course, professionalism may not be your goal if you are simply experimenting or if your website is only meant for a certain select audience; but, if you are working on putting a business online, or if you are hoping to generate a large amount of web traffic, you will benefit greatly from a smoothly running and easy to manage website. One feature offered by some website hosting platforms that can contribute to giving you this type of smoothly functional website is CSS, or Cascading Style Sheets.

Cascading Style Sheets, for all intents and purposes, can best be defined as a web design language that helps to save you time and effort in the management of your website. There are multiple alternatives for web design out there, but CSS is becoming the preferred method of many website owners, and is particularly useful for those who wish to simplify the design process. One of the most useful benefits you can receive from using CSS language is the ability to change every page of your website simply by changing one CSS style sheet; think of this as a sort of template. If you want to alter the format of your site, on every one of its pages, you simply make the appropriate change on the template, and it automatically applies to all of your website’s pages, saving you valuable time and effort. There are numerous other benefits as well, all of which you can find on the Network Solutions website.

While many people enjoy the use of CSS when setting up business websites, it can also be useful for simpler websites such as personal blogs. Generally, CSS is said to improve your success at drawing traffic from search engines and also improve the visual quality of your website, in addition to the aforementioned perks of saving you time and money. Therefore, you can have an efficiently run, easy to find, and aesthetically enjoyable web page whether you are attempting to run a business, or whether you are simply looking to enhance your blog and attract new readers. The range of benefits made possible by CSS design language make it well worth looking into during your web design process.

(This post was brought to you by Network Solutions)

CSS Basics - Part 1

HOWTO: Link to All Posts of a Given Day

2010-07-15T21:32:00.000+05:30

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.

Blogger Stats

2010-07-06T21:26:00.000+05:30

Blogger has announced a feature which was long overdue, visitor stats. This will bring in an integrated Stats tab to the Blogger admin console that provides an analytics-type visitor statistics service. This will eliminate the need to install third party visitor meters such as Analytics, SiteMeter etc. in your blog.

The feature is currently in beta. Login to draft.blogger.com to experience it.

Template Designer is Live

2010-06-17T06:08:00.002+05:30

The Template Designer which I blogged about a couple of months ago when it was in beta, has gone live!

This brings in a powerful WYSIWYG editor to tweak your templates in many beautiful ways. The features include the ability to pick from professionally designed templates, option to select professional images as background images, ability to select many different layouts such as two-column, three-column etc in a snap and much more. The Template Designer is truly a wonder tool for the non-technical bloggers who were afraid of meddling around with the HTML, CSS etc to customize their templates.

With the introduction of this new remarkable feature, Blogger has revised the buttons on the admin console as well. The former Layout button has gone out and a new button called Design has taken its place. The sub-menu for this section has also been revised with the old Fonts and Colors and Pick New Template buttons being replaced with a single Template Designer button. (see figure below)

The Edit HTML option still remains allowing the more technically inclined bloggers to dig deep. However, the template structure seems to have gone through drastic changes in order to support the new Template Designer. Don't worry, Blogger will take care of migrating your existing template to this new format if and when you modify your template using this option. One thing to note, however, is that you will lose any existing customizations on top of the current default templates.

See the official Blogger Buzz announcement for more details.

A Review of the Domain Transition

2010-04-12T22:30:00.006+05:30

Towards the latter part of last year, I wrote few articles discussing about Blogger custom domains, some factors one need to consider when moving to a custom domain and also a checklist of things to do when moving to a custom domain.

These articles were the result of some learning I went through myself to evaluate the pros and cons of moving to a custom domain. In fact, I was convinced of the value of an independent domain, but was afraid of loosing traffic and most importantly the Google PageRank (PR) earned by the blogspot domain! As stated in the Moving to a Custom Domain article, a Google employee had confirmed that the PR values will be transferred within a couple of weeks, so after all, it was not very difficult to make the decision to go ahead with the domain transition, which was fully affected in January this year.

The transition was not really difficult. I had no issues with my AdSense account as it is not setup to limit the ad publishing URLs. My subscriber feed (via FeedBurner) also worked without a problem as it was named after the logical name of this blog (i.e. The Blogger Guide) and not the blogspot URL. The two visitor meters, namely Google Analytics and SiteMeter also did not require any changes as they are linked up using unique IDs, which do not depend on the domain name.

I did not see any drop in visitor counts after the transition. However, it took a considerable amount of time to recover my Alexa rank and also for the green PageRank bar to appear in places such as the Google Toolbar.

At the time of transition, my Alexa rank was somewhere around 230,000. Immediately after the transition, I had to resubmit the new domain as there is no way in Alexa to transfer the ranks from one domain to another. However, the rank for the new domain (www.bloggerguide.lk) quickly improved from several millions to something below 400,000 in a couple of weeks. And now, after about three months, it has reached the level it was at the time of the change.

The Google PageRank (of 4/10) which I had at the time of transition re-appeared on the toolbar only this week, a good three months later. I think the reason for the delay is this. There are two types of page ranks; one is a static value displayed in place such as the Google Toolbar, which Google updates from time to time. The other is a very dynamic value, which is calculated continuously and used to rank search results internally. So I think what gets restored in a couple of weeks of a domain transition are these internal PR values and not the externally displayed ones. It seems that even for transferred domains, the published PR values will only get restored in the periodic updates.

Finally, I can say that the decision to move to a custom domain did work! After a lapse of about 3 months, the blog has restored its rankings in addition to the pluses of the new independent domain.

The Template Designer

2010-04-04T23:11:00.004+05:30

Blogger has developed another very exciting feature called the Template Designer. With it, you can create custom template designs using an extremely user-friendly interface without having to worry about meddling with HTML code! Yes, that's right, you don't have to go through the Layout -> Edit HTML interface to get another sidebar to your template, or to add a nice background image to your blog or to do many more template tweaks.

This feature is still not released formerly and is now in testing stage in Blogger in Draft. If you log in to draft.blogger.com, and go to the Layout section of your blog, you will see a new sub section called the Template Designer. (see figure below)

From that interface, you get to choose from a set of expert designed templates, manipulate the column layouts with a snap, apply many different background images and also customize the fonts and colors. You get a real-time preview as well, making it easier to experiment.

Go on and try it at Blogger in Draft and I'm sure you will love it!

Note:
Even if you have applied any customizations such as three-columns or wider-blogs from The Blogger Guide tutorials, the Template Designer will still work. It will recognize that the template is customized, but still its changes will work.

Over 100,000 Visits!

2010-03-11T08:38:00.003+05:30

The Blogger Guide passed another milestone today; the unique visits count crossed the one hundred thousand mark!

It's just over two years since the inception, and given the relatively little amount of time I put in, this is a great achievement for me. It's been a slow but steady growth.

Thanks for all the help in spreading the word about The Blogger Guide.

Blogazines

2010-02-20T21:00:00.004+05:30

The blogosphere is evolving! This post is about one such evolution which I happened to stumble upon today.

Most of today's blogs are of a traditional columnar layout with one main (or post) column and one or more sidebars. This layout is what you get in pretty much every post. However, the print industry, especially the magazines, have been making good use of the basic design principles such as balance, color and fonts, to add variety to individual articles.

Some very creative bloggers out there have drawn upon this idea of varied article layouts, on to the blog posts and the result is termed blogazines. Read more about this at http://www.smashingmagazine.com/the-death-of-the-blog-post/ and also some tips for creative blog post design at http://line25.com/articles/tips-for-designing-unique-and-attractive-blog-posts.

This is definitely not for the average blogger as it requires lot of design skills and also effort to finish each article layout from scratch. However, I found the idea very interesting and thought you would like it too.

Pages coming to Blogger!

2010-01-31T21:15:00.004+05:30

Update: 2010 Feb 20
The pages feature has graduated from Blogger in Draft and now is a regular service.

It is just a little over a month ago that I wrote that we cannot have pages in Blogger. However, the test bed of Blogger, Blogger in Draft, has recently announced a pages feature in Blogger.

This, no doubt, will be an exciting news for most of the Blogger users out there. With pages one can easily create static pages such as About Us or Contact Us to hold information that don't change as often, but which needs to be easily accessed by visitors to a blog. This feature will be accompanied by a widget which helps to manage pages and display them easily either as a tabbed navigation bar or sidebar links.

It is still in beta stage and hopefully will be available in the primary Blogger service soon. You can try out the feature by logging in to draft.blogger.com.

Domain Transition Complete

2010-01-06T22:02:00.004+05:30

This is to inform you that I have completed the domain name transition from bguide.blogspot.com to www.bloggerguide.lk.

The FeedBurner feeds should work without a problem, as I have not changed the feed address.

Thank you,
ids.

Announcement : Custom Domain Transition

2009-12-25T17:59:00.003+05:30

The purpose of this post is to let all the subscribed readers know that The Blogger Guide will switch to a custom domain starting next week. The new URL is www.bloggerguide.lk and I hope to complete the transition during the course of the next week.

Hopefully the transition will be smooth, but there can be some unexpected hiccups, especially with my feeds. Once all the configurations are complete, I will do another post on the week starting Jan 4th, 2010. If you come across any problems in receiving feeds after the transition, please drop me a mail on bloggerguide@gmail.com.

Thank you and sorry for any inconvenience that you might come across.

Add Pages in Blogger

2009-12-20T17:37:00.003+05:30

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

Grow Traffic with Page Title Tweak

2009-12-06T22:28:00.004+05:30

This post is about a pretty simple modification to your template to tweak the appearance of the page titles of your blog, which will result in a traffic growth of 10% (or perhaps more). The steps for this customization was referred to me by Mark, who is a frequent visitor to my blog.

The default Page Title in Blogger blogs appear in the order of [Blog Title] : [Post Title]. What this modification does is simply to reverse this order such that it becomes [Post Title] : [Blog Title]. With the Post Title in front, your blog's posts get a higher relevance score to keyword searches than when it is at the back.

I applied this tip at the beginning of last October and I can confirm that I saw an overall traffic increase of approximately 10% in the past two months (see figure below from my actual SiteMeter stats). My posting frequency remained almost the same, and I didn't to any other optimization during this period. So I can safely attribute this traffic growth to this neat tip introduced by Mark.

I recommend this modification for your Blogger blogs as well. For the details of the conversion please go here.

Minima : Hanging Sidebar on the Left

2009-11-28T21:50:00.009+05:30

This article presents an interesting modification to give you a non-conventional three column layout. The idea is to add a second sidebar to a default Minima template offered by Blogger, to make it appear as hanging by the side of the blog. The figure below has a preview of the finished modification and visit the Hanging Sidebar Demo blog for an online demo.

The following steps are tested on a default 2 column Minima template but this conversion should also work on Minima Black, Minima Blue and Minima Ochre templates.

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 (See the code snippet below)

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... float */
}

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for long ... 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) Add a new CSS section for an outer header wrapper which will encompass the existing header wrapper

Add the following code below the existing #header-wrapper section

#outer-header-wrapper {
width:880px;
margin:0 auto 10px;
}

4) Add a div section as the placeholder for this outer header wrapper

Locate the section <div id='header-wrapper'>
Copy the code shown in red, above and below that section

5) Adjust the other wrappers to accommodate the new sidebar

Locate the CSS sections called #outer-wrapper, #header-wrapper and #footer
Do the modifications/additions highlighted in red

#outer-wrapper {
width: 880px;
margin: 0 auto;
...
}

#header-wrapper {
width: 664px;
float:$endSide;
margin: 0 auto 10px;
...
}

#footer {
width: 664px;
clear: both;
margin: 0 auto;
...
}

6) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a left margin of 12 pixels.

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

7) Adjust the max width of the header description to center it in the new adjusted header

Locate the #header .description section
Change the max-width property to 644 pixels.

#header .description {
...
padding:0 20px 15px;
max-width:644px;
...
}

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

Locate the end of the skin denoted by "]]>"
Add the following code 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 {
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 move some widgets on to the left sidebar. Then view your blog to see the hanging sidebar in full swing!

(Note: This modification was applied to a default Minima template and was tested on Firefox 3, IE 8 and Chrome 3)

Moving to a Custom Domain

2009-11-08T21:03:00.005+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. (Update: See this review of an actual domain change to learn more about PR recovery)

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.006+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://www.bloggerguide.lk/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">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.

CSS Basics – Part 3

2009-03-21T23:19:00.006+05:30

In the two previous parts of this series, we looked at why CSS is called by that name and the importance of CSS to web designing. In this part, we will cover selectors, which is absolutely crucial in understanding how CSS works.

Linking Presentation and Content
In part 2, we learned that CSS helps us to separate the content of a web page from the presentation of that content. This separation is a very much desired technical feature that enables web designers to vary the presentation (or style) of a web page without much of a hassle.
Though this separation is technically better, it becomes useless if we don’t have a way of attaching a given presentation aspect (i.e. a CSS rule) to some given content (i.e. an HTML element). This is where the selectors come in handy. Selectors are the means by which we link the separated content and presentation.

What is a Selector?
A selector identifies an HTML element in a web page. In other words, a selector selects an HTML element and applies the style rules defined in it, to that selected element.

If you open your Blogger template in Edit HTML mode and scroll to the template skin area, you find many CSS selectors applicable for that template. a, .sidebar, #main-wrapper are some examples for selectors found in most of Blogger’s templates.

Types of Selectors
There are many types of selectors in CSS. Out of them, the following three are very important.

Type (Element) Selectors
Class Selectors
ID Selectors

Type or Element Selectors identify basic HTML elements. p (paragraph), a (anchor), body, table are all examples for basic HTML elements. An Element Selector is defined simply by using the element's name as the name of the CSS rule. For example, the following CSS rule selects the entire body element of an HTML page and changes its background color to black.

body {
background-color:black;
}

A Class Selector is applied to one or more HTML elements which have their class attribute set equal to the name of the Class Selector. A Class Selector is defined using any name with a dot ( . ) in front. There should not be a space between the dot and the name of the CSS selector.

A Class Selector called “myclass” is shown below.

.myclass {
color: red;
font-size:10pt;
}

To apply the above CSS rule, we have to add the required HTML element to that class using the class attribute.

<p class=”myclass”>
This paragraphs text will be in red color size 10 fonts.
</p>

An ID Selector is applied to one and only one HTML element in a web page that has an ID equal to the name of that selector. The name of an ID selector is preceded by a hash ( # ) character.

#outer-wrapper is an example for an ID Selector with the name outer-wrapper and the following div element has its ID set to outer-wrapper so that the #outer-wrapper CSS rule gets applied.

Note that when Class and ID selectors are applied to HTML elements, the values given for the class and id attributes include only the name of the selector. The dot or the hash characters are not used for the attribute value.

The Class and ID selectors are functionally similar. They differ due to the fact that a Class Selector can be applied to a group of HTML elements whereas an ID Selector is limited to a single element.

There is a lot more about CSS selectors. Pseudo selectors, descendant selectors, child selectors and specific class and ID selectors are other important concepts. However, as this article series is about CSS basics, I will limit the discussion to the above three.

CSS Basics – Part 2

2009-03-15T09:15:00.007+05:30

In the first part of this article series, we looked at how CSS got its name. Cascading Style Sheets are a set of style rules that describe the look and feel (i.e. presentation) of a web page and these rules can be defined at four different levels, which get cascaded to a single virtual rule set when a web page is viewed in a browser. Now that we know why CSS is called that way, let’s try to understand the value of style sheets.

Content vs Presentation
CSS is used to define how a web page should look like. As we already know, this aspect is technically called the presentation of a document. The other main aspect of a document is its content. Content is the actual body of information carried by a document. The aspects of content and presentation are not limited to web pages; they are common to any document.

Let’s spend a little bit more time trying to understand the difference between content and presentation. Say you are typing a document in MS Word. You will start off with a title and perhaps a sub title. And then you keep on entering your ideas and soon you’ve filled a couple of pages. Now you see some structure emerging in your ideas and therefore you put in some headings and sub headings. Then you apply various styles such as Heading 1 and Heading 2. You make certain text bold, use different fonts, colors and so on.

Once you are done you have a document with some content formatted nicely as well. If you now do a Select All (Ctrl + A), open Notepad and paste what you copied, you will be left out with the content of your document. In other words, Notepad will strip off all the presentation aspects from your document. So what you have in the Notepad is the content and the Word document has the same content with some presentation aspects applied.

This example should help you to understand the difference between these two aspects. (However, in a strict technical sense, the fact that a certain piece of text is Heading 1 and another portion is Heading 2 is also part of the content. What belongs to the presentation is how Heading 1 and Heading 2 look. i.e. the fonts used, its size and color etc. When we copy to Notepad we lose this structural information as well)

Why CSS?
Mixing the content and the presentation of a document is considered a bad practice in a technical sense. HTML had this technical problem. Though HTML was originally designed to describe content that can be linked to form a web of documents, due to the immense popularity it received, it developed certain markup to define presentation aspects as well. The font and b (bold) elements are examples.

With CSS we can correct this problem. In other words, CSS helps us to separate the content from presentation. That way, we can use HTML to define the pure content of a web page and then style it (or define its presentation) using CSS. Now this is the reason why CSS is so critical in today’s web site development.

To understand how this works, let’s consider an example. Consider a first level heading in a web page defined using an h1 element.

We will write a simple HTML document with a plain h1 element and two more h1 elements with the same content, but styled using two different CSS rules named H1A and H1B. The HTML part of that page will be as follows.

<body>
<h1>This is a Level 1 heading</h1>

<h1 class="H1A">This is a Level 1 heading</h1>

<h1 class="H1B">This is a Level 1 heading</h1>
</body>

The two styles H1A and H1B are defined as follows. As you can see, these two styles define different fonts, sizes and colors which can be applied to the h1 element.

.H1A {
font-family:Verdana;
font-size:14pt;
color:red;
}

.H1B {
font-family:Monotype Corsiva;
font-size:36pt;
color:blue;
}

The result is shown below. The same content is made to look different just by applying two different styles. This is the power of CSS! (The full example is available here)

We applied the styles H1A and H1B to the h1 element using an attribute called class. This is where the CSS selectors come in to play and it will be the focus of the next episode of this series.

CSS Basics – Part 1

2009-03-08T18:18:00.007+05:30

Cascading Style Sheets, or CSS as it is commonly known, is a vital ingredient of today’s web site designs. This is the first in a series of articles attempting to cover the very basics of CSS, in a manner as simple as possible so that the non technical bloggers can get an idea of what it is all about.

Why are they called Style Sheets?
First of all, let’s try to find out the meaning behind the phrase style sheet. In the context of web site design, style refers to the look and feel or appearance of a given site or web page. In this regard, style means things such as the fonts used, their sizes and colors, the various background colors and images etc. Not only fonts and colors, even aspects such as border formats and thickness etc can also be defined using CSS. For example, the double-bordered box in the header section of a Minima template is applied using style sheets.

The formal technical term used to refer to the look and feel of a web page is presentation. In other words, the style aspects are more formally refers to as the presentation aspects.

The name style sheet, therefore, comes from the fact that a style sheet is a collection of some rules or instructions given to a web browser on how to present a web page to a reader of that page. If we think of the browser program as an artist, the style sheet is like the color palette and the brush set of that artist.

Why Cascading?
The CSS rules can be defined at various levels. In fact there are four levels at which CSS rules are defined. The first and the least priority level is the browser’s default set of values. Then comes the external style sheets followed by internal (or embedded) style sheet in the third place. Fourth and the highest priority level is called the inline style definition. (Here we will not try to go in to the details of these levels)

For every web page, all of these 4 levels may not be present. But, every time a web page is loaded in a browser window, the available levels of styles sheets cascade to a single virtual style sheet with the high priority rules taking precedence over the low priority ones. For example, if the same rule is defined at inline and external levels, the inline rule prevails over the other.

In other words, the four levels of style sheets get combined in to a single logical style sheet before they are applied. Hence the term cascade.

All right. Now you know why the Cascading Style Sheets are called by that name. In the next article, we will try to understand the value of style sheets and why they are used in designing web sites.

Centering the Dots Header

2009-03-06T05:53:00.003+05:30

In a previous post, we looked at how we can make the header widget of the Dots (and Dark Dots) template go across the blog. If you have a somewhat longer blog title, that tweak will allow you to have it across the blog rather than having it stuck inside the left sidebar.

In this post, we look at another simple tip that will center align the title and the description of such a widened header widget. All you have do is to add a single CSS rule to the #header-inner selector.

This change is illustrated in the code snippet below.

#header-inner {
text-align: center;
background-position: center;
margin-left: auto;
margin-right: auto;
}

Yes, that's all. Just add the line shown in red above and you will have the title and the sub title centered in the header.

3 Column Templates : Rounders 3 : Left and Right Sidebars

2009-02-26T21:15:00.006+05:30

Article Series: 3 Column Templates Step by Step Guides

The Rounder 3 template that comes by default with Blogger has only two columns. However, in the blogosphere, there is tremendous demand for three column templates. If you are one of such bloggers, this tutorial will give you the steps to modify a default 2 column Rounders 3 template in to three columns with left and right sidebars.

(For the more curious readers, the article series Three Column Templates Explained covers the behind the scene details.)

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 specific conversions, please contact me.

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

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

#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 ... float */
}

#left-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 long non-text ... float */
}

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

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

3) Expand the width of 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) Adjustment the required margins, padding etc

Locate the #left-sidebar-wrap section
Insert a right margin of 7 pixels. Don't remove the existing 15px. This padding is in addition to that.

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

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

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

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

#left-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;
}

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

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

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

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

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

#left-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 one 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.

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.

Wider Header for Dots Template

2009-02-24T19:16:00.003+05:30

The Dots (or the Dots Dark) template, which is a default Blogger template, has its Header widget inside the left sidebar. Since the Header widget carries the title and the sub title (or description) of a Blogger blog, this arrangement brings about a somewhat congested appearance. This tutorial will illustrate how this Header widget can be moved to the more usual, across-the-top placement.

First let’s take a look at the Before and After views of what we are going to do.

Before:

After:

As you can see, the After view has the blog title running across the blog, instead of being stuck at the left sidebar.

(Note: Please backup your template before trying out this modification)

Go to the Layout -> Edit HTML mode and first make sure that the ‘Expand Widget Templates’ option is NOT selected. Then apply the following steps.

1) Delete the background property in the #outer-wrapper CSS selector.

#outer-wrapper {
~~background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;~~
…
}

2) Delete the existing line “display:none;” in the #header-wrapper and add the following rules.

#header-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat bottom right;
width:700px;
height:90px;
margin:0 auto 10px;
}

For the Dark Dots template, change the URL as follows.

background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat bottom right;

3) Change the first padding value in the #main-wrapper to 10 px from 100 px

#main-wrapper {
width:450px;
float:$endSide;
padding:10px 0 20px;
…
}

4) Change the first padding value of #sidebar to 10 px from 40 px

#sidebar {
...
padding:10px 10px 15px;
…
}

5) Delete the existing <b:section> element for the header contained inside the sidebar-wrapper.

6) Copy the code shown below in red, in between the outer-wrapper and the crosscol-wrapper, to get the new header. (You will have to re-type your blog title after copying this code)

Save your template and now you should have your header going across the top of your blog.

Centering the Dots Header

3 Column Templates : Rounders 4 : Left and Right Sidebars

2009-02-20T05:16:00.009+05:30

Article Series: 3 Column Templates Step by Step Guides

This tutorial will provide the steps to modify a Blogger default 2 column Rounders 4 template in to a three column template. This modification will add a new sidebar to the left side of the main post column.

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

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

1) First we need to add a new CSS id selector for the new sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrap selector (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #left-sidebar-wrap
Change the float: $endSide to float:$startSide of the #left-sidebar-wrap selector (See the code snippet below)

2) Now we introduce a new div element, which will be the placeholder for the second sidebar

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

3) Next step is to increase the width of the parent wrappers so that the new sidebar fits in them

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

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

4) We also need to do some adjustments to margins, padding etc

Locate the #left-sidebar-wrap section
Insert a right margin of 7 pixels. Don't remove the existing 15px. This padding is in addition to that.

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

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

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

6) Then we have to apply the expanded background images as necessary.

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/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

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

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

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

7) Finally, 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.

Blogger Three Column Templates Explained

Happy Birthday Blogger Guide!

2009-02-13T07:11:00.003+05:30

Today marks the first birthday of The Blogger Guide! It’s been one full year since the very first article, titled Understanding Blogger Templates, was posted here. What a year it has been!

This post is the 80th on TBG and, looking back, it has been quite an effort to write that much in the space of a single year. I’ve written extensively about the under the hood details of Blogger templates , many popular tutorials on how to convert default Blogger templates in to three columns and how to make them wider and also a lot of tips on template customizations. Since of late, TBG touched on the topic of blog monetization as well.

Over the past year, TBG had nearly 27,000 thousand visitors and over 55,000 page views. The subscriber base, through both Feed Burner and Blogger Followers, has gone over fifty. During this time, I’ve helped thousands of Blogger users at many forums such as the Blogger Help Group and also have solved problems of numerous readers who reached me via email. And what’s more, in a single year, TBG has achieved a Google Page Rank of 3!

Thank you all the readers out there for all the suggestions, comments and feedback given to bring TBG to this level. TBG will continue to provide the articles, tutorials, howtos etc that you’ve valued so much, whilst keeping with its moto of empowering Blogger users with simple and clear guides with illustrations.

AdSense Tips

2009-02-08T21:28:00.002+05:30

Google AdSense is the dominant provider of contextual advertising services. If you are also using AdSense as a means of monetizing your blog, this article will provide you a set of tips for maximizing your revenue.

Eye Catching Positions
A typical visitor to a web page scans its content in what’s called an F-shaped pattern. According to an eye-tracking study conducted by the Nielsen Norman Group, the dominant scanning pattern of readers consists of a starting horizontal scan at the top of the page, followed by a shorter horizontal scan slightly below the first scan and finally a vertical scan along the left edge of the page. These three scans form a general F shape pattern.

This is an important advice given by many web design gurus when it comes to deciding the layout of a site. Web designers are generally advised to place their important content to fall in this field of view. The same tip is useful for ad placement, a fact also confirmed by the heat map published by AdSense Help.

According to that map, ads placed below an article also performs well because readers generally look for where to go next?. The study referenced above says that this behavior forms an E-shaped scanning pattern, which is also common.

Complementing Ad Design
Ads that complement the color theme of your blog tend to perform better than those that contrast. Even though this AdSense Help article explains three forms of color schemes, namely Blend, Complement and Contrast, ads that contrast don’t perform that well. This fact is confirmed by an optimization tip published on the AdSense blog and also a guest post by pro blogger Darren Rowse on the same blog.

Find the Right Size
Ad size also plays a crucial role in catching the readers’ eyes and also in attracting better ads. Generally, bigger ads perform better. However, too big is also bad. According to Darren, the Medium Rectangle size (300 x 250) tends to perform better than the Large Rectangle. This is due to the fact that more advertisers tend to prefer the Medium Rectangle because of its wide use.

The AdSense blog, too, recommends the Medium Rectangle along with the Leaderboard (728 x 90) and Skyscraper (160 x 600) formats.

Number of Ads
This is another useful advice by the blogging guru Darren. General belief is that higher the number of ads, higher the chances of readers clicking on them. But too much ads can drive away the readers.

Use of different ad formats such as Link Units, Image and Video ads, and using Google Analytics to find out which content generates the most revenue are the other tips offered by Darren. Last, but not least, experimenting with different ad sizes, color schemes and positions etc is the best way to find out which ads works well on your blog/site, says Darren.

3 Columns : Harbor : Left and Right Sidebars

2009-02-04T15:09:00.006+05:30

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Harbor 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 #right-sidebar-wrapper
Change the float:$startSide to float:$endSide of this newly copied section (See the code snippet below)
Set the width of both sidebar selectors to 24%

#sidebar-wrapper {
width:24%;
float:$startSide;
word-wrap: break-word; /* fix ... IE */
overflow: hidden; /* fix ... float */
}

#right-sidebar-wrapper {
width:24%;
float:$endSide;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

2) Introduce a new div element 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) Adjust the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper and change its max-width property to 1175 pixels
Locate the #main-wrapper section and change its width property to 48%

#outer-wrapper {
max-width: 1175px;
...
}

#main-wrapper {
width: 48%;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 20 pixels.

#main-wrapper {
width: 48%;
margin-right:20px;
float: $endSide;
...
}

5) Adjust the max width of the header description to fit the new expanded header

Locate the .Header .description section
Change the max-width property to 1000 pixels.

.Header .description {
...
max-width:1000px;
...
}

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

Locate the line reading as "/** Page structure tweaks for layout editor wireframe */"
Replace that section with the code shown in red below.

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

body#layout #outer-wrapper,
body#layout #sidebar,
body#layout #wrap4,
body#layout #header {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width: 180px;
margin-$startSide: 0;
}

body#layout #wrap4, body#layout #outer-wrapper {
width: 800px;
}

/* Header
----------------------------------------------- */

Save the template. Switch to Page Elements view and move some of the widgets to the new sidebar on the right. (Without adding widgets, the new sidebar won't be visible on the blog).

Three Column Templates Explained

Sidebar Has Fallen Down!

2009-01-31T11:06:00.006+05:30

Every now and then, the above problem gets raised on many Blogger forums. Sometimes the request comes in the form of "My sidebar is missing!, please help". First of all, don't panic, it's not catastrophic.

The most common reason (I would say 90% of the time) for falling down sidebars has been the presence of unclosed <div> tags in one of the blog posts. i.e. a post without one or more matching </div> (note the /) tags for the corresponding <div> tags. Sometimes, it could be some other HTML tag. (For example, I have seen cases where a missing </script> tag caused the sidebar to be pushed down)

If a missing tag is the problem, the following method can be used to identify the post(s) that cause it.

Visit the individual pages of each post that appears on your home page. (For example, if you have configured your blog to show five recent posts on the home page, then visit each one of those five) In one (or more) of those posts, the sidebar will be pushed down, while it will appear normal in other posts. These posts are the ones that cause the problem.

Once you locate the trouble-making post (or posts), open it in Edit HTML mode and check for any unclosed <div> tags. Add the missing </div> tags and publish the post again. That should bring the sidebar back to its usual position.

Though the missing closing tags has been the biggest culprit for fallen sidebars, there are some other, rare reasons such as posting of large pictures or widgets in the sidebar and obscure script errors. If the above method does not fix your problem, then some more investigations are needed to locate the cause.

Blogger HOWTOs

2009-01-29T09:39:00.003+05:30

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

2009-01-24T21:43:00.004+05:30

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.

Simplified Sitemap Submission

2009-01-19T22:40:00.003+05:30

Recently Google Webmaster Tools (GWT) simplified the interface for Sitemap submission. As illustrated in this article, Sitemap submission earlier involved the selection of a file type. The new simplified interface, however, eliminates that need, giving us one factor less to worry about.

Login to GWT and go to Sitemaps -> Overview. Enter the path of your Sitemap file, relative to your blog's root, in the given text field and click Submit Sitemap. For Blogger blogs, the default RSS feed can be used as the Sitemap. Given below is relative path of such a feed.

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.

Once submitted GWT will automatically determine the Sitemap type and then start processing it. The figure below illustrates this new interface.

How Visitor Tracking Works

2009-01-15T13:35:00.008+05:30

If you maintain a blog or a website, then it is most likely that you want to find out who is visiting that blog/site. The most common and easiest approach to monitor the visitors is to install a visitor meter. There are many free visitor meters (trackers or counters as they are called sometimes) available today, and almost all of them work based on some Javascript and/or HTML based tracking code invoked from the client-side. (The other primary method of visitor tracking is server-side log analysis). In this article, we'll take a brief look in to how these tracking systems work.

When you sign-up with one of these tracking services, you get a piece of code typically called the tracking code. Then you have to install that in all the web pages you wish you track. In the case of Blogger blogs, an HTML/Javacript widget can be used to embed this tracking code to your blog. As Blogger widgets load up on all blog pages (unless you limit them to specific pages), that way you can easily track your entire blog, even the posts that you write in the future. Given below is the tracking code for this blog provided from Site Meter.

<script type="text/javascript" src="http://s44.sitemeter.com/js/counter.js?site=s44idssl">
</script>
<noscript>
<a href="http://s44.sitemeter.com/stats.asp?site=s44idssl" target="_top">
<img src="http://s44.sitemeter.com/meter.asp?site=s44idssl" alt="Site Meter" border="0"/></a>
</noscript>

In the above code, the <script> element refers to a Javascript (type="text/javascript") named counter.js located at http://s44.sitemeter.com/js/. When someone visits a page in The Blogger Guide blog, that visitor's browser will execute this Javascript code, by passing the argument site=s44idssl in to it. This argument carries the codename (or ID) given for this blog by Site Meter. The code inside the <noscript> element comes in to play when the visitor's browser has Javascript disabled or has no support for Javascript.

Once installed, this tracking code does two things every time a tracked page loads up. Firstly, it will fetch the relevant Javascript code from the tracking service's web server and execute it. When this script executes, it will gather data such as the referrer to the web page (i.e. from which page did the visitor reach your tracked page), visitors IP, the ISP, browser type, OS, screen resolution etc. The collected data will be sent to the tracking service, piggybacked on another HTTP request. This second request is typically to download some web resource such as a dummy image (e.g. a transparent 1x1 px image) or an image showing the cumulative total of visitors. Given below is such a request sent to Site Meter when a page from this blog loads up.

http://s44.sitemeter.com/meter.asp
?site=s44idssl
&refer=http://groups.google.com/group/…
&ip=124.43.143.75
&w=1680
&h=1050
&clr=32
&tzo=-330
&lang=en-US
&pg=http://bguide.blogspot.com/
&js=1
&rnd=0.16926656137301965

Note that all this data are sent in a single line. The line breaks are added for clarity. The request shown above is sent to a web page called meter.asp, located at http://s44.sitemeter.com. The &refer parameter says that the visitor has reached from a link via a Google Groups page. An application running on the tracking service's web server will extract the data sent via the request and will populate their database. It is this data that you see in various summarized forms when you later login to see the visitor statics.

Another common requirement of bloggers/webmasters is to exclude their own visits to the blogs/sites maintained by them. Chances are that you will visit your blog many times a day and you don't want them counted as actual visits. Most tracking services offer a simple cookie-based method of achieving that. For instance, in Site Meter's, the ignore visits option in the manager section offers a simple one click method of excluding own visits. Feedjit also has a similar simple method. However, it is not that simple in certain services (e.g. Google Analytics). (See this article to learn how to exclude your visits from Google Analytics)

Contextual Advertising – AdBrite

2009-01-11T22:03:00.003+05:30

Article Series: Blog Monetization

In this second article of the series looking in to contextual advertising networks, we will have a go at AdBrite. (Previous one was about Yahoo! Publisher Network)

AdBrite, in fact, offers more than just contextual advertising. It's text and in-line ad formats (in-line ads are the pop-up ads that appear when you hover over a double underlined keyword in your content) are contextual while there are other formats which enable you to be part of an ad marketplace. As a publisher, you can be a seller of ad space in this market place.

To get started, you need to sign-up and setup an ad zone. (A zone is analogous to an AdSense channel, but unlike in AdSense where the ad unit is the primary, here the zone is the primary unit and you attach ads to the zone). Once a zone is defined, you get an ad code which can be easily installed with the use of Blogger's HTML/Javascript widget.

AdBrite does not impose exclusivity; i.e. not allowing ads from other networks to be displayed on the same page. However, when displaying AdBrite ads with AdSense, remember to comply with the AdSense terms of ensuring that "formatting or colors of the third party ads is different enough from that of the Google ads" as described here.

Earnings are on Cost-per-Click, Cost-per-Impression and Cost-per-View bases depending on the ad format used. Payments are made via checks bi-monthly. The earnings are paid out two months after accrual, meaning, for example, earnings in January are paid in March. The default minimum payment threshold is $100, but it can be set to as low as $5!

Standard Ad Units

2009-01-06T21:12:00.002+05:30

All most all of the online advertising schemes, contextual or otherwise, today offer various ad formats such as Banner, Half Banner, Leaderboard etc, that come in various sizes. These formats and sizes are in fact defined by a standard (or rather a guideline) published by the Interactive Advertising Bureau (IAB).

The IAB is an organization comprising of over 375 media and technology companies, who have got together with the objectives of improving the field of online advertising and marketing.

This guideline, as stated by IAB, “provide a framework for advertising inventory and web page design”. Advertising networks, advertisers, publishers and web site designers, all benefit from the adaptation of these guidelines. Ad networks don't have to offer a multitude of ad sizes, advertisers can design their ads to fit these standard sizes, web site designers can optimize their template designs and finally, publishers get the flexibility of working with multiple ad networks without having to change ad placeholders.

The guideline defines standard names and sizes (e.g. Banner is 468 x 60 pixels, Leaderboard is 728 x 90 pixels), a maximum recommend download size, and for animated ad units, a recommended animation duration. In addition for ad unit guidelines, IAB defines guidelines for other forms of advertising such as pop-ups and rich media.

As publishers, it is wise to evaluate whether an ad network conform to these voluntary guidelines before deciding to sign up with that network.

Adding a Simple Navigation Bar

2009-01-03T08:45:00.009+05:30

The term navigation bar is typically used to refer to an array of hyperlinks allowing visitors to quickly move around in a web site. Navigation bars can be in horizontal or vertical arrangements. This article will explain how you can add a simple, vertical navigation bar at the top of your Blogger blog. (This is called ‘simple’ because it is text-based and will not appear as a tabbed array of buttons)

This method is so simple that all you need is a simple Text Widget placed at the Header section of the template. (See this article to learn how to add Blogger gadgets to the Header section)

For example, consider a navigation bar such as the one shown in the figure below.

For the purpose of demonstration, I will only use the first two links in that bar. To add those two links, this is the HTML code you need. (IMPORTANT: All of this must be in a single line, and the line breaks are added only for clarity)

<a href="http://bguide.blogspot.com/">Home</a> |
<a href="http://bguide.blogspot.com/2008/02/three-column-templates-explained.html">3 Columns Explained</a>

It’s a mere sequence of URLs separated by a pipe ( | ) character. The separator can be any character, but the pipe is the best fit there. The general form of a URL is as follows.

The Link Text is the portion of text displayed on the browser. The URL is the reference (or web address) of the actual page to link to. The following snippet shows a sample HTML code to create a navigation bar with some hypothetical links from a Blogger blog.

<a href="http://myblog.blogspot.com">Home</a> |
<a href="http://myblog.blogspot.com/YYYY/MM/post-one.html">Post One</a> |
<a href="http://myblog.blogspot.com/YYYY/MM/post-two.html">Post Two</a> |
<a href="mailto:myemail@example.com">Contact Me</a>

As stated earlier, all of the above code must be in a single line. Line breaks are added for clarity only.

Adding this alone using a text widget would serve the purpose, but to get the hovering effect to highlight the links when mouse is moved over, we need a little bit of CSS. Given below is a CSS class selector called mynav limited to the scope of div elements. The properties highlighted in red should be adjusted to match the colors and layout of a given blog.

div.mynav
{
margin : 0 14px .1em;
font-size : 12px;
font-weight : bold;
}

div.mynav a
{
text-decoration : none;
}

div.mynav a:link, div.mynav a:visited,
div.mynav a:active
{
color: #ffffff;
}

div.mynav a:hover
{
color: #eebf9f;
}

Explaining the above set of CSS rules is beyond the scope of this article. If you need to use it however, just copy the above code snippet and install it in your template as illustrated in the article How to Add a Custom CSS to Blogger. Once the CSS style is installed, we need to apply that style to our navigation bar code. That is done by enclosing that entire code in a <div> element with the class mynav. The following code snippet shows the final result.

<div class="mynav">
<a href="http://bguide.blogspot.com/">Home</a> |
<a href="http://bguide.blogspot.com/2008/02/three-column-templates-explained.html">3 Columns Explained</a>
</div>

All right, that’s it. Formulate all the code you want in your navigation bar and install it using a text widget in to your blog Header.

HOWTO: Add More Gadgets

2009-01-01T21:49:00.004+05:30

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'>

Contextual Advertising – Yahoo Publisher Network

2008-12-19T06:40:00.002+05:30

Article Series: Blog Monetization

In the previous article, we looked at contextual advertising in general. This one will take a detail look in to one of those schemes, the Yahoo! Publisher Network.

Yahoo’s Publisher Network (YPN) is pretty much similar to Google AdSense in operation. Content Match is the AdSense counterpart and, in addition, YPN offers RSS ads. To get started, you need to sign up for a publisher account.

Displaying ads is just like in AdSesne, where you have to select from one of many ad formats and color schemes. Then you can attach an optional Reporting Category (similar to AdSense Channels) to that ad unit. Once defined, all you have to do is to copy the given ad code in to your blog or web site. In Blogger, the ad units can be easily incorporated with the use of an HTML/Javascript widget.

Unlike AdSense, Content Match does not impose a limit to the number of ad units that can be displayed on a page. One caveat, however, is that you cannot display ad units from another publisher in the same page in which YPN ads are displayed.

Earnings are on a Cost-per-Click basis, so your income potential depends on the numbers of visitors and the number of clicks they make. There are 4 payments methods and PayPal is one of them, allowing for convenient and quick receipt of earnings.

Compared to AdSense, availability of easy ad filtering by way of ad categories and sub categories is a plus. Additionally, ability to receive payments via PayPal is another important advantage over AdSense.

Blog Monetization – Contextual Advertising

2008-12-17T06:27:00.005+05:30

Article Series: Blog Monetization

In this article, we will be looking at one of the most popular forms of web advertising, contextual advertising. Contextual Advertising refers to the mechanism of displaying advertisements relevant to the content of a web page currently viewed by a visitor. This is done via automated systems that scan the page content looking for advertising keywords and then display relevant ads for those keywords.

The contextual ads come in two main types; on-page ads such as Google AdSense or pop-up ads such as Vibrant Media. The payments are either based on the number of clicks (Cost per Click – CPC) or the number of types the ad is displayed (i.e. impressions) (Cost per Impression – CPM).

The two terms CPC and CPM are named from the point of view of the advertiser and not that of the publisher of the ad. For example, each time a visitor clicks on a contextual ad, the corresponding advertiser has to pay some amount to the ad network. That is the cost the advertiser has to pay the ad network for that click. The ad network pays a portion of that cost to the publishers.

Options
Here’s a (non-exhaustive) list of currently available contextual advertising schemes

Google AdSense
Yahoo! Publisher Network
Microsoft adCenter
Text Link Ads
Vibrant Media
AdBrite
Clicksor

References:

Contextual Advertising

Blog Monetization

2008-12-09T22:08:00.006+05:30

This one marks the beginning of a series of articles on one of the hottest topics amongst the bloggers all over, monetization. Much has been written about monetizing blogs, but the bitter truth is that it’s very hard. Nevertheless, the message from the people who have succeeded is that, if you have the commitment and the determination, making money blogging is not impossible. This series is an attempt to look at the state of the art of blog monetization and to enumerate the current know-how in the blogosphere, by looking at both the successes and the failures of others.

First of all, let’s have a look at the current income generation schemes available for bloggers. (This is a summarized listing of such schemes and the follow up articles will elaborate on each one.)

There are two primary types of blog-based income; direct and indirect. Though no standard definitions of these two types are found, we can describe direct income as those income generated in relation to the content of your blog. Indirect income can be described as those income generated through means other than in relation to the content.

Exploring further, we find today, the following popular direct income schemes.

Advertising – like in other types of media (TV, radio, newspapers etc.), advertising is a prime source of income for bloggers. This scheme can be further categorized as below.

Contextual Advertising – Display of ads relevant to your content (e.g. Google AdSense)
Search Advertising – Displaying ads for searching within your blog (e.g. AdSense for Search) or when you get visitors via search engines (e.g. Chitika)
Sponsorships (aka Targeted Advertising) – Getting vendors related to the content of your blog to display ads for time and size based (i.e. not per-click or per-impression) rates

Affiliate Schemes – this is where you earn commission when your readers buy items advertised in your blog. This differs from contextual advertising in that clicking on an affiliate ad alone will not give you any revenue. Amazon Associates is a famous example in this category.
Selling Your Content – Thirdly is the means of selling your own content in various print and electronic mediums. Books, ebooks, CD/DVDs etc are examples here.

In the indirect income type, we have a more variety of options.

Services (aka Consulting) – Once you build up a good readership and an image as a reliable source for professional help, you can start offering services at a charge. It could be advice on technical matters, search engine optimization, graphic designing, Internet marketing etc.
Sales of Goods (aka Merchandising) – This refers to selling materials such as T-shirts and caps to your readers, at a profit.
Paid Writing – You can write sponsored reviews about various products. PayPerPost is an example in this category. Writing for team blogs, doing outsourced writing for corporate blogs are other options here.
Donations – Offering genuine help to your readers and getting donations in return is another means of income for bloggers.
Selling the Blog – Lastly, is the act of selling out your blog. It could be a hard decision if you’ve put lot of hard work in building it up, but some people develop blogs with the intention of selling it.

All schemes above are not applicable for all types of blogs. Selecting what is suitable depends on factors such as the niche of your blog, your readership (e.g. merchandising is good if you have an established base of returning readers) and availability of advertisers.

In the coming articles we will be exploring each of these schemes in more detail.

References:

Getting Better

2008-12-06T09:42:00.003+05:30

Since its inception, The Blogger Guide has had a more technical focus. I’ve written about the basic of the Blogger template, explained the intricacies of converting to 3 columns and how to add custom CSS styles to Blogger. Then, there are the extremely popular step by step guides for three column conversions and wider post areas for many of the famous Blogger templates. And recently I completed a detailed series of posts looking at the internals of the Blog Widget.

Being a Computer Engineer, it’s no wonder that I have been writing articles with a technical focus. One of the primary objectives of this blog was to explain the technical details of Blogger, for the average non-technical user, in clear, simple English. Looking at the reactions from my readers, I can safely assume that I’ve been successful in doing that.

Starting from today, The Blogger Guide will expand its scope beyond the technicalities of Blogger. As the first step, I will venture in to one of the most sought after topics by bloggers, blog monetization. In other words, I will write about how you can make money blogging! But, without being a yet another listing of money making tips, I intend to offer a more complete guide including what those avenues are, how to incorporate them to your Blogger blog and their income potentials.

That’s not all. Tips on search engine optimization, Blogger templates and template design tips are all in the pipeline. And rest assured, I will continue to offer the technical assistance that you all found useful so far.

Blog Widget - Part 5

2008-11-30T09:24:00.006+05:30

Finally, in the fifth article of this series, we arrive at the core includable of the Blog widget, the post includable. So far, we've had an overview of the Blog widget, looked at the status-message, comments and next/previous posts sections. What's remaining to be addressed is the post section.

This is what controls the appearance of the most critical content of a Blogger blog, the posts. If you open your template in Edit HTML mode and click on the ‘Expand Widget Template’ checkbox, you can see the post includable defined as follows.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
…
<b:includable id='post' var='post'>
</b:includable>
…
</b:widegt>

The <b:widget> section with the type=’Blog’ is the entire Blog widget and inside that, what goes in between <b:includable id='post' var='post'> and </b:includable> is the post includable.

First, let’s see the main sub sections of this includable, illustrated by the figure below.

The outer most element is the post hentry section. This is divided in to three sub elements, namely, the post title, the post body and the post footer. The post footer is in turn divided in to three more sub elements.

The above abstracted diagram is of little use. To make the real connection between all these code and an actual blog post, let’s map them on to a real blog post. The following illustration is just that.

The above figure overlays few rectangular regions on top of a screenshot of an actual blog post. The post title and post body sections are visible clearly. It is the post footer and its sub sections that are not so prominent. It should be now clear to you that the author name, time stamp, labels etc. that appear at the bottom of a post are in fact contained in the post footer section.

For example, the display of post labels is handled by this piece of code.

The post-footer-line-3 is empty by default.

After a long series of articles (that spanned about 5 months due to time constraints) about the Blog widget, I assume that you are now confident enough to look under the hood to explore the structure of the Blog widget. Go ahead and take peak at the widget’s code.

Finally, you might ask, “What’s the use of knowing this anyway?”. Though for the most part you don’t have to meddle with the code underneath, knowledge of what controls the display of your posts can become handy when things go wrong sometimes. For example, see this thread on the Blogger Help Group where one blogger had a problem of missing the Next Previous post links from his blog and how it could be corrected by adding the missing ‘include’ statement for that section.

Rounders 2 with a wider post area

2008-11-13T21:24:00.005+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 Rounders 2 template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column. (For other Rounders templates, check the series home given above)

The Rounders 2 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

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 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

Go to Layout -> Edit HTML
Locate the #main-wrap1 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 725 by adding 240 to the default width of 485 pixels
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)
Change the URL of the background property to the one shown in red below

#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders2_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}

Locate the #main-wrap2 CSS selector
Change the URL of the background property to the one shown in red below

#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders2_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}

Locate the #main CSS selector
Increase its width property to 725
Change the URL of the background property to the one shown in red below

#main {
background:url("$imageHost/rounders2_rails_main_w.gif") repeat-y left;
padding:0;
width:725px;
}

Locate the following CSS selectors and change their width properties as shown in red below.

.main .widget {
margin-top: 4px;
width: 708px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 724px;
}

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

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

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

4) Replace the other background images with expanded ones as necessary.

Locate the following CSS selectors.
Replace the URLs of the images to the ones shown in red below.

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

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

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

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

That's it! Click SAVE TEMPLATE and you should now have more room to play around with, in your main post area.

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://www.bloggerguide.lk/2008/04/wider-2-column-templates-step-by-step.html">Wider Two Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Rounders 4 with a wider post area

2008-11-12T11:29:00.005+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 Rounders 4 template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column. (For other Rounders templates, check the series home given above)

The Rounders 4 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

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 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

Go to Layout -> Edit HTML
Locate the #main-wrap1 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 725 by adding 240 to the default width of 485 pixels
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)
Change the URL of the background property to the one shown in red below

#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders4_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}

Locate the #main-wrap2 CSS selector
Change the URL of the background property to the one shown in red below

#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders4_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}

Locate the #main CSS selector
Increase its width property to 725
Delete the background property (shown with a strike off below)

#main {
~~background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y left;~~
padding:0;
width:725px;
}

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

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

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

4) Replace the other background images with expanded ones as necessary.

Locate the following CSS selectors.
Replace the URLs of the images to the ones shown in red below.

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

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

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

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

Rounders 3 with a wider post area

2008-11-09T20:40:00.011+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 Rounders 3 template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column. (For other Rounders templates, check the series home given above)

The Rounders 3 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

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 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

Go to Layout -> Edit HTML
Locate the #main-wrap1 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 725 by adding 240 to the default width of 485 pixels
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)
Change the URL of the background property to the one shown in red below

#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders3_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}

Locate the #main-wrap2 CSS selector
Change the URL of the background property to the one shown in red below

#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders3_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}

Locate the #main CSS selector
Increase its width property to 725
Change the URL of the background property to the one shown in red below

#main {
background:url("$imageHost/rounders3_rails_main_w.gif") repeat-y left;
padding:0;
width:725px;
}

Locate the following CSS selectors and change their width properties as shown in red below.

.main .widget {
margin-top: 4px;
width: 708px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 724px;
}

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

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

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

4) Replace the other background images with expanded ones as necessary.

Locate the following CSS selectors.
Replace the URLs of the images to 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;
}

3 Columns : Minima Lefty : Left and Right Sidebars

2008-11-01T17:00:00.004+05:30

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Minima Lefty template in to a three column template with two sidebars on left and right hand sides of the main post area.

The Minima Lefty gets its name because its default sidebar is on the left hand side, unlike the basic Minima template which has it on the right. In this tutorial, we will add a second sidebar to the right hand side of a default Minima Lefty template.

(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 #right-sidebar-wrapper
Change the float:$startSide to float:$endSide of this newly copied section (See the code snippet below)

#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for long ... float */
}

#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... 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 sections called #outer-wrapper, #header-wrapper and #footer
Change their width property to 880 pixels

#outer-wrapper {
width: 880px;
margin: 0 auto;
...
}

#header-wrapper {
width: 880px;
margin: 0 auto 10px;
...
}

#footer {
width: 880px;
clear: both;
margin: 0 auto;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 12 pixels.

#main-wrapper {
width: 410px;
margin-right:12px;
float: $endSide;
...
}

5) Adjust the max width of the header description to center it in the new expanded header

Locate the #header .description section
Change the max-width property to 880 pixels.

#header .description {
...
padding:0 20px 15px;
max-width:880px;
...
}

Note: Step 6 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where the Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.

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 {
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!

Three Column Templates Explained

Follow The Blogger Guide

2008-11-01T16:49:00.004+05:30

I've just made it easier for you to follow The Blogger Guide, by enabling Blogger's Followers widget. Now you can easily keep track of all the clear and simple technical tutorials and tips that you always loved.

Go ahead and become a follower and show your appreciation! Thank you.

Blog Widget - Part 4

2008-10-25T22:20:00.006+05:30

The Blog Widget is what controls all the posts and their comments in Blogger blogs. Hence, it is obviously the most important widget in Blogger.

This is the fourth in a series of articles covering the details of the Blog widget. In part three, we studied the comments section and in this one, we will dig in to the details of the next, previous posts and feed subscription links. These are the links that appear at the bottom of the posts column.

The above figure shows a typical display of these links at the end of the posts on a given page.

The light blue shading shows the area in which Newer Posts and Older Posts links appear. The behavior of this section is defined by the includable section with the id nextprev. It optionally contains a link to the blog’s home page when viewing pages other than the home page.

The feedLinks includable, highlighted in orange, is what displays the “Subscribe to:” link. When the blog’s home page is viewed, this section displays the link to the posts feed and in individual pages, it carries the post comments feed link.

The illustration above has a mapping of the actual includable sections in the Blogger template to how they are visually displayed when a blog is loaded in a browser window. That should help the more curious readers to open their templates in Edit HTML mode and investigate further.

So far we have covered all the major sections of the Blog Widget other than the most crucial section; i.e. the main includable. Let’s have a go at that in the next article.

3 Columns : Ms Moto : Left and Right Sidebars

2008-10-05T05:33:00.006+05:30

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default two column Ms Moto template in to a three column template with sidebars on the left and right hand side 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 section (Do a Find using your browser)
Copy that full section and paste above the existing sidebar section (it doesn't have to above) and rename it to #left-sidebar
Change the float: $endSide to float:$startSide (See the code snippet below)

#left-sidebar {
width: 226px;
float: $startSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... */
}

#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... */
}

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 parent wrappers to accommodate the new sidebar

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

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 918px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main section
Insert a left margin of 14 pixels.

#main {
width: 400px;
margin-$startSide:14px;
float: $startSide;
...
}

5) Modify and expand the background images as necessary.

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 sections.
Replace the URL of the background images to thes one shown in red below.

body {
...
background: #d7b url($imageHost/msmoto_outerwrap_w.gif) top center repeat-y;
...
}

#outer-wrapper {
...
background: #ffffff url($imageHost/moto_innerwrap_w.gif) top right repeat-y;
...
}

6) 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 #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}

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

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

]]></b:skin>

HOWTO: Add an image beside a URL

2008-10-01T22:12:00.007+05:30

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.

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!

HOWTO: Add a Recent Posts Feed

2008-07-01T08:50:00.002+05:30

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.

Blog Widget - Part 3

2008-06-14T11:12:00.009+05:30

This is the third in a series of articles about the Blog Widget, the most important widget in Blogger. First article was an overview of the widget and the second was about the status-message section.

In this part, we are going to take a look at the comments section.

If you open your template in HTML mode (i.e. Layout -> Edit HTML) and click on the Expand Widget Templates button, you can see the following code that encloses the comments section.

<b:includable id='comments' var='post'>
...
</b:includable>

Everything about how to display the comments in a given post is described within the above includable section. This section is then included inside the main section as shown in red below.

<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

...
</b:includable>

Notice that the comments section is enclosed in a <b:if> element. What it says is to show the comments section only if the pageType is equal to item. This is why we don’t see the comments in the blog’s homepage or archive pages. The default setup is to show comments only in the individual post pages.

Now let’s get to the internals of the comments section. Before looking at the code, see the following illustration to understand the sub sections of the comments section.

The above figure has the regions of a screenshot of an actual comments section marked out, helping you to make the connections easily. As you can see, right on top is the numComments sub section showing the number of comments.

Next is the comments-block, which in turn is divided in to 3 parts; comment author, comment body and timestamp. The light yellow shading in the above figure highlights these 3 sub sections. The names of these 3 sub sections are self explanatory. comment-block section repeats the author, body and timestamp sub sections for every comment in a given post.

An important thing to note inside the timestamp sub section is the commentDeleteIcon, shown in red below. (This is one of the includables we discussed in part 1 of this series.).

This is the small trash can icon you see next to the timestamp in the above figure and it is displayed only when the blog’s admin is logged in. We will take a detail look at the commentDeleteIcon section later in this series.

Following the comments-block (i.e. after displaying all the comments) is the comment-footer which carries the Post a Comment link.

And finally is the back links section, which displays any other blog posts that link to the post in concern. The backlinks-container in turn includes the backlinks section, another includable of the Blog Widget.

That’s it. Hope you are now clear about the comments section of the Blog Widget. Did I manage to explain the somewhat complex code in this part clear enough? Let me know what you think.

Note:
One sub section I didn’t mention is the paging-control-container, which will break the display of the comments, over several “pages”. This will come in to play once the number of comments reaches a particular maximum number per page. However, I was not able to figure out what that maximum is and none of my posts have reached a level where the comment paging has taken place. If you do know that maximum number of comments per page, let me know.

CSS Selectors in Blogger Templates

2008-06-12T23:37:00.005+05:30

The look and feel of Blogger templates are controlled by the Cascading Style Sheet (CSS) rules defined in the template skin. Currently, there are 38 different templates available from Blogger. These templates use a number of different CSS selectors or rules.

Some of these selectors are common to all the templates and some are specific to certain templates. Knowledge about which selectors are used by which templates is useful when trying to tweak the formats and styles of Blogger templates.

Here is a matrix showing the CSS selectors against the Blogger templates in which they are used. This can be used as a reference when you want to find out what CSS selectors can be used to modify the look and feel of your tempalte.

A screenshot of the first page of this matrix is given below.

Note:
This matrix has been generated by a program that processed all the templates. It's very difficult to check whether all the selectors are properly marked for all the templates. If you find any errors in the matrix, please let me know.

URLs

2008-06-05T20:55:00.004+05:30

Here are some common questions about URLs and adding hyperlinks in Blogger.

What is a URL?
How do I represent a URL in HTML?
How do I open a link in a new tab/window?
How do I add a hyperlink in Blogger?

What is a URL?
URL stands for Uniform Resource Locator. It is a way of uniquely identifying the location of a resource (such as a web page, an image etc) on the vastly complex network of the Internet.

The key word here is “uniform” meaning uniqueness; i.e. a given URL should point to one and only one resource on the Internet. In other words, the same URL cannot point to (i.e. identify) more than one resource. Two URLs, however, can point to the same resource.

How do I represent a URL in HTML?
HTML uses the “anchor” element ( i.e. <a>…</a>) to define URLs. The word anchor gives the idea of linking. When an anchor element is used to refer to a URL, the resulting entity is usually referred to as a hyperlink.

The usual syntax of the anchor element is shown below.

<a …> is the opening tag
href (or hyperlink reference) is an attribute which carries the URL of the page to link to as the attribute value
Link Text is the text that will be actually displayed on the browser
</a> is the closing tag, which marks the end of the anchor element

For example, when:

<a href="http://bguide.blogspot.com">The Blogger Guide</a>

is entered in to the HTML code of a web page, the following hyperlink will appear on that page.

The Blogger Guide

How do I open a link in a new tab/window?
Sometimes when you click on a hyperlink, the target page opens in a separate window or tab of the browser. (Whether it opens on a new tab or a window actually depends on the settings of the browser)

The way to achieve this is to add the attribute target with the value _blank inside the opening tag of the anchor element.

E.g.

How do I add a hyperlink in Blogger?
There are two ways in which you can add a hyperlink in Blogger.

One is to use the Compose (i.e. WYSIWIG) mode editor.
Steps:

Highlight the text that should be linked
Click on the Hyperlink icon
Enter the URL to link to and click OK

See the figure below for an illustration of the above steps.

The other method is to directly type the HTML code in the Edit Html mode of the post editor as shown below.

Note:
If you want add the target="_blank" part, then you have to use the Edit Html mode and change the HTML code.

Blog Widget - Part 2

2008-06-04T22:29:00.008+05:30

In the previous article of this series, we had an overview of the Blog widget covering its basic components. In that article, we learned the main includables and their order of inclusion.

In this article we will take a look at the status-message includable.

If you open your template in HTML mode (i.e. Layout -> Edit HTML) and click on the Expand Widget Templates button, you can see the following code that defines the status-message section.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

And this particular section will be included in the main section as follows.

<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

...
</b:includable>

This section, however, is not a very important part of the Blog widget. There are two instances in which this section comes in to play; when someone searches your blog using the Search box in the Navigation Bar or clicks on one of the Labels.

For example, if some searches for the string "text widget", the status message will be displayed as follows.

So that's the status-message section of the Blog widget.

Blog Widget - Part 1

2008-06-03T22:52:00.008+05:30

The Blog Widget is the most important widget in Blogger. It contains the core content of a blog including its posts, comments, back links and feed links. In other words, this is what defines the composition of the main column of a Blogger blog.

Knowing the finer points of the Blog widget is very valuable to any Blogger user. Since it is so important, I'm going to explain this widget over several articles. This is the first part of a multi part article series on the Blog widget.

As with any widget, the Blog widget also has a primary <b:includable> section with an id='main'. However, it also contains a number of other <b:includable> sections, each serving a valuable purpose. They are:

status-message
post
postQuickEdit
comments
commentDeleteIcon
backlinks
backlinkDeleteIcon
nextprev
feedLinks
feedLinksBody

These includables are the building blocks of the Blog widget. If we equate the Blog widget to a car, think of the main includable as the chassis and the others as various components such as the body, engine, seats etc. of that car. The final Blog widget is the result of assembling these includables in a particular order. This hierarchy of assembly is illustrated in the figure below.

At the first level of inclusions in the main section are the status-message, post, comments (only in item pages), nextprev and feedLinks sections. The post section in turn includes the postQuickEdit section. commentDeleteIcon and backlinks sections are contained within the comments section and the backlinks section in turn includes the backlinkDeleteIcon section. Finally, the feedLinks contains the feedLinksBody section.

In the articles to follow, we will probe each of these includable sections one by one.

Widget Instantiation

2008-06-01T21:04:00.006+05:30

The template is a crucial element of the new Layout Blogger blogs. It defines the arrangement of the main post column and the sidebar, layout of blog elements such as the posts, widgets, headers etc. and also the fonts and colors of its look and feel. Understanding the template is, therefore, very useful in understanding how your blog behaves.

In two previous articles we looked at the primary components and the basic skeleton of a Blogger template. In this article, we will dig in to the more specific topic of widgets. More precisely, we are going to see how widgets get instantiated.

Instantiation has a very specific meaning in a technical context. In programmers' jargon, it means creating a specific instance from a generic template. In laymen terms, think of a template as a mould and instantiation as the act of moulding out a shape from that mould. So, the widget we see in the template is the mould and when the blog is actually viewed in a browser window, what we see is the moulded shape (or the instantiated widget).

Let's look at an example to be more clear about this instantiation process.

Consider a simple Text widget with a title and some sample text in its body. If you go to Layout -> Edit HTML, all you see as your widget is a single line similar to the one shown below.

<b:widget id='Text1' locked='false' title='Test Widget' type='Text'/>

If you click on the Expand Widget Templates check box, the above single line will be expanded to the complete widget shown below.

<b:widget id='Text1' locked='false' title='Test Widget' type='Text'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

The 4 lines shown in blue instructs Blogger to include the title of this widget if the title is not empty. The key thing to note is the absence of the actual title here. What the template has is the XML element <data:title/>. Similarly, the 3 lines shown in red represent the body of the widget using the XML element <data:content/>. The line in green is what embeds the code needed for the Quick Edit (i.e. Screwdriver and Wrench icon you see when you are logged in to your blog) function.

<data:title/> and <data:content/> are special instructions to Blogger. When the blog actually loads up in a browser (i.e. when someone visits your blog),these two XML elements get replaced with the actual title and the content, fetched from the Blogger database.

Once the above widget is instantiated, the resulting HTML code you see is as follows.

<div class='widget Text' id='Text1'>
<h2 class='title'>Test Widget</h2>
<div class='widget-content'>
This is to a sample text widget.
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?... title='Edit'>
<img alt='' src='http://www.blogger.com/img/icon18_wrench_allbkg.png'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>

Here are the key changes.

The <b:widget> element is replaced with an HTML div element.
<b:includable> and <b:if> elements are not present
<data:title/> is replaced with the actual title "Test Widget"
<data:content/> is replaced with the actual content "This is to a sample text widget."
The quickedit line has stuffed in all the code needed to affect that behavior

If the widget title was empty, you will not see the blue line in the resulting HTML code.

This is how most of the widgets you see in Blogger get instantiated. The Blog widget, however, has some complex instantiation and we will take a look at it in another article.

Show Your Appreciation

2008-05-31T21:05:00.003+05:30

Hope something on this blog has been useful to you and I assume that’s why you are here. It’s indeed my pleasure to have you helped you! Given below are some methods in which you can show your appreciation.

Donate
Make a small donation to cover my basic costs. Remember, every dollar counts, so donate only what you are comfortable with. And there’s no obligation at all; donate only if you wish to do so. :-) Use the PayPal Donate button in the sidebar to donate.

Link to This Blog
You are absolutely free to use the various resources such as images, scripts etc provided with some of the tutorials. However, if you do use them, I appreciate if you can put The Blogger Guide to your Blog List and/or write a post in your blog linking to the relevant tutorial

Bookmark the Articles
Sharing and bookmarking the articles is another good way to say thanks. Submit to Digg, Stumble, add to Technorati favorites or add to whatever social bookmarking service you use.

Rate My Posts/Blog
If you found this blog via an answer given by me on a forum such as Blogger Help Group, Blogger Forum or BlogCatalog, then please rate or rank my posts/blog on those forums.

Spread the Word
Tell your friends and family; refer them to The Blogger Guide.

Thank You,
ids.

Scribe with a wider post area

2008-05-30T21:47:00.006+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 Scribe template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column.

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 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 630 by adding 200 to the default width of 430 pixels

#main {
width:630px;
float:$endSide;
...
}

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

Locate the following CSS sections
Change their width property to 900 pixels

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

#main-top {
width:900px;
...
}

#main-bot {
width:900px;
...
}

#wrap2 {
width:900px;
...
}

4) Replace the other background images with expanded ones as necessary.

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 to the ones shown in red below.

#main-top {
width:900px;
height:49px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_top_w.jpg") no-repeat top left;
...
}

#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_bot_w.jpg") no-repeat top left;
...
}

#wrap2 {
width:900px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_mid_w.jpg") repeat-y;
...
}

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

#footer {
clear:both;
background:url("$imageHost/scribe_divider_w.gif") no-repeat top $startSide;
...
}

Denim with a wider post area

2008-05-27T08:13:00.002+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 Denim template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column.

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 664 by adding 200 to the default width of 464 pixels.

#main-wrapper {
width: 664px;
float: $startSide;
...
}

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

Locate the CSS sections called #content-wrapper and #header
Increase their width property by the same amount of pixels selected in step (1)

#content-wrapper {
width: 960px;
margin: 0 auto;
...
}

#header {
width: 960px;
margin: 0 auto;
...
}

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.

Understanding the robots.txt File

2008-05-25T08:20:00.004+05:30

The robots.txt file is useful in blocking off some of the pages of your blog/site from search engine crawlers. In this article, we will take a look at some of the commonly asked question about the robots.txt file, with a particular focus on Blogger blogs.

The questions are ordered with a logical flow so that you can read them from top to bottom as well.

What is a Robot?
What is the robots.txt file?
What is the format of this file?
What is the use of the robots.txt file?
Can I edit the robots.txt file?

What is a Robot?
A Robot (aka wanderer, crawler or spider) is a computer program that traverses the web automatically.

Even though these names give you the feeling that these programs “travel around” the Internet, they really don’t travel from computer to computer. What they, in fact, do is to follow the hyperlinks found on web pages by issuing download requests for each of those hyperlinked pages.

Crawling, however, is a separate topic that falls beyond the scope of this article.

What is the robots.txt file?
This is a simple ASCII text file and its name must be written in all lowercase letters as robots.txt. It should be located at the root directory of your domain. Usually, in a website, this is where you keep your index.html file.

In Blogger blogs, this is located at the following address.

http://<your-blog-name>.blogspot.com/robots.txt

For example, if your blog name is my-great-blog, then your robots.txt file can be viewed by typing the following address in to browser’s address bar.

http://my-great-blog.blogspot.com/robots.txt

What is the format of this file?
A typical robots.txt file consists of one or more sets of rules or directions for search engine robots. Each set of rules comprises of two or more instructions written on adjacent new lines. Rule sets are separated by blank new lines.

Here’s a typical example file from a blogspot blog. (Line numbers are added for referencing only. The actual file does not contain them)

1: User-agent: Mediapartners-Google
2: Disallow:
3:
4: User-agent: *
5: Disallow: /search

Lines 1 & 2 form one set of rules and lines 4 & 5 form another set. They are separated by the blank line 3.

A typical rule set starts with a User-agent: line which identifies one or more robots. Then it will have one or more Disallow: [or Allow:] commands, in separate, adjacent new lines.

For example, in the second rule set above:

User-agent: * - means all user agents
Disallow: /search - means “don’t crawl any URL that starts with http://.blogspot.com/search/…. In Blogger, this rule will block off all Labels. It’s added by default, because the Label pages just display the individual pages belonging to that label, which the robots will anyway find while crawling the rest of the site.

For more details see:

What is the use of the robots.txt file?
As you’ve probably realized by now, the robots.txt file is used to prevent robots from crawling certain areas of your site/blog.

However, remember that not all robots respect this file. For example, spam bots, which scan the web to steal email addresses, can ignore the Disallow: commands and enter those pages. So the robots.txt file is not a good way to hide your secure information.

Can I edit the robots.txt file?
Unfortunately, Blogger users cannot edit their robots.txt file. It is maintained by Blogger itself and you cannot upload your own file instead of the default one.

But, if you manage a site where you can upload files to the root domain, then you can use the tools provided by the Google Webmaster Tools (GWT) console to edit the robots.txt file. Once you have verified your blog with GWT, this is available from the Tools section of the left side navigation bar.

The Analyze robots.txt tool lets you test your rules to see what URLs they actually allow or disallow. This is good to avoid any un-intentional block offs by syntax errors in your file.

The Generate robots.txt tool has a simple user interface to create a file, even if you are not sure of the file’s syntax. Once generated, you can download the file to your machine and then upload it to your site’s root domain.

Template Variables

2008-05-21T23:06:00.007+05:30

The new Layouts templates have "template variables", which are very useful when it comes to defining the look and feel of your blog. Here are some commonly asked questions about template variables.

What is a template variable?
Where can I see them?
What is the format of a variable?
What are the different types of variables?
How can I add a new variable?
What is the scope of template variables?

What is a template variable?
A variable in programming can be considered as a placeholder for a value that can change from time to time. A variable can be assigned a value and, from elsewhere in the computer program, you can use that assigned value. Template Variables in Blogger is just the same concept applied within the scope of Blogger templates.

Where can I see them?
These variable are usually located right at the beginning of the blog skin. When you open your template Edit HTML mode (i.e. Layout -> Edit HTML), you can see a section called "Variable definitions". All the variable are defined in this section.

What is the format of a variable?
A template variable is defined in a syntax similar to XML/HTML elements, inside a <Variable> tag. However, these tags don't have a closing tag (i.e. </Variable>) nor they are empty elements (i.e. <Variable .../>).

Each variable has 5 attributes.

name: The unique name or id of the variable. The name cannot contain spaces
description: A short description of the variable. This is what works as the "display name" of the variable in the Font and Colors pane. (See figure below)
type: The type of the variable (See the next question for more details)
default: The template default value for the variable. Whenever you choose the "Revert to template default" option, it is this value that gets applied to the variable in concern.
value: The current value of the variable.

The link between a variable description and its display name is illustrated below.

What are the different types of variables?
Currently, there are 3 types of variables. They are:

color: Different color elements such as Text Color, Page Background Color etc.
font: Different fonts used in the template such as Text Font, Sidebar Title Font etc.
automatic: Miscellaneous variables [e.g. startSide and endSide, that are used to control the "reading order" (left-to-right or right-to-left) of the blog language]

font and color variables are editable both through the Fonts and Colors pane and the Edit HTML mode, whereas the automatic variables are only modifiable via the Edit HTML mode.

How can I add a new variable?
You can add new variables very easily. Copy and paste an existing variable of the type you want and provide a unique name and a description for it. If it is a font or color variable, it will be readily visible in the Font and Colors pane.

For example, to add a variable to control the sidebar text font in Minima template, you can add the following variable to the "Variable definitions" section. (Additional lines breaks are added for clarity. All of this can be in the same line)

Once added, it will be visible as follows.

But adding the variable is only part of the job. Next you have to use it in the relevant CSS selector. In this example, we need to modify the .sidebar selector and insert the line shown in red below. Note that when variables are used (i.e. referenced) elsewhere in the template, its name should be prefixed with a '$' character.

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
font: $sidebarbodyfont;
}

What is the scope of template variables?
These variables are visible and available (scope in programming terms) for use only in the Edit HTML mode of your template. Once a blog page actually gets loaded, all the uses of the variables (all $name instances) get substituted with the actual value of the variable defined in the value attribute.

They cannot be used from the blog post editor as well.

HOWTO: Customize Fonts and Colors

The Text Widget

2008-05-17T09:47:00.003+05:30

The Text widget is one of the simplest widgets available on Blogger.

You can provide a title for your widget (Label 1) and type some descriptive text in its body (Lable 2). There is a Rich Text editor (Lable 3) which allows you to apply some basic formatting such as bold face, font colors from a toolbar. The toolbar has a button to add hyperlinks as well.

If you know HTML, there is an Edit HTML mode (Label 4) which gives you more options for formatting text. Using this mode, for example, you can underline text, which you can't do using the toolbar. (See figure below for an illustration of that)

Possible Uses

Display an About description specific for a blog (Profile widget cannot do this. It will display the same About in all of your blogs)
Display some common message such as a Disclaimer on all your blog pages

Blogger Widgets

2008-05-13T22:49:00.003+05:30

Widgets are the add-ons to your blog. Some of the widgets such as Blog, Archive and Header come by default when you select a template. Also there are many other different types of widgets offered by Blogger that you can plug in using the Add Page Element option in your Layout editor.

This is an article series that will cover the details about the different types of widgets available on Blogger and their possible uses. In each of the articles in this series, you will find simple illustrations of those widgets as well as the finer details about them.

The currently available widgets are:

Text
Blog
Archive
Profile
Labels
HTML/Javascript
List
Link List
Header
Picture
Slideshow
AdSense
Feed
Newsreel
Video Bar
Logo

Last Updated: 2008 May 17

3 Columns : Dark Dots : Left and Right Sidebars

2008-05-11T09:32:00.004+05:30

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Dark Dots 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 new CSS id selectors for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper and the #sidebar sections (Do a Find using your browser)
Copy both section fully and paste below the existing sidebar sections (it doesn't have to below) and rename them to #sidebar-wrapper-two and #sidebar-two
Change the float: $startSide to float:$endSide of the #sidebar-wrapper-two section (See the code snippet below)

#sidebar-wrapper {
width:200px;
float:$startSide;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for ... */
overflow: hidden; /* fix for ... float */
}

#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

#sidebar-wrapper-two {
width:200px;
float:$endSide;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for ... float */
}

#sidebar-two {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

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 900 pixels

#outer-wrapper {
background:url("...") no-repeat 250px 50px;
width:900px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 22 pixels.

#main-wrapper {
width: 450px;
margin-right:22px;
float: $endSide;
...
}

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

Locate the section marked as /* Page structure tweaks for layout editor wireframe */
Replace that entire section with the code marked in red below.

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

body#layout #outer-wrapper {
padding: 0;
width: 900px;
}

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

body#layout #sidebar-wrapper,
body#layout #sidebar-wrapper-two {
padding: 0;
width: 200px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template!

3 Column Templates : Scribe : Left and Right Sidebars

2008-05-01T21:51:00.006+05:30

Article Series: 3 Column Templates Step by Step Guides

Here are the steps to convert a Blogger default 2 column Scribe template in to a 3 column template with 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 selector (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #right-sidebar
Change the float: $startSide to float:$endSide of the #right-sidebar selector
Change its width property to 200 pixels (See the code snippet below)

#sidebar {
width:150px;
float:$startSide;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for ... */
}

#right-sidebar {
width:200px;
float:$endSide;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for ... */
}

2) Introduce a new div element, as a child of #wrap3, to be the placeholder for the 2nd sidebar

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

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
</b:section>
</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

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

Locate the following CSS sections
Change their width property to 900 pixels

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

#main-top {
width:900px;
...
}

#main-bot {
width:900px;
...
}

#wrap2 {
width:900px;
...
}

4) Do necessary adjustments to margins, padding, floating etc

Locate the #main section
Insert a left margin of 7 pixels.
Change its float property to $startSide

#main {
width:430px;
float:$startSide;
padding:8px 0;
margin:0;
margin-left:7px;
...
}

5) Modify and expand the background images as necessary.

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 to the ones shown in red below.

Blogger Three Column Templates Explained

HOWTO: Backup and Restore your Template

2008-05-01T06:29:00.004+05:30

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

2008-04-26T11:33:00.009+05:30

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.

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.

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.

Template Variables