Linking to an external stylesheet

The default Blogger templates include all of the relevant style information. Whilst this is arguably the simplest way of doing things, hosting the same information elsewhere has one major advantage. Performance.

The first time a web browser loads a page of your site, the external css file will be loaded into memory along with the rest of the page. Hereafter, however, this style information (as long as it doesn't change) will be cached; reducing page load times.

Of course, this means that you have to have somewhere to host the external css file. Somewhere reliable (if this site goes down, but Blogger remains OK, your site will look a bit less than its usual self). If you have somewhere, however, it's highly recommended to make the most of it.

To link to the external stylesheet, simply place the following line anywhere in the head section of your Blogger template :

<link rel="stylesheet" type="text/css" name="anyname" href="url">

Revealing the footer

The standard Blogger template includes code to produce a footer, which is hidden by default. To reveal (and modify) this, look for the lines

<p><!--This

and

--> </p>

near the end of the template. Simply remove the

<!--

and

-->

and you'll have a footer. Change the text to anything you wish to appear at the bottom of each page.

Start making sense (incorporating Adsense into Blogger)

Adsense. You've all seen the ads (perhaps even clicked on a few), and now you want some of your own. They do actually make money - and not just for Google.

If you're already signed up to the Adsense program, it's a simple matter of copying/pasting into your Blogger template (I'll show you where in a minute) and rebuilding your site. They'll begin appearing in a couple of minutes or so, depending upon your content and the number/type/size of ads.

If you haven't already signed up, you've got two choices. Either follow the links via Blogger (beginning on the start page - pictured), or go directly to www.google.com/adsense and sign up there. Once you've filled in the obligatory forms (free, and it only takes a minute), you're ready to go.

In the standard blogger template there are three main locations which are typically used for advertising. Naturally, you can put them anywhere you want; but we'll start with three spots. These are near the top of the front page (above the posts), in the sidebar and beneath each post. Using channels will enable you to test various Adsense combinations in each location. The template code should be modified as follows :

For the top of the page, look for the lines

<!-- Begin #main -->
<div id="main"><div id="main2">

The adsense code goes beneath these (make sure it isn't wider than the 468px options if you're using one of the standard templates).

To place Adsense ads in the sidebar, work out where you want them to appear. To place them directly beneath your profile, look for the line

<!-- End #profile -->

To make sure they appear on each archive page (as well as the front page), start with a <MainOrArchivePage> tag, then copy/paste the Adsense code, then finish it all with a </MainOrArchivePage> tag.

The third location commonly used is at the base of each post. To place the ads between the post and the comments, look for the lines

</MainOrArchivePage>  <$BlogItemControl$>
    </p>
  </div>

and copy/paste the Adsense code directly beneath them. Once again, select an ad unit of no more than 468px if you're using one of the standard templates.

Yahoo! Action Buttons

Yahoo! has released an excellent guide to its social media offering, Yahoo! Action Buttons.

There are two Blogger tags to bear in mind when setting these up, which may be used to customise the parameters buttonActionUrl and buttonSubject :

<$BlogItemUrl$>

and

<$BlogItemTitle$>

These buttons are very quick to implement, and highly customisable.

Adding recent comments to the sidebar

One of the ways to encourage visitors to stick around on your site for a little longer is to give them an idea of the comments others have recently left. This is commonly done in the sidebar, and here's how to do it in Blogger.

In your sidebar (wherever you want the comments to appear), copy and paste the following code.

<mainpage>
<h2 class="sidebar-title">Recent Comments</h2>
<ul>
 <blogger>
       <blogitemcommentsenabled>
       <blogitemcomments>
   
          <li><$BlogCommentAuthor$> //
          <a href="http://www.blogger.com/post-edit.g?blogID=22689915&postID=114046704988137018">">
          <$BlogCommentDateTime$></a></li>
      
       </blogitemcomments>
       </blogitemcommentsenabled>
   </blogger>
</ul>
</mainpage>

A brief look at what this code does.

<mainpage>

This means that the following code (until the

</mainpage>

) will only appear on the front page of your site. The archive pages (with a separate post on each page) will already be displaying the comments by default, so there isn't much sense in duplicating this.

<blogger>

This will loop through each post on the page.

<blogitemcommentsenabled>

This tag checks to see that comments have been enabled for each post.

<blogitemcomments>

Loops through each comment for the post.

NB : This isn't strictly a list of recent comments, but it will certainly give you a good idea. It is, in fact, a list of comments for the posts on that page. There are other techniques for generating a true weblog-wide comment listing, but they each have their own drawbacks and will be covered in a separate post.

Automatic translation of posts

Here's a quick technique for providing automatic translations of your Blogger posts. A series of links for the 5 main languages supported by Google's translation services will appear after your writings. Not perfect, but certainly close enough for a reader to get an idea of what's being said.

Rating posts

If you've ever wanted to be able to let users rate your posts, this tutorial is for you.