To display elements of your layout on certain page types, you will need to edit your blog's template code.

Be sure to make a full backup of your existing template before attempting to use the information in this tutorial!

To make a backup of your template, go to the Edit HTML page in the Layout section of your blog's dashboard. Then simply click on the "Download full template" link near the top of the page.

This will enable you to save your template as an XML file to your computer, which you can use to restore your template if you accidentally mess things up!

How the layout tags work

The <b:if> function tells Blogger we are setting conditions for the following section of content.

To control whether elements are displayed for a particular page type (ie: index, archive or item pages) we add the data:blog.pageType tag to the b:if statement, and complete this by stating which type of page where we would like this content to be displayed.

After this tag, we add the code or content to be displayed. Then finally we close of the b:if conditional statement with a </b:if> tag.

Trust me, this is not as complicated as it sounds! Let me give you an example.

If I wanted to display a "Welcome to my blog" message only on the home page, I could use the following section of code:

<b:if cond='data:page.type == &quot;index&quot;'>
Welcome to my blog!
</b:if>

This code roughly translates as:

If this is the home page, display my "Welcome to my blog" message.
If this isn't the home page, don;t display anything here!

When we can translate the code into something more understandable, it becomes easier for us to use!

The three different page types

In the example above, I wanted to display my "Welcome" message on the home (or index) page.

In total, there are three page types for which you can use a similar statement:

• index (the home page)
• archives (to be displayed when readers view your archive pages)
• item (the individual post page)

We can replace the "index" section in the above example with either "archives" or "item" instead if we prefer to display only on archive or item pages.

To clarify:

If I want to display my welcome message on archive pages, I would use this section of code:

<b:if cond='data:page.type == &quot;archive&quot;'>
Welcome to my blog!
</b:if>

If I want to display this only on item pages, I would use this code instead:

<b:if cond='data:page.type == &quot;item&quot;'>
Welcome to my blog!
</b:if>

In your own blogs, of course, you may not wish to use this function to display a welcome message! In place of "welcome to my blog", you can insert any type of HTML code you like, such as an image, a hyperlink, and even an entire widget as we will explore below.

You can also wrap existing template code inside the b:if statements: simply type the first line above the section of content, and type the closing </b:if> tag directly below.

How to display widgets on certain page types

When we come to look at how widgets can be displayed on certain page types, the method is slightly more complicated (but not much!).

We cannot wrap an entire widget section in the b:if tags:

Instead, we must check the "expand widget templates" box near the top of the screen, and place the b:if tags just inside the b:includable tags which appear in the expanded widget template code.

Here is a diagram which displays where to add the two b:if lines to make a widget display only on the home page (click on the image for a larger version):

To clarify:

Place the initial <b:if cond='data:blog.pageType == &quot;index&quot;> tag just after the opening <b:includable id='main'> tag.

Place the closing </b:if> tag just before the closing </b:includable> tag.

Note: if you paste the sections of conditional code in the wrong place, you will receive an error message and cannot save your modified template code.

The "if not" statement

Let's say I wanted to display my "Welcome to this blog" message on all page types except for post pages. It would be much easier to say "if this is not an item page, display my message" than to use two seperate statements for archive and index pages.

For this, we can use (what I call) the "if NOT" tags.

In the examples above, you will notice the page type statement contains two "equals" symbols before the page type, like this:

<b:if cond='data:page.type == &quot;item&quot;'>

The doubling of the equals symbols basically tells Blogger:

If this page IS this particular type of page, display the following code.

To tell Blogger to display a section if the page is NOT a particular page type (for example, if the page is NOT a post page), we can substitute the first equals sign with an apostrophe, like this:

<b:if cond='data:page.type != &quot;item&quot;'>

The closing </b:if> tag should remain the same.

To clarify:

In the examples above,

== "[page-type]" (with two equals signs)

This means "If this IS the specified page type, display the content"

!= "[page-type]" (with an exclamation mark followed by one equals sign)

This means "If this is NOT the specified page type, display the content.

Note: these examples are just a part of the complete <b:if> template tags; for the entire conditional page type function to work, you will need to use the complete tags, as referenced above.

There are some limitations...

Unfortunately, there are some limitations when using page conditional tags in Blogger templates which I haven't yet been able to work around:

The "index" page type also functions for search pages and label pages.

Blogger's help center does state that one of the page types is "main", which refers to the home page.

However, using "main" in the pageType statement has never worked for me. Instead, we can use the "index" page type (not referenced in Blogger's help pages for some strange reason...), though this will also affect the search pages, which includes label pages too.

We cannot display elements only on certain page URLS

A few readers have asked if it is possible to display sidebar widgets only on certain post pages (which would be rendered by their unique URL).

I have tried many combinations of template tags, HTML and JavaScript code to accomplish this, but have had no success with this so far.

I have a feeling that Blogger may soon introduce password protected pages (since this is on the current wish list for user voting), though until such template tags are introduced, we are unable to display template elements for certain post URLs.

If anyone has successfully coded either of these two functions, please do get in touch to let me know how it may be achieved in Blogger!

Conclusions

Using the conditional page type function in our templates, we can choose to display widgets and other blog content only on index, archive and item pages. We can also choose not to display specified content on these page types.

I hope this tutorial has offered a good overview of how the b:if and data:page.type template tags can be used in your Blogger templates. Please let me know if this has been useful for you, or if there is anything you would like explained in more detail by leaving your comments below.

While you may think your blog loads quickly when viewed on your own computer, you should be aware that your visitors may be using different (and possibly slower) connections to access your pages.

The aim of a fast-loading blog is to ensure your pages load in a reasonable time for all connection types.

Those using dial-up will undoubtedly be used to slower page loading times than visitors who have DSL access; however you must also consider that search engine spiders need to access your site and can index pages much more quickly when a site is optimized for speed.

Find out how quickly your site loads

One of the best tools I have found for understanding page loading time is Web Optimization's web page speed report.

This tool is very easy to use: simply type your blog's home page URL into the text box, and hit the "Submit Query" button:

It does take a few minutes to parse the information from your website, though once the page has loaded, you will see loads of useful information about your site.

Now I admit that the information in this page can seem quite intimidating! This service is generally aimed at experienced webmasters who understand the technical details of HTTP requests, external objects and so on. The section we are most interested in is the "Analysis and Recommendations" which will look something like this:

At a glance, we can see which areas of our blogs require some tweaking in order to load more quickly:

• The sections highlighted in green are the areas of the site which have optimal performance, and do not need to be changed.
• The sections highlighted in yellow are not critical, but could be optimized for better loading times.
• Those sections highlighted in red demonstrate areas which really slow down page loading time, and are top of the list for immediate optimization!

If all of these sections display in green and yellow when using this tool, you have little to worry about in regard to your page loading time. However, if you see many red sections you are advised to make some changes to your blog, or potentially lose readers due to excessive loading times!

Ideally, we need to work towards a page loading time of under 8 seconds using a 56k dial-up connection (page loading times will be much faster for DSL and T1 connections).

To achieve this optimal loading time, we need to try to follow these guidelines:

• The overall size of the page should not exceed 80kb
• Use as few external JavaScripts as possible
• Try not to display many images on each page, both in your posts and blog template
• Aim for the smallest file size possible for your images
• Reduce the size of your CSS (style) section wherever possible!
• Make few HTTP requests (in other words, aim to have scripts, images and any other external elements on as few servers as you can!)

This may seem like a lot of work, and if you are new to blogging or web design, it may also seem bewildering! So rather than focus on each factor in great technical detail, I'm going to suggest 6 useful methods you could use to reduce your blog loading time dramatically.

1. Remove any widgets/scripts you don't really need

Unofficial Blogger widgets and JavaScripts can add some great interactive elements to your layout. Unfortunately, each different widget/script you use will need to be referenced from a different server (known as HTTP requests), and will slow down page loading time.

So take a look at all of the widgets and scripts you use in your Blogger layout:

• Do you really need to have each and every single widget?
• Does each widget offer some value to your readers?
• Would your readers really notice (and complain) if you removed a few of these widgets/scripts from your layout?

If you answered "no" to these questions in regard to some of the scripts you use, you should consider removing them from your template altogether.

I know that widgets can help your blog appear more pretty, but consider the impact on your page loading time: you could be losing precious readers if these slow your page down!

2. Try to reduce the amount of images you use in your layout

Loading externally hosted images is another high contribution to your page loading time. So if you use a lot of image-based buttons; feature many image widgets in your sidebar, or use a template which is heavily image based, try cutting down on these to see if this may help your blog load more quickly.

Bonus Tip!

If you really don't want to reduce the number of images you use in your template, you could host these with Blogger instead of an external image host.

To do this, create a new blog post, and upload all of the images you would like to use to this post. These images will then be hosted on one of Blogger's image servers.

Preview your post, and right click on each of these images. You should be able to copy the image location, which you can use to replace the image URLs in your template code.

Using this trick reduces the number of HTTP requests for your images: all of the images you use will be hosted by Blogger, rather than a completely different host. This can have a dramatic impact on your page loading time, especially as Blogger's servers are hosted by Google (which in theory, should be one of the most stable hosts in the world...)

3. Reduce the file size of your images

Another method of reducing the impact of images on page load time is to reduce the file size (not actual size) of all images used (whether in posts or layout).

Many image manipulation programs allow you to optimize images for the web, which reduces the overall file size (in bytes and kilobytes) of the image.

You may also like to try using an online image optimizer to reduce the size of your images. There may be some loss of quality (especially for larger images) but on the other hand, your overall page loading time will be reduced.

4. Simplify your CSS

The CSS section of your Blogger template takes up a lot of the overall file size of your blog pages. This is because each element of your <b:skin> (or <style> for those using classic Blogger templates) is featured on a separate line. There is a lot of unnecessary "white space" (page breaks, indentations and spaces) and possibly HTML comments.

By eliminating unnecessary white space and HTML comments, you can reduce the overall size of your blog pages. However, doing this can make it difficult to edit the style section afterwards!

If you would like to improve page loading time by optimizing the style section of your Blogger template, here is the easiest method you could use:

1. Copy all of the code between the <b:skin> and </b:skin> tags in your blog's HTML code (for classic template users, this is the section between the <style> and </style> tags).
2. In a new browser window or tab, visit the CSS Optimizer website, and paste your style code into the "direct input" box.
3. Click the "Optimize" button (there is no need to check the box which says "do not remove line breaks").
4. The next page will offer your optimized style code inside a text box, along with data of how much this has been compressed.
   
   
   
   Copy all of this code to your clipboard.
5. Replace all of the existing code in your Blogger template (between the <b:skin> or <style> tags with this optimized code.
6. Preview your template to ensure your template displays properly with these modifications, and finally save your template.

5. Optimize the placement of scripts/widgets in your template

There will undoubtedly be some externally hosted widgets and JavaScript's you would like to keep in your layout. To improve the impact these have on blog loading time, you can move these towards the bottom of your template code.

If you use a widgetized layout, move such widgets to your right-hand sidebar (or possibly even the footer section) of your blog. This will ensure that your blog content will appear before these scripts begin to load, so visitors can appreciate your posts while the page continues loading.

6. Reduce the number of posts which appear on your front page

Each post which appears on your home page will add to the overall file size and loading time of your blog.

Even if you only display summaries of your posts on the home page, the entire HTML code for your posts will be visible in the source code. This is because the post summary hack hides the main part of the post using CSS.

When choosing how many posts to display on the home page, you should consider the general length and style of your blog posts.

If you write around 5-600 words for each post, using few or small images (and infrequent multimedia), then 5-7 posts would be optimal to display on your home page.

If you write much longer posts (as I do here at Blogger Buster); use many images, or video in posts, any more than 3 or 4 posts would slow down the loading time of your blog.

On the other end of the scale, if your posts are generally short with few (if any) images, you could probably display 10 or more without affecting page load time.

To change the number of posts which can be displayed on your blog's home page, go to Settings>Formatting while logged in to your Blogger dashboard. The first option enables you to choose how many posts are displayed on the front page:

Overview

When considering how to reduce blog loading time, the main thing to consider is reducing the amount of code and files which are used in your blog's mark-up.

Removing (or optimizing) as much unnecessary JavaScript and images as you are able; reducing the number of posts displayed on the main pages, and optimizing the style section of your blog's template code will certainly help your blog to load more quickly. This is beneficial for new visitors who may become impatient while waiting for large pages to load, and is also a key aspect of optimizing your blog for search engines (as spiders are able to crawl your content more quickly.

A word of caution...

I must tell you that Blogger Buster (in it's current form) is NOT a good example of optimal blog loading time!

The template I use currently requires lots of JavaScript and images; in this instance I have forsaken page loading time for aesthetic appeal...

In researching blog loading time and methods of optimization for this post, I have learned the value of a fast loading blog, and also many methods I could use to ensure this blog loads much more quickly.

Over these next few weeks, I will "practice what I preach" by gradually toning down the use of scripts and images. A faster loading blog will be of benefit to us all!

What do you think?

In this article, I've tried to cover the most significant changes you can make to optimize the loading time of your Blogger blog. Have you used other methods to speed up your own blog's loading time? If so, which methods did you use to achieve this?

Feel free to leave your own ideas and comments by leaving a message below.

To get an idea of what this post would appear like when printed, use the "Print Preview" function in your web browser. Whereas the current page appears colorful and includes the header, sidebars and other elements of this template, printed pages from this blog will appear like this instead:

As you can see in this example:

• The header and sidebar sections do not appear
• Text is black printed against a plain white background
• The post spans the width of the printed page
• The post retains images and formatting
• Only the necessary areas will be printed!

How to install effective printing format for your Blogger posts

Although it took me a few attempts to ensure my posts would print in this way, I have created this tutorial to make it simple and fast for you to install in your own blogs.

There are only two steps to add this functionality to your own Blogger template:

1. Add a few lines of CSS code (to make printed pages appear in this way)
2. Add one line of JavaScript beneath your posts (which creates a link for readers to print the post)

There are a few different options for the style of the print link, as I'll explain below.

Add CSS Style Code to your Blogger Template

To add the print styling code to your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and search for the closing </head> tag.

Immedietly before this line, add the following lines of code (copy and paste this directly to your Blogger template):

If you like, you can preview your blog before saving. On this preview page, you'll be able to see the print preview displays only your blog posts (not the sidebar or other unwanted areas).

Finally, save your template.

Add a "Print this post" link

To notify your readers that your posts can be printed effectively, you'll probably want to add a "Print" link beneath each of your Blogger posts.

I've created three different styles for the print link, so you can choose the option which works best for your overall design.

To add the print link, go to the "Edit HTML" page again, and this time ensure that you've ticked the "expand widget templates" box.

Now search for this line:

<p><data:post.body/></p>

For a simple text link:

For a button link

For a snazzy link with printer icon

Once you have added this code, save your template. These links will only be visible on post pages (to enable visitors to print the full post and any comments which appear beneath the post), so visit one of your post pages to see the link in action.

You can see an example of the print link near the bottom of this post. If you click on this link, you will be prompted to print this entire post (and comments) using your default printer.

Why it may be useful to enable printing for your Blogger posts

If you publish tutorials or lengthy content, your readers may benefit greatly from being able to print and read your posts offline.

Using the methods outlined here, readers can print only the content of your posts, and not the unnecessary distractions of the sidebar, footer and header sections (which saves on paper and printer ink too!).

You may also want to print off your blog posts for your own benefit, such as to back up your posts in print format, or to demonstrate your abilities in a print portfolio.

Unlike other plugins I have come across, this method also allows you to print any comments under your post too. Comments can add a great deal of value to blog posts, and may contain reader insights which are not included in the body of the post itself.

I hope this tutorial has been useful for you! Please feel free to print this off for future reference ;) and as always your comments are most welcomed.

First things first!

The main obstacle I've faced in writing up this article so far is that different Blogger templates code the comments section differently.

While the easiest method for me to write would have been to say "Find this code and replace it with this", such a method would only be usable by bloggers whose template matches the code.

Instead, my explanation may be a little more complicated than usual, though I hope this explanation will ensure anyone using a Blogger template will understand how to implement the highlighted author comments hack!

Backup your Blogger Template!

Before even attempting to customize your Blogger template, the first thing you should do is back up your template. This ensures you can easily restore your original template if something goes wrong. Also, as most of us cannot see comments unless we are viewing a post page, it would be impossible to see if code changes have adversely affected the comments section.

To make a backup of your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link. This will save your existing template as an XML file which you could use to restore your blog, just in case :)

Finding the Comments Block in your Blogger Template

The first thing we need to do in order to implement this hack is to locate the "comments block" within your Blogger template.

To find the comments section, you will need to tick the "expand widget templates" box as this code is contained within your main "Blog Posts" widget.

As I've already pointed out, the section of code used to display comments varies in different templates, so in order to find this section, you may need to search for some specific tags rather than complete sections of code.

To give you an idea of what you are searching for, here is the complete comments-block code from the Minima template:

If you are using Minima (or a similar template) you should be able to locate this section of code easily. However, some templates use <ul> and <li> instead of <dl> and <dd> tags, in which case the code you are looking for may look more like the section on this page instead, or could even be wrapped in simple <div> tags.

If you are having trouble locating the comments section in your blog's HTML code, do a CTRL+F (or CMD+F for Mac users) search within your template code for the following template tags:

• <b:loop values='data:post.comments' var='comment'>
• <data:comment.author/>
• <data:comment.body/>

The comments section of your blog's HTML code should contain all three of these template tags. Simply locate these tags and the surrounding code in your template, then work out where this section begins and ends using your discretion.

Generally speaking, this section will usually begin with <dl> or <ul> or <div> and end with a matching closing tag.

Changing the comments code to add author highlighting

Once you have located your comments section in your blog's HTML code, you will need to highlight this entire section of code and replace it with the following section of code instead:

The simplest way to change your comment code is to follow these steps:

1. Copy the code above to your clipboard
2. Highlight the entire section of your comment code in your Blogger template
3. Paste the code from your clipboard in place of the existing code by keying CTRL+V (or CMD+V).

One quick method to check if you have made code errors is to preview your template. If you have accidentally omitted some code, you will receive an error message. In this case, you should press the "clear edits" button and begin again.

If you don't get an error message, you can then proceed to save your template.

Adding style for author comments

At this stage, your own comments will still appear in the same style as other comments. To highlight author comments, we need to add some style code to your blog template.

This step is much easier than locating and changing the comment section. Simply locate the closing </b:skin> tag in your Blogger template, and immedietly before this, paste the following section of code:

If you prefer, you can change the hex colors (#cccccc and #333333) to match the color scheme of your own template (discover the color codes for your preferred schemes using the web color calculator).

Then save your template.

Now when you make a comment on your blog while signed in to your Blogger account, your comments will have a different border and background color to comments posted by your readers.

Here is the effect of this author comment highlighting hack as seen in one of my test blogs:

I hope this tutorial has helped you discover how to highlight author comments in your own Blogger blogs.

You may also be interested to read how I added MyBlogLog comment avatars, which is the method I use here to distinguish between my own and readers comments.

Please let me know your opinions of this post by leaving your comments below.

What Are the Main Features of Intense Debate?

Intense Debate is a fully featured commenting system which provides many more features than Blogger's standard comments, including:

• Comment form beneath posts (on the same page)
• Threaded comments, which allow commenters to reply directly to each other and be visible as a comment "heirachy"
• Comment avatars (of registered Intense Debate members)
• The ability to vote comments up/down (so the most popular comments can float to the top of the list)
• Profiles for registered members, which include links to members' blogs and social media profiles
• Widgets for top commenters and recent comments which you can add to your Blogger layout with ease

You can read about these features in full detail, or watch the two minute video of Intense Debate functionality which explains this service in a snap!

How to Install Intense Debate i