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.

Blogger HOWTOs

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

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

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

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)

Contextual Advertising – AdBrite

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

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