Blogger Hacks Part 1: Creating a static homepage | Wednesday, 9 February 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 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).
1 | <b:if cond='data:blog.url == data:blog.homepageUrl'> |
2 | <meta content='0;url=http://mysite.com/post.html' http-equiv='refresh'/> |
3 | |
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 tag in the template. You now need to wrap the entire contents of the tag with the following code. This is everything inside the tag and the tag.
1 | <body> |
2 | <b:if cond='data:blog.url != data:blog.homepageUrl'> |
3 | [existing template code] |
4 | <b:else/> |
5 | <p> If the page doesn't automatically refresh click <a href='http://mysite.com/post.html'>here |
6 | |
7 | |
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.
Show us your coolest, most productive, Visual Studio LightSwitch business application and you could win an ASUS U31SD-DH31 Laptop and many other great prizes! Find out how!
