September 12, 2012

Create A Landing Page

Any published Page can be designated as the Front Page of your blog, instead of displaying the recent posts first.

Create A New Page

First, a Page needs to be published to your blog. Open the Compose button drop-down menu and select New Page. After you complete your page, click Publish.

Set Page As Front Page

To set your page as the Front Page, go to Settings > Posts. Under the Front Page section, select to Display a "page" as the front page, and choose a page from the drop-down menu. Click Save Changes to update your blog.

Link To Blog Index

Once a Page is designated as the Front Page, the recent posts for the blog will be available in the blog index. The blog index can be accessed by adding blog_index.html to the end of your blog's address. For example:

http://example.typepad.com/blog/blog_index.html

Note: Blog index URL will not be availabe until a Page is set as Front Page.

A link to the blog index will need to be added to your blog to allow readers to find the recent posts easily. The best option is to place a link to the blog index in the Navigation Bar. At Design > Content, click the pencil icon next to the Navigation Bar module, add the blog index link, click OK, and click Save Changes to update your blog.

Hide Sidebars On Landing Page

If you wish to remove the sidebars from the landing page, you can add some HTML to the the Page. The code you add will depend on the layout selected for your blog. At Design > Layouts, determine which classic layout you are using for your blog and select the corresponding code below:

Two Column (Right)

<style>
.layout-two-column-right #alpha { width: 100%; }
#beta { display: none; }
</style>

Two Column (Left)

<style>
#alpha { display: none; }
.layout-two-column-left #beta { width: 100%; }
</style>

Three Column (Right)

<style>
.layout-two-column-right #alpha { width: 100%; }
#beta { display: none; }
#gamma { display: none; }
</style>

Three Column (Right)

<style>
#alpha { display: none; }
.layout-two-column #beta { width: 100%; }
#gamma { display: none; }
</style>

To add the code to your Page, click to the HTML tab when composing your page, paste the code at the end, and click Publish to update your blog. Do not use the Rich Text tab to preview your page after adding the code. Instead, click the Preview button.

The above tip works without further adjustment for many themes. Some themes, however, may require some additional code to adjust for borders and padding.


Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Typepad Services badge