Standard Ad Units

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

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 More Gadgets

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