Senior software engineer with over 10 years experience in a wide range of technologies.
After searching around for somewhere to host my blogs I finally settled with Blogger. Why? Because I decided I preferred the choice of templates and in particular the drag-drop widgets 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 static pages as well as Blogs.
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 widgets and templates of Blogger, but have also fashioned a static home page and navigation structure.
In this Blog I'll briefly explain how to create a static home page.
To do this first login to the administrative console of your Blog, and navigate to the templates tab. In here we will simply add a Meta refresh to the index page, and point this to a static Blog post which will become the home page.
IMPORTANT: With this hack in place it won't be possible to use the elements designer from within the admin console. You will need to revert the template changes below in order to use this, and then replace the hack.
- Select Edit Html from the templates menu to edit the template. It's probably a good idea to back up your template at this point in case things go wrong.
- In the edit region scroll down to the
<head>tag. - Directly beneath this insert the following code, replacing http://mysite.com/post.html with the url to a post to use as a home page.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='0;url=http://mysite.com/post.html' http-equiv='refresh'/>
</b:if>
The next part is optional, and prevents the entire page from rendering prior to the redirect in order to speed things up. It also provides a link to users who may have Meta refresh disabled in the browser.
- Scroll to the
<body>tag in the template. - You now need to wrap the contents of the
<body>tag in the following code, leaving the original template code in the middle
<body>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
[template code]
<b:else/>
<p style='margin: 50px'> If the page doesn't automatically refresh click <a href='http://mysite.com/post.html'>here</a>.</p>
</b:if>
</body>
That's all there is to it! If you're having trouble finding the post links, try using the create link functionality at the bottom of the posting, or if disabled use the view post link in the admin console and copy the url from the browser.
In the next Blog I'll explain how to set up a navigation structure within Blogger.
Posts
16 comments:
it doesn't work for me..
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "body" must be terminated by the matching end-tag "".
Well spotted, I fixed the xml sample which had an extra b:if tag.
Hey Mike,
I have some q's before I attempt this. I put in a nav bar at the top of my blog. I want it to link to a separate 'about me' page that looks totally different than my home page of my blog. I also want a page for recommended books, favorite sites, and whatever else I can think of.
I want to be able to use a different template, and add different page elements to these pages, because just linking an old post page that just has the one post 'about me' with all the sidebar clutter, etc. of my home page on it, seems stupid and really unappealing to me.
Can this be done using your hack- is that what a static page is...a totally different looking page?
Thanks,
Tessa
hi Tessa,
A static page is just a way of fixing the default blog post that gets displayed when someone visits your site. By default this lists your most recent blogs. An alternative method (which I now use) is Settings -> Formatting -> "Show [1] post on the main page".], and set the blog to use as your homepage to a date in the future.
These hacks won't allow you to use different templates, for that you would probably need to set up several blog sites with different templates that link to each other.
Hope that helps.
Mike
hi
Thanks for your hack. Works well for my blog. However now I could not access my page elements...
Do you have the same problem?
I realized recently that what I really love about blogger is playing around with the templates. This is a great idea here I'm just hoping that blogger have a problem with the redirect. The last time I tried something like that I got an autmated message saying that my blog was classified as spam, which it was, actually, but in any case the redirect had to go.
There's actually an alternative to the redirect which I'm using now. It's a lot friendlier to search engines and doesn't break the elements admin page.
Goto: Settings -> Formatting -> and set "Show [1] post".
This sets the home page to only display a single post. You can then fiddle the publish dates to display your desired static home page.
Mike your right. I hate to sound negative, but in the interest of sharing info:
I was doing that date changing thing, but if you keep changing the date of the homepage it seems to mess up google because if you're using the labels widget the urls are listed as search results with date, so if you change the date google cant find the page until its spidered again. I found the best thing is to backdate new posts before publishing it. HOWEVER, I wonder how google views content on blogs, does it use the date to determine that a blog is updated regularly, or is it just new content found when spidered?
Hi, I am currently using your method in improving my site. So far everything was going great, I have come to the point where it redirects to the homepage I made. But I cannot seem to get the last part of the instructions correctly : (b:else/
p style='margin: 50px'
If the page doesn't automatically refresh click a href='http://URL Homepage'here a p
/body). I removed the b:if tag, but there is an error. Also, am I placing this at the correct position (very end of the script)?
Hi myk, if you send me your template I'll tell you were you are going wrong. However I'd recommend using the alternative approach discussed in the comments above. It's a lot more user friendly.
Thanks Mike, right now, I managed to separate the homepage and blogs using your method with the additional codes. But the blogs are being rendered before jumping to the homepage..so I still have to tweak that. I will send the whole template :) I appreciate your help on this matter.
forgive my ignorance, but I cannot seem to find an email address
Here you go mike.carlisle@thecodeking.co.uk :)
everything worked perfectly! I have a homepage and was able to separate my blogs in my site. thank you so much for this great tutorial.
this works, but when i click to go back to the "blog page" it keeps sending me back to mt static home page??
Post a Comment