Blogger to the Limit

Great Reads

2000-01-01T08:00:00.003-08:00

How to Change Titles in Blogger Blogs

2009-10-02T05:00:00.000-07:00

For the purposes of SEO, it is important to have a different title on each page. I am not talking about the headings, but rather the words that appears in your web browser's title bar. You can do this very easily in Blogger.

For those not familiar with HTML, the title of the blog is located in the title bar of your Web browser. The words that are displayed in the title bar are located between the title tags in the head section as such:

<head>
<title>Blogger to the Limit</title>
</head>

The above code will produce the blog title shown in the image below:

The page title in the web browser

The title of your pages is also very important for SEO purposes. When you perform a search in a search engine, the results of your search display the page titles of each page that matches your search. As you may have also noticed, some of the keywords you search for are bolded in the page titles.

What this means, is that when you create your post titles, you should use your keywords. Your post titles should then be used in the title of your pages. By default, however, most Blogger templates don't include the post title as the page title, which is why you should change this in your template.

The changes that need to be made is very easy, and are outlined below.

Changing Your Page Titles In Blogger

To change the page titles of each post in your Blogger blog to match your post titles, simply use the following steps:

Open up the HTML layout of your blog.
Find the term <title> which will show where your page title is written within your code.
Replace the entire title tag with the following:
<title>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:blog.pageTitle/>
  <b:else/>
    <data:blog.pageName/> | <data:blog.title/>
  </b:if>
</title>
Save your template and view your blog. Click on a post to view the page titles to see if they have changed to match the post titles.

The above code simply checks to see if the home page of your blog is displayed. If it is displayed then the name of your blog is displayed as the page title.

If another page, such as a post, is displayed, then the name of the page is displayed first, followed by the name of your blog.

After making the change you will now have a more SEO-friendly blog that will perform better for you in search engines.

Using AdSense for Search With Blogger

2009-09-18T05:00:00.000-07:00

If you have used or do use AdSense with your Blogger blog, then you are probably using the AdSense for Content. Did you know you can also use AdSense for Search and display the search results directly in your Blogger blog?

Many of you have heard of AdSense and how you can make money with it by displaying advertising in your Blogger blogs. While Blogger includes a search feature, you can instead use the AdSense for Search to return search results for your visits. The best part about this is that AdSense ads are also displayed in the results automatically for you.

The AdSense for Search has been improved in recent years. You now have the ability to display the search results directly within a page on your blog. This also holds true for a Blogger blog. While Blogger doesn't natively support static pages, by using a post you can easily provide search results to a visitor by using AdSense for Search.

The steps below outline how to accomplish this.

Note:

To use Google's AdSense for Search your Blogger blog's template must have a width of at least 795 pixels for the content section. Anything smaller than that, and the search results will be cut-off on the right.

Create a backdated post that will be used to display the search results. The date of the post should match the date of your static pages.
Next, open that post in a web browser and copy the URL.
Log in to your Google AdSense account and create a new AdSense for Search ad.
Fill in the form with these values (for options that aren't listed below, you can select anything):
- Search Type: Only sites I select
- Selected sites: Type in your Blogger blogs homepage URL
- Opening of search results page: Open results within my own site
- Enter URL where search results will be displayed: Paste the URL copied from step 2.
When you are done configuring the ad, you will be presented with two codes: Search Box Code and Search Results Code. The two codes should be copied into the following locations:
- The Search Results Code should be copied into the post you created in step 1.
- The Search Box Code should be copied into your template. One way of doing this is to add an HTML/JavaScript gadget to your layout and then paste that code into the gadget.
Once the code has been added, open up your blog and test out the search. The results should be displayed in the post page you specified.

By using Google's AdSense for Search, you can easily increase the monetization capabilities of your Blogger blog. It is easy to setup and use and the ads are automatically placed within the search results.

How Blogger Generates a Post URL

2009-09-04T05:00:00.000-07:00

If you have every published a post with a long title, you may have noticed that the title is truncated when it is used in the post URL. This is because Blogger has a limitation on the number of characters is uses in the URL. Understanding how Blogger generates a post's URL is important if you want to rank well in search engines.

In my last post titled How to Create a SEO-Friendly Blogger URL I mentioned a method you can use to generate a more SEO-friendly URL. By default, Blogger will use the title of your post as the post URL.

Note:

While I use the term post URL in this post, in the blogging world the actual URL of a post is called a permalink. All blogging platforms allow you to specify using a permalink for each post since it is more search-engine friendly than using an identifier, such as id=1234.

There is a problem, however, if the post title is too long. Blogger has a 39 character limit with regards to a post's URL. This means that if your post title is longer than 39 characters, it will be truncated when the post URL is created.

While this can be frustrating, especially if you would like certain keywords to be included in the post, you can overcome this limitation. The easiest way is to use the method explained in the link above. The next method is to understand how Blogger creates the post URLs.

There are several rules that Blogger follows when it generates the URL for a post. I found a good blog that outlines how the URL is generated called What is the Blogger Post Page Filename Character Limit?. After reading this post, you should have a better understanding how the URL is created.

Understanding what will be included in your posts' URL is important if you wish to rank well in search engines. It is important that each URL contain the keywords you will be targeting. The last thing you need is for you to create a great title for your post, and the actual keywords getting truncated in the URL.

Blogger Adds Jump Breaks

2009-09-11T05:00:00.000-07:00

In the past if you wanted to display post excerpts on the homepage, you would use HTML and CSS to accomplish this. Blogger has solved this problem with the use of "Jump Breaks". This welcomed feature has been requested for some time and it is nice to finally see it implemented.

On September 9, 2009 the Blogger staff released a much requested feature - the ability to display post excerpts on the homepage of a blog. The workaround was always to use HTML and CSS to accomplish this task, but now it is included within Blogger itself.

In Wordpress, you would include <-- more --> in your post. The text before that tag would be displayed as the excerpt on your homepage, while everything after it would be displayed when you clicked the "Read more" link.

Blogger has now included the same feature for Blogger blogs. This should be a welcome change for all who have been using the old HTML method. I have updated Blogger to the Limit to include this new feature, and you can see it working when you view the post summaries on the homepage.

There is an easy-to-follow help article called Creating 'After the jump' summaries that walks you through the process of using this new feature.

Control Your Blogger Template with If Statements

2009-08-18T06:00:00.000-07:00

You can hide specific elements within your Blogger template simply by utilizing the if/else statement. By learning how to properly use conditions, you can make different elements appear on different pages.

Unlike Wordpress, a Blogger template consists of a single XHTML file. This file is used to display all the pages of your blog, including the home page, each post page and listing pages, such as archives and category listings.

The issue with using a single file is that you may want to display certain elements of your blog on only specific pages. For example, you may not want to display the date on static pages, but still display it on post pages. You may also want to display specific text on your home page, but not on other pages.

While performing such actions may seem complex, it is rather simple once you understand how to use "if/else" statements in your Blogger template.

If you have done development in other programming/scripting languages in the past you are familiar with "if/else" statements. For those new to programming, let me explain how they can be used to display/hide specific content on your blog.

What is an If/Else Statement?

An if/else statement simply performs a test on a condition that you specify. If the condition is true, then certain code below the if statement is executed, while a false condition will execute the code below the else statement.

An example of an if/else statement is seen below:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p>This is the home page!</p>
<b:else/>
<p>This is NOT the home page!</p>
</b:if>

The above code checks to see if the current page URL (data:blog.url) is the same as the home page URL (data:blog.homepageUrl) of the blog. If it is, then the condition is true, and the phrase "This is the home page!" is displayed on the page.

If the current page is not the home page, such as a post page, then the condition is false and the code below the else statement is execute. In this case, "This is NOT the home page!" is displayed on the page.

The above code also shows how you can control the displaying of content on your blog based on the type of page that is displayed. Surrounding specific lines of code in your template with the above if/else statement, you can make your home page appear different than other pages.

If you visit the home page of this blog, Blogger to the Limit, you can see how the home page looks completely different than the other pages. I use if/else statements to control what is displayed on the home page.

Backup Your Blogger Template Before Editing

2009-08-20T08:00:00.000-07:00

Before editing your Blogger blog's template it is important to first make a backup copy of the template. Doing so will allow you to restore the template in case you make a mistake. This post will outline how to backup and restore a Blogger template.

Imagine you have a look at your blog and realize you would like to make some changes to how it looks. You go ahead and open your template in Blogger and quickly switch to the template's HTML editor.

You expand all the widgets so you can see all of the code and begin editing. After some time, you save the template and open you blog in a new window to preview your changes. As you blog is rendered in your web browser, you are shocked to see that your entire blog layout is messed up.

You quickly switch back to the HTML editor to correct what you had done, but you can't seem to find all the changes, or at least change the template back to how it was originally.

Many people who edit their template have faced a fate similar to was was described above. Once good piece of advice when editing your Blogger template is to always backup the template before making changes.

Blogger makes it very easy for you to backup your template. You can do it as often as you need. To backup your template, use the following steps:

Open up your dashboard in Blogger, so you can see a list of all your blogs.
Under the blog that has the template you want to backup, click the "Layout" link.
Once the "Page Elements" for your template is displayed, click the "Edit HTML" link to view the HTML code for the template.
Click the "Download Full Template" link above the editor to download a copy of you template to your local computer.

Location of 'Download Full Template' link

With your template safely backed up onto your local computer, you can now edit your blog's template without any worries. If you make an unrecoverable mistake editing the template, you can easily restore the template by using the following steps:

Open the HTML editor for your blog's template.
Click the "Browse" button and then navigate to the template on your local computer.
Click the template file, and then click the "Open" button.
Back on the HTML editor page, click the "Upload" button to upload your template into Blogger.
Scroll to the bottom of the page and click the "Save Template" button to accept your template changes.

Once you have done that, your backed up template will now have been restored and you can try making the changes again. If you make a mistake again, your backed up template is still located on your local computer for another restore.

Structure Blogger Template Code With Includables

2009-08-24T08:00:00.000-07:00

Includables are used extensively throughout any Blogger template. They help to organize the template code by breaking it into smaller, and more manageable, pieces. Let's look at how to use includables.

If you have looked at any Blogger template you would have noticed that all the widgets that are added are comprised of items called 'includables'. These help to break up the template code into smaller pieces that are put together like a puzzle.

Imagine if you had a widget, and within that widget were several lines of code that were repeated several times. It is easy to simply copy that piece of code throughout that widget. What happens if you decide to change that code later? You would have to find every location that code is used and make the changes.

Includables reduce the effort required to edit that code. You can simply create an includable, add the repeated code into the includable, and then include that includable in all places where you want the code to be placed. Now if you wanted to change the code, you simply change it in one location - the includable.

About Includables

Includables allow you to reuse common code throughout a widget. It also allows you to break up your template code by functionality. Let's look at a real template example. Many templates have code similar to the following:

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<p class='date-header'><data:post.dateHeader/></p>
</b:if>
<b:include data='post' name='post'/>
<b:include data='post' name='comments'/>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<b:loop values='data:posts' var='post'>

This code will loop through the posts and display the post information on your blog. You will notice that it uses a few includables: post and comments. Let's concentrate on the post includable, but keep in mind that the comments includable is created the same way.

The call to the post includable looks like:

<b:include data='post' name='post'/>

This line is calling the includable called "post", indicated by "name='post'". It is also passing data into the includable, which is the post data. You can see this from "data='post'". The post data contains all the information, including content, labels, and date published.

Includable Definition

Now that we saw how the post includable is being called, let's look at the actual includable definition.

<b:includable id='post' var='post'>
... code to display the posts is here (too long to display) ...
</b:includable>

This is how includables are defined in a widget. As you can see there are two parameters that can be associated with an includable:

Parameter	Description
id	The name, or identifier, of the includable.
var	(optional) A variable that can contain data passed into the includable.

Note:

The "id" parameter from the includable definition is the same as the "name" property from the line that calls the includable.

The var parameter in the post includable will contain the post data contents since that is what was passed into it in the first code example. This now allows the post includable to display all the data in a post onto a web page in your blog.

When a visitor views one of your post pages, all the code that is between "<b:includable id='post' var='post'>" and "</b:includable>" will now be included in any location where the post include is called. Calling this include in another location in the widget will cause the HTML code to be inserted there as well when a page is requested. This is how includable code can be re-used.

One thing to keep in mind, however, is that you can only call includables that are defined in the same widget. This means you can't call the post includable from an archives widget. It is also important to note that each widget has an includable called "main". This includable is "executed" first so the widget display begins with the "main" includable.

While it may seem complex, or difficult to understand, if you plan on working with Blogger templates it is important to understand how includables work. It is best to fist start editing existing includables, and then create your own. With enough practice you will be able to create your own great, modularized, templates.

Manage Headings in a Blogger Template

2009-08-26T05:00:00.000-07:00

One aspect of SEO that may get overlooked is that of properly using the headings tags. There are certain "rules" that you may follow for all your pages to help you rank better in search engine results.

I have edited several Blogger templates and notice that they all have similar structure with both the layout and HTML tags. Since Blogger uses a single template file for all pages, it is important to look at the template and see how some of the heading tags are used that can affect SEO.

By default, some heading tags will be used for the same text on all pages. For SEO purposes, you may not want the H1 headings to be the same on all pages. Below are several examples of what is currently available in templates, as well as some simple changes you can make to improve the templates.

Changing the H1 Tag for the Blog Title

Most Blogger templates that I have seen use the H1 heading tag for the title of the blog. While this is good for the homepage, you will probably want the H1 tag to be the post title on the post pages. With the single file format of a Blogger template, you will need to use an "if" statement to help control this tag.

Many templates include a line in the header section that looks similar to the following:

As you can see, the title of the blog (displayed within the title includable) is surrounded by the H1 tag. This means that on all your blog pages, the title of your blog will use the H1 tag. For SEO purposes, you may want to move the H1 tag to the post title for the post pages.

To accomplish this, we would need to include an if statement that checks the page type to determine if it's an index page, and if it is then use H1 for the blog title. For all other pages, change the blog title to display as regular text that has the same styling as the H1 tag. The code to do this is shown below.

<b:if cond='data:blog.pageType == "index"'>
<h1>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>

This blog uses the above code, and you can see it when you view the source. Open the homepage and look at the blog title in the header. You will notice that it is within the H1 tag. Next, view a post page an you will see that it is no longer within the H1 tag, which has now been moved to the post title.

Let's look at how to move the H1 tag to the post title.

Using H1 for Post Titles

Most blogger templates assign the H2 tag to the post title, regardless of the page that is being displayed. While this is good for the homepage, search pages, archives, and category pages, it isn't for the post pages.

The post title for all pages is displayed in the code similar to the following:

You can see in the above code example the H2 tag is used to display the post title. Post pages should have the title as the H1 tag instead of the H2 tag, since it is the title of the page.

Similar to the blog title, an if statement can be used to change the post title from an H2 to an H1 tag when a visitor is displaying a post page. The code below shows how to make these changes.

<b:if cond='data:blog.pageType == "item"'>
<h1 class='post_title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
<b:else/>
<h2 class='post_title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

The above code checks to see if the current page is an "item" page, or post page. If it is a post page, then the post title is surrounded by the H1 tag. For all other pages, the post title is then displayed using the H2 tag.

The two changes shown in this post are to be used in conjunction with each other to ensure each page on your blog contains an H1 tag. By making the above changes to your template, you may help to improve your ranking within the search engine results pages.

How to Create a SEO-Friendly Blogger URL

2009-08-31T05:00:00.000-07:00

When you specify the title for a Blogger post, that title is automatically used as the URL for the post. The problem is that Blogger truncates the title to about the first 39 characters. This can lead to some problems with the post URL and SEO.

The one limitation with Blogger that I have had to learn to work with is that of the post URLs. When you create a post, the title of the post is automatically used for the post URL. The one problem with this is that the URL is limited to a maximum size of 39 characters.

Note:

While there is a 39 character limit on a Blogger post URL, there are other factors, such as the number of words in the title, that determine how much of the post title is used for the URL.

With regards to SEO, it is important to include your keywords in the URL as well as the title. If the keywords are included outside the first 39 characters of the post title, then they won't appear in the URL.

To work around this limitation, you can first create a post with a title you want to appear in the URL, and then rewrite the title for your visitors.

The following steps show you how you can do this:

In Blogger, create a new post.
In the "Title" field, enter a title that contains your keywords and doesn't contain any non-essential words. Ensure your title is shorter than 39 characters.
Once you create the title, write your post.
Publish the post so the post URL is created. The URL should include your entire title without any truncation.
Next, edit the same post you just created.
Modify the title to make it more readable for your visitors.
Click the publish post button again. Your post should now have the original SEO-friendly URL with the new title.

The URL for this post was created with the steps outlined above. You will notice that the title of this post doesn't match the URL.

Blogger Adds Sitemap to Webmaster Tools Automatically

2009-09-09T05:00:00.000-07:00

If you own or manage a website or blog, you have probably used Google's Webmaster Tools. These tools allow you to track how your site is doing in Google's search results pages. If you are on Blogger, than your Sitemap gets added automatically. Let's see how you can find it.

When you start a Blogger blog, Blogger will automatically register your blog with Google's Webmaster tools. If you haven't done so, I suggest you sign up with and start using Google's Webmaster Tools to monitor your blog in Google.

Using Google's Webmaster Tools doesn't guarantee that your blog's posts will get listed, but it does show if there are any problems, who is linking to your blog, and what keywords people are searching for in Google.

The biggest benefit is that a Sitemap tells Google about the layout of your blog, which means it may find pages it might have missed without the Sitemap.

As mentioned, your blog is automatically registered with the Webmaster Tools, and your Sitemap is also submitted. To see if the Sitemap is submitted, you can use the following steps:

Log into Google's Webmaster tools.
Click the your blog's link in your dashboard.
From the menu on the left, click "Site Configuration" link to expand the list.

Webmaster Tools - Site Configuration link
(Click to enlarge)
Next, click the "Sitemaps" link to display a list of Sitemaps for your Blogger blog.

Webmaster Tools - Sitemaps link
(Click to enlarge)
A list of your Sitemaps are displayed. Click the "All" link on the right to see all your Sitemaps.

Webmaster Tools - Sitemaps list
(Click to enlarge)
All Sitemaps currently registered in Webmaster Tools are display, which includes sitemaps that were automatically detected by Google that you didn't submit.

Webmaster Tools - List of all Sitemaps
(Click to enlarge)

The robots.txt file of your Blogger blog automatically contains the location of the Sitemap for your blog. This is what Google finds and uses when it crawls your site.

Of course, you can also manually submit a Sitemap if you choose. There is no harm in adding another. You can easily add a sitemap for your Blogger blog into Google's Webmaster tools yourself.

About

2000-01-01T08:00:00.000-08:00

Blogger to the Limit was created to showcase what is possible with a Blogger template. All the pages that are shown on this blog are display directly from a Blogger blog.

I have tried to reduce the number of outside code and files to show what is truly available to you with a Blogger template. The template itself was downloaded from BTemplates, but I have since modified the underlying Blogger code.

Many of the changes that I have done to this template can be found on my main blog, Technically Easy. At the end of each post, or page, I have indicated how you can create similar page on your Blogger blog. For those pages that don't have any instructions, I have yet to create them, but I will in the future.

Technically Easy

I started Technically Easy in June 2007 as a way for me to write down what I have learned through technical issues that I have faced.

From June 2007 to August 2008, Technically Easy was a Blogger blog. I learned much about Blogger templates during that time, and have written several tutorials on editing templates. Since August 2008, however, I moved my blog to a self-hosted Wordpress blog. While it has been moved to Wordpress, I continue to write posts relating to Blogger templates.

Many of the pages you find here will reference the tutorials I wrote on Technically Easy. Using these tutorials, you too, can push your Blogger template to the limit.

Page Information

This is a static page created by using a backdated post. By doing this, I can control how this post is displayed from within the template. For example, you will notice that the date is missing and you are not able to leave a comment.

Static pages are very useful for such pages as an "About", or "Contact" page. To use a page such as this in a navigation bar, you simply open the page in your web browser, copy the URL and then create a link pointing to the URL.

Message Sent Confirmation

2000-01-01T06:00:00.001-08:00

Message sent confirmation page.

Your message has been sent. I will respond to any request you may have in the next little while.

Thank you!

Blogger Template Tutorials

2000-01-01T06:00:00.000-08:00

This blog was created using various tutorials found on my other blog, Technically Easy. There are serveral tutorials that provided step-by-step instructions on modifying your Blogger template. This page lists many of the available tutorials.

Creating a Static Page in Blogger: This post outlines the process involved in converting a regular Blogger post to a static page. It will use a date from a backdated post to determine what elements in the template to hide to display the post as a static page.
How to Hide the Posted By Line in Blogger: If you are confused how to hide the "posted by" line in your posts or static pages, then you should read this post. This post will outline the steps needed to ensure the "posted by" line doesn't appear in your blog.
Remove Navigation Links For Static Pages in Blogger: The next and previous navigation links at the bottom of posts are useful for visitors to cycle through your posts. For static pages, however, you probably don't want these links displayed. This post shows how you can hide these links for specific pages.
Hiding Static Pages from Homepage in Blogger: If you have just started your blog, and wish to create static pages, you probably don't want them showing up on your homepage as posts. This post will show you how to prevent your backdated static pages from appearing as posts on your homepage.