Goodreads Facebook Twitter RSS Feed

Static Blogger Pages

Sunday, 18 April 2010

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'>
      <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>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>

      <a href='' target='_new' title=''></a>

      <a href='' target='_new' title='eReader Downloads'>eReader Downloads</a>

    <b:include name='quickedit'/>

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


    1. Hi

      Thanks for this. I found another way to add more pages to your blog:

      I just go to dashboard-posting-edit pages-big blue tab there with the words add pages. Click on this.

      You are then give the option of where to put these pages either at the top or side bar.


      Take care

    2. Hi Old Kitty,

      Yep, that's the way to get blog pages as static pages. The HTML hack allows you to include non-blogger pages in there too.


    3. I sometimes think that html code is the nearest thing in existence to actually magical incantation. You cast the glyphs and cyphers in the right order, and pouf! Useful things happen.

      Thanks for the tip.

    4. Thomas,

      That's true of all programming I feel (something I've made my living at for many years). Sometimes it does just feel like a matter of finding the right incantations ...

    5. I was able to add pages, but couldn't see how to make the pages any different than my usual blog site. In fact, it was essentially adding static posts to new pages that looked just like the original. Not sure how you switched it around, and not sure I can figure it out myself. But I like how yours look.

    6. Karen,

      The way the links look is purely down to the template amd I haven't done anything to change that. It looks to me like you've got your static pages working fine?


    I'd love to know what you think.