My Photo

Technical Architect with over 15 years experience in a wide range of technologies.

@TheCodeKing

rss feed

Blogger Hacks Part 1: Creating a static homepage | Wednesday, February 09, 2011

Introduction

After searching around for somewhere to host my site I finally settled with Blogger. Why? Because I decided I preferred the choice of templates and in particular the drag-drop gadgets and page elements.

What I didn't like is that it is purely a blogging site. This is quite restrictive in terms of content as I really wanted the ability to create more of a website than a blog.

Well after a bit of trial and error, it turns out the new Blogger templates are fairly easy to 'hack', and as such I've managed to get the best of both worlds. I have the cool WYSIWYG gadgets and templates of Blogger, but have also fashioned a static home page and navigation structure.

Update

This article has been updated to reflect the simplified technique that I'm currently using for this website. There are also several alternative techniques which involve editing the Blogger template directly, or by making use of the new static pages. I've briefly described these solutions below for reference.

Simplified Technique

This technique is simply a Blogger setting which allows a user to limit the number of blogs displayed on the default page. By changing this setting to 1, a static homepage is created which will always display the most recent post. By manually configuring the publish dates of the blogs you can then control which content will will displayed on the homepage.

To set the post limit login to the Blogger console and navigate to Settings -> Formatting. Change the "show at most" setting to "1 post".

Next override the publish date of the post you wish to display on the homepage. This can be found in the Post Options menu at the bottom of the blog editor.

Template Redirect Hack

An alternative technique I've previously written about involves editing the Blogger template, and adding code to redirect to a URL of choice. This has the advantage that you don't have to manually edit the post dates every time you create a new post, but does break the Blogger designer view and is not SEO friendly.

To implement the redirect on the homepage login to the console and navigate to the template editor Design -> Edit HTML.

Backup your existing template before making changes.

Using the editor scroll down to the <head> tag, and insert the following code directly beneath this line. Replace http://mysite.com/post.html with the URL you wish to use as your homepage (this should be the URL of a specific post, or you could use a static page now supported by Blogger).

<b:if cond='data:blog.url == data:blog.homepageUrl'>
       <meta content='0;url=http://mysite.com/post.html' http-equiv='refresh'/>
</b:if>

The code above causes a client-side redirect as soon as the page loads. If you really want to go all-out and improve the implementation further, you can also include the following edits. This will reduce the time taken for the initial page-load prior to the redirect and further improve the user experience. It also provides a manual link for users with JavaScript disabled. I'd recommend only making these changes if you are comfortable editing HTML.

Using the editor scroll down and locate the <body> tag in the template. You now need to wrap the entire contents of the <body> tag with the following code. This is everything inside the <body> tag and the </body> tag.

<body>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
          [existing template code]
     <b:else/> 
           <p> If the page doesn't automatically refresh click <a href='http://mysite.com/post.html'>here</a>.</p>
     </b:if>
</body>

Remember that with this technique in place you will not be able to use the Blogger designer to manage your gadgets. To do this you will need to temporarily disable the hack.

Summary

That's all there is to it. In the next article I'll explain how to set up a navigation structure within Blogger.


2 comments:

Chuck Oldfield said...

I was able to complete the first bit of this but the second code doesnt seem to want to work? can you elaborate a little more just so i can make sure im doing it right. ie does the code just go under the body or does it replace it? does anything need to be deleted etc

thank you

TheCodeKing said...

Hi, I'd recommend the simplified technique as it avoids having to edit the template. If you still do want to use the template redirect hack, then you should be left with one set of body tags containing the b:if block. The existing content (previously within body) goes where it says [existing template code]. Nothing gettings deleted. if that still doesn't work drop me an email with your template.

Post a Comment