Variable for File Host Location

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

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

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

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

*/

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

Related Posts

• Blogger Template Variables

Screen Resolution and Template Size

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

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.