A Template For Virginia USA #2

For Christmas (End Of Year) 2009, I went back to Virginia again, for a brief visit. What I found, besides the snow (and there was too much of that) were some positive notes. The State Of Virginia USA really is moving into the future. For us Californians (Yes, I consider myself a Californian) they now have a Frys Electronics, a Trader Joes (2 of them in the Richmond area!), and an In-N-Out Burger (No, they don't have that yet!). OK, I'll settle for 2 out of 3.

The point is, Virginia really is moving ahead, into the future. And this month, some bloggers are feeling the need to do that. Two changes in Blogger - Auto Pagination, and the approaching end to FTP Publishing, will both hasten the end to classic templates, and make the move to layout templates more natural.

Owners of blogs with classic templates have, for a long time, been asking about how to get "Newer Posts" / "Older Posts" links for their blogs. That's not a feature that can be provided, in HTML, unfortunately. The "Newer Posts" / "Older Posts" links have to be dynamically generated, so they can't be part of HTML based templates.

This week, we're seeing a new need for the "Newer Posts" / "Older Posts" links. Owners of blogs subject to restriction in archive or main page size, thanks to Auto Pagination, report inability to get all posts indexed by the search engines, or viewed by their readers. Neither main page view, nor individual archive page views, will consistently display all posts in a single page. Without "Newer Posts" / "Older Posts" links, all posts can't be indexed or viewed.

Without the dynamic display that's part of a blog with a layouts template, your blog won't have "Newer Posts" / "Older Posts" links, and won't provide indexing or viewing of all posts in an archive or main page. Nor will the blog have a dynamic labels index.

Now, blogs that use classic templates, and have large or complex posts, are just broken. When support for FTP publishing ends next month, there will be no more blogs that absolutely must use classic templates.

No support for FTP published blogs = no need to support classic templates.

XML based layouts templates are now reality, in Blogger blogging. It's time to move ahead, Virginian bloggers.

---

That said, I am suggesting that you provide details about your problems, so Blogger may be able to fix your problems.

---

Customising The Newer Post - Older Posts Captions

Not everybody who like Layouts templates, and their flexibility, likes the "Newer Posts" / "Older Posts" links. Some people are content to just remove them, but others would like to change the captions.

The latter task isn't terribly difficult. As always, backup your template before and after making these changes.

The simplest changes that you can make involve editing the CSS rules that control the fonts.

• You can change all 3 links together. The "Newer Posts" - "Home" - "Older Posts" container uses the Class rule "blog-pager".
• Alternately, you can change each link separately.
  • "Newer Posts" uses the Class rule "blog-pager-newer-link".
  • "Home" uses the Class rule "home-link".
  • "Older Posts" uses the Class rule "blog-pager-older-link".

Here is the CSS rule set for a Minima / Simple template.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

Make the "Home" link bold.

#home-link {
font-weight:bold;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

Make all three links bold.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
font-weight:bold;
text-align: center;
}

If you want to change the link captions, or maybe replace the captions with pictures, you'll have to edit the template XML. This is slightly more work than tweaking the CSS rules.

From the Template Editor, expand the post template, aka "Blog1". Look through the code for "nextprev". (Note): What you see below contains gratuitous line breaks, to prevent post / sidebar alignment problems.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
<data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Change that. Here, we'll change "Newer Posts" to "Next", and "Older Posts" to "Prev".

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
Next</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
Prev</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Here, we'll change "Newer Posts" to a left arrow, and "Older Posts" to a right arrow.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
<img src='http://3.bp.blogspot.com/_pzC_7PLtN-0/
SLspRekw94I/AAAAAAAABO0/xBrN8YSo-Vc/s200/
Left.gif'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
<img src='http://4.bp.blogspot.com/_pzC_7PLtN-0/
SLspRqEA42I/AAAAAAAABO8/yuwkwz-8Tr4/s200/
Right.gif'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Here, we'll change "Home" to "My Home Page".

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
My Home Page
</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
My Home Page
</a>
</b:if>
</b:if>

And Save, which ever change you make. See it in action, if you like.

(Note): The "Newer Posts" / "Older Posts" links are only available in blogs with layouts templates, because they require XML. If your blog uses a classic template, this is an excellent opportunity for you to consider upgrading to a layouts template. If you insist on using HTML for the template, upgrade to layouts anyway - then use your HTML in the layouts body.

And please, backup the template - before and after making these changes.