I came across a post extolling the virtues of linking your Blogger template to an external stylesheet. By default, the Blogger template contains its own CSS, wrapped up in a couple of style tags. That's what MIB does too. Now, it's easy to save your CSS file separately and link to it from within your Blogger template file, and it's normally good practice to follow this procedure when designing normal HTML files (for some of the reasons listed in the linked article). But on Blogger pages it's a BAD idea. And here's why:
You will have to pay for the bandwidth. Let's say your blog gets 500 visitors a day and your style sheet weighs in at 7K. That's a total of 3.5M bandwidth you provide everyday, or 100MB a month. Blogger is free in every way; it pays for your bandwidth and has plenty of it!
There is little or no gain in performance. Let's take the example of a 7K style sheet again. Of course, the actual text included within the style tags won't amount to 7K; it'll probably be around 5K (a separate file contains meta-data that adds to its size). If your average visitor visits 3 pages on your site s/he uses a total of 15K worth of styling information. If the blogger file linked to an external file s/he would use 7K, representing a saving of 8K. Even on a dial up connection, this would represent a tiny amount. If you are really worried about bandwidth usage, make sure your page doesn't display any non-essential images, and give users the choice of viewing images by providing a linked thumbnail. Remember, by using CSS instead of inline styling, you're already doing your bit!
One Blogger page creates all the others. The main reason I recommend using external style sheets when designing non-Blogger sites is that it makes editing several pages a pain free operation. Simply edit the one CSS file and all HTML files that link to it are affected. This obviously beats editing 20 separate pages! However, Blogger doesn't work like that. The template file contains all the information required for every single page on your blog; editing this one file affects all the others. In fact, linking to an external CSS file is actually more cumbersome in this case, as you have to open it in your text editor, and then upload it to your webspace using an FTP client.
It's easier to distribute one file than two. If you do want to share your template, you will have to share the CSS file as well (or at least provide a link so it can be downloaded). And then what if it proves popular? Say 50 bloggers start to use it, linking to the copy on your webspace. Before you know it, you're paying for GBs of bandwidth a month!
Tuesday, November 20, 2007
To link or not to link?
Posted by triveni at 9:47 PM 0 comments
Murder is Bad - A Guide to Customising Your Blogger Page
If you're wondering how to customise your blog, here are a few pointers as to where to begin. These notes presuppose the following:
A knowledge of HTML and how HTML documents are structured
A knowledge of CSS
Log in to your blog and head to the template if you want to make any alterations. The template is an HTML file that contains some CSS styling information, some standard HTML and a few bits of Blogger code that tell Blogger what to put on the page, and when. If you want to take a close look at the file I suggest copying the contents and pasting them into your favourite text editor. Note: this one file does a lot of spade work - it generates every page on your blog.
The Blogger template consists of three entities:
The CSS (found enclosed in Style tags in the head of your Blogger HTML file).
This controls the appearance and layout of your page.
The Blogger code.
This retrieves information from your blog database (e.g. the posts, the comments, the title, your profile) and determines on what pages it appears. For example, you could tell Blogger to display all of a post's comments only on its own page, rather than on the blog's home page. The CSS determines where on the selected page the information will appear.
The HTML.
This allows you to add content that is not on your blog database (e.g. a link to an external site). It also allows you to wrap items from the blog database in normal HTML tags (e.g. you may want to place the blog title in some h1 tags. You would then use CSS to customise the appearance of the h1 tag.)
Assuming you have some knowledge of CSS and HTML, the only challenge is in working out how the Blogger code works. Luckily, Blogger code comes in the form of HTML-like tags, so it's easy to learn.
Simply remember that there are two types of tags:
Item tags
Tags that tell Blogger to retrieve information from your blog database, and put it on the page. Like HTML tags, these are enclosed by angled brackets. Unlike HTML tags, they are also enclosed by dollar signs. Example: <$BlogTitle$> - tells Blogger to display the Blog's title on the page.
Page tags
Tags that tell Blogger when to display the information retrieved by item tags. These are only enclosed by angled brackets and, like HTML, come in pairs. The second page tag is closed with a forward slash (again, just like HTML). Example: Any information that an item tag retrieves (or any HTML) enclosed in
Posted by triveni at 9:43 PM 0 comments