Static Blogger Pages

Warning. This post contains some technogeekery.

If you maintain your own blog and you use Blogger to do it, you might have heard of the recently-added facility to allow static pages to be added - i.e. pages which are not dated but which are "global" and always just there. Useful for, say, a "Contact Me" page or an "About this Blog" page. Thanks to Ellen over on Pink Tea and Paper for alerting me to this.

I've been experimenting with this feature and added a few static links to the heading section of my blog. It's pretty easy to do (instructions here). But I pretty soon hit a snag in that I wanted to be able to include links to non-blog pages. I maintain a web site for my writing too and I wanted to be able to include links to some of those pages over there. There's no way to do this out of the box but you can do it if you're prepared to edit the HTML of your template directly. If you want to know what's involved, here's what you do :

1. Create your static pages section in the standard way as described here.
2. Go to the Edit HTML bit of Layout in the Blogger dashboard.
3. Back up your template! First! Download a copy to your local machine and, ideally, save it somewhere where it is backed-up along with all your writing and stuff. You do do that, don't you? Sermon over.
4. Enable "Expand Widget Templates".
5. Search for a line starting "<b:widget id="PageList1]]"
6. You should then see a chunk of HTML that looks like this. I just added the lines that appear in bold here for the additional "external" links I wanted.

<b:widget id='PageList1' locked='false' title='' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>

      <li>
      <a href='http://simonkewin.co.uk' target='_new' title='simonkewin.co.uk'>simonkewin.co.uk</a>
      </li>
      <li>
      <a href='http://www.simonkewin.co.uk/ereader.htm' target='_new' title='eReader Downloads'>eReader Downloads</a>
      </li>

     </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>


That may look like insane gibberish but it's really pretty easy. Honestly. Just insert your equivalents of my bold lines after the "</b:loop>" and that should do it. If something does go horribly wrong, just restore the back up you took in Step 1 and there's no harm done.

If you want to see how it looks with the template I happen to use and you're reading this from the RSS feed, just browse on over to the blog.

Now to think about what links I want to include ...