Blogazines

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.

CSS Basics – Part 4

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.

Related Posts

• CSS Basics - Part 1
• CSS Basics - Part 2
• CSS Basics - Part 3

CSS Basics – Part 3

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.

<div id=”outer-wrapper”>
</div>

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.

Related Posts

• CSS Basics - Part 1
• CSS Basics - Part 2
• CSS Basics - Part 4

CSS Basics – Part 2

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.

Related Posts

• CSS Basics - Part 1
• CSS Basics - Part 3
• CSS Basics - Part 4

CSS Basics – Part 1

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.

Related Posts

• CSS Basics - Part 2
• CSS Basics - Part 3
• CSS Basics - Part 4

Sidebar Has Fallen Down!

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.

How Visitor Tracking Works

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.

<!-- 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>
<!-- Copyright (c)2006 Site Meter -->

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)

Adding a Simple Navigation Bar

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.

<a href="URL">Link Text</a>

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 an image beside a URL

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

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

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

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

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

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


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

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

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

For example, the following HTML:

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

will be displayed as follows.

The Blogger Guide Web Site

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

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

Related Posts

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

URLs

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 href="url to link to">Link Text</a>

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

<a href="url" target="_blank">Link Text</a>

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:

1. Highlight the text that should be linked
2. Click on the Hyperlink icon
3. 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.

Template Variables

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)

<Variable
name="sidebarbodyfont"
description="Sidebar Text Font"
type="font"
default="normal normal 100% Georgia, Serif"
value="normal normal 100% Georgia, Serif"
>

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.

Related Posts

• HOWTO: Customize Fonts and Colors

The Text Widget

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

Meta Tags FAQ

Meta tags are used to add additional information about the pages in a site/blog. A list of common questions and answers regarding meta tags are given below.

What is a meta tag?
What are the different types of meta tags?
How do I add one to my blog?

What is a meta tag?
The word meta carries the meaning about. For example, in database theory, the term metadata means data about data held in a database. Similarly, the meta tag carries information (or data) about the content in a web site or page.

The general format of a meta tag is:

<meta property value/>

where the property signifies the name of a property to which the meta tag relates and the value is the actual value taken by that property. The value of the meta tag is always provided using the content attribute.

What are the different types of meta tags?
Meta tags differ by the type of the property (see above question) they describe. These properties are defined using the following attributes of the meta tag. (Note: This is not a complete reference of the attributes. Only some of the commonly used ones are listed here)

name
The name attribute is used to define some of the most commonly used meta tags, namely, author, description and keywords.

• author - used to define the author of a web page
• description - used to provide a general description about a web page
• keywords - used to provide a list of keywords that the search engines can use in indexing a web page
  

<meta name="author" content="ids"/>
<meta name="keywords" content="Blogger Tips, Blogger Guides, 3 Column Template Tips"/>
<meta name="description" content="A blog containing tips and guides on Blogger with clear and simple technical explanations"/>

http-equiv
This attribute provides another very commonly used functionality, redirecting. If used normally, it will only instruct the browser to refresh (i.e. reload) a page after a specified number of seconds. However, by providing an alternate URL, it is possible to load a different page when refreshing; i.e. a redirect is affected.

Reload the same page after 5 seconds:

<meta http-equiv="refresh" content="5"/>

Redirect to the given URL (specify 0 as time to affect an immediate redirect):

<meta http-equiv="refresh" content="0;url=http://example.com"/>

How do I add one to my blog?
The meta tags are added to the Blogger template. Go to the Edit HTML mode of your Layout editor and paste the meta tag after the <head> tag. See the figure below for an illustration of this step.



Reference:

• W3Schools
• Wikipedia
  

HTML Entities

HyperText Markup Language (or HTML as commonly known) is the language used in writing up documents for the web. This language provides the necessary markup to define the structure and content of a web document (or page). Each of these markups are formally called HTML elements. Usually an element consist of an opening tag and a closing tag, which mark the beginning and the end of the element respectively. For example the paragraph element, which marks up a paragraph of text, has the opening tag <p> and the closing tag </p>.

As you just saw, each HTML element is enclosed within angle brackets or within the two characters '<' and '>'. Since these two characters have a special meaning within the context of an HTML document, it is not possible to literally use them in a document. So what if you want to include these characters in the actual page that is shown on the browser? The answer is HTML entities.

The HTML has a set of characters called HTML entities to be used when including the characters that have special meaning in the language, inside an HTML page. For example, if you want to include an HTML or XML code snippet in your document, then you have to use these entities.

An entity consist of 3 parts, all written together without any spaces. They are

• the ampersand character ( & )
• an entity name or a number
• a semicolon

For example, the '<' character is written as '&lt;', where 'lt' is the name of the entity. You might ask... if the ampersand character is used in all entities, how do I represent the ampersand character itself? Good question. The answer is, there is another entity to denote the ampersand character which goes as '&amp;'. It can get somewhat confusing at times. This type of mechanism is called an escape sequence in programmers' jargon.

To illustrate the use of entities let's take the following simple snippet.

<html>
<head>
<title>Test Page</title>
</head>
<body>
<p>
Hello World!
</p>
</body>
</html>

To get the <html> to appear like that on the browser, what I typed in to the actual HTML code is &lt;html&gt;. Confused? No it's not that difficult. This is what happens. When the browser reads an HTML document from beginning to end (yes, the browser also reads it as we do; technically this is called parsing) every &lt; that it comes across will be replaced with the single character '<', before displaying the page for the human readers. Similarly, every HTML entity will be replaced with its corresponding display character.

What's the use of HTML entities anyway? Well, as I said before, one use is when we want to display code snippets in our page. Then there are some characters that we cannot type using the keyboard such as the '£' and the '€', which we can insert using HTML entities. Here's a full list of HTML entities from the W3Schools site.

A simple technique to replace entities
If you want to include a code snippet in one of your articles, you might have to replace many less-than and greater-than signs with the corresponding entities. This can be pretty cumbersome even for a few lines of code.

You can use a very basic text editor such as the Notepad (on Windows) to do it easily. Here's how.

1. Copy the code snippet in to a new Notepad document
2. Go to Edit -> Replace... (or Ctrl+H) and type '<' in the Find what box. Type '&lt;' in the Replace With box.
3. Click Replace All
4. Repeat this for all the entities that you want to replace. (For example, '>' with '&gt;' and '"' with '&quot;')

The following figure illustrates this simple technique. You will find it very useful whenever you need to parse a code snippet that includes special characters to be embedded inside an HTML page.