Senior software engineer with over 10 years experience in a wide range of technologies.
In Part 1 I showed how to create a static homepage by editing the Blogger template. In this post I'll explain a way to gain more control over the navigation of your site. This is for users like myself who may want to get more out of Blogger than purely the journal functionality.
If you have the static homepage hack in place, you'll need to temporarily remove the hack in order to use the elements designer and set this up.
The Principle
OK so here's the basic principles, relax it's not rocket science.
With a static homepage hack in place, users entering the site will be faced with a single post (rather than usual list of latest posts). If we also remove the Blog Archive element as well, then we pretty much take away all site navigation, and this leaves us with a clean slate to build our own.
We do this using a combination of Labels and Link List page elements. See where I'm going with this?
Categorized Navigation
For the categorized navigation (which I use for My Articles), we use the Labels Element. Then by adding labels to posts we can control the navigation names which appear in this menu, and which posts they link to.
Static Pages
Posts without labels do not appear in the categorized navigation menu, and therefore we can use these hidden pages as static pages, which we link to from other posts or from a Link List element. You can even set-up a static post to act as a second level navigation structure and link to other posts from there, as I've done with Tips & Tricks section.
The Problem
OK we're nearly there, but there is one issue. Remember the categorized navigation links show all the posts that share the same label. This works in our favour, however we don't really want to link to a page with a list of posts all on the same page. This is fine for a journal but not always what we want. I prefer to have a second level index of all the post titles, so the user can then drill down further and select the post they are interested in, rather than showing them all on one page.
To achieve this we need to hack the template again. We are going to hide the post body by changing the styles for just these pages, leaving us with a nice index of post headings. This procedure may vary depending on the template you use, however the idea is the same.
Navigate to Edit Html in the Template section of the admin console and place the following code under the <head> tag of your template. You'll need to find the existing body and footer styles from your template and move them into this block of code. For my template these were called .post-footer, and .post-body, shown in blue. After adding the surrounding code, this changes the styles based on whether or not we are showing multiple posts on one page. If we are then it will always hide the main content and act as a index page to the posts.
<style>
<b:if cond='data:blog.pageType == "item"'>
.post-footer {display:inline;}
.post-body { border:1px dotted #bbbbbb;
border-width:0 1px 1px;
border-bottom-color:#ffffff;
padding:10px 14px 1px 29px;
}
<b:else/>
.post-footer {display:none;}
.post-body {display:none;}
</b:if>
</style>
And there you have it, don't forget to drop the static homepage hack back in and you're done. You now have a very basic content managed site, and hopefully feel a little more in control of where and how things are displayed within your site.If it all sounds too complicated and scary well maybe it isn't for you. However if you're feeling comfortable with it all, there's a lot more you can do with these templates so play around and get customizing!
Posts
2 comments:
Can we see an example of these hacks in place?
Charlie, this hack is used on my site for the My Technology Blogs section. I recently upgraded the other navigation sections to use a new hack which I haven't published yet.
Post a Comment