How to Simulate a Menu Driven Web Site Using Google Blogger


The default format of a blog lumps all of your blog posts together, sorted by date. This works fine if you only blog about one topic, or if you blog about multiple topics but your readers are interested in all of them.

But, let's suppose you are passionate about three different topics: cooking, tennis, and painting; and you blog about these three topics. It is reasonable to assume that some readers of your blog are only interested in one of these three topics, let's say cooking. If all of your blog posts are lumped together, those readers will have to spend time to examine and skip through the tennis and painting posts. Furthermore, they may mistaken some cooking posts as painting posts, and miss some interesting information. To make your blog easier for those readers, you may want to divide your posts into three groups: cooking, tennis, and painting, so those readers will not waste time to skip through posts of the other two topics, and they will not miss any cooking posts by mistake.

A solution is to create a menu in your home page of your blog. The menu would contain three menu items: cooking, tennis, and painting. When a reader clicks on "cooking", he will see your cooking blog, sorted by date.

Google Blogger does not provide a "menu" gadget. We can use two other gadgets, Pages and Labels, to simulate menu items. After a comparison, I found that Pages provide a better approximation than Labels. So, in this blog, I will explain the Pages approach.

Follow these steps.

(1) Log in to your Google Blogger account

(2) Create three "topic" blogs about cooking, tennis, and painting, respectively

After completion, view your "topic" blogs. Copy the addresses of the "topic" blogs to a WordPad. Only keep the root (from the beginning to "blogspot.com"). For example, if the whole address is

http://renaissance-journey-demo-cooking.blogspot.com/2013/07/people-eat-snails-in-france.html

then only keep

http://renaissance-journey-demo-cooking.blogspot.com


(3) Create a "Home" blog

Press the "New Blog" button.



Enter Title and Address. For Template, select "Simple".




Press the "Create Blog" button.

(4) Create a static "Home" page in the "Home" blog

In the "Home" blog's "Overview" page, press the "Pages" button.




Press the "New Page" arrow.

In the drop down menu, select "Blank Page".

Now the "Page" configuration page will come up. Enter the page title. In the body field, enter text that typically appear in Home pages, such as brief descriptions of the three topics in the three blogs.



Save the page. View your topic blogs. Copy the address of this "Home" page to a WordPad.

(5) Create pages to link the "topic" blogs

In the "Home" blog's Overview page, press the "Pages" button.

Press the "New Page" arrow.

In the drop down menu, select "Web Address".



Now the "Web Address" configuration page will come up. Enter the page title, such as "Cooking". In the Web Address (URL) field, enter the Web address that you saved in step 2.



Press the "Save" button.

Repeat the above for the tennis and painting topics.

(6) Put the tabs on the top of the Home page

In the "Pages" page, press the "Show Pages As" drop down menu. Select "Top tabs".




(7) Set the "Home" page as the starting point

You want the Home page to be a place to branch into other blogs. So, you do not want the Home page to have dates on itself. But the original Home page is a blog. So, date will appear on this page. We are going to make the static "Home" page that we just created as our Home page. To do that, we just need to redirect the original Home page to the static "Home" page.

In the "Home" blog configuration page, press "Settings". And then press "Search preferences".

To the right of "Custom Redirects", press "Edit".



In the "From" field, type in "/".

In the "To" field, type in the address saved in step 4, but only the portion from "/p/" to the end.

Press "Save". And then press "Save changes".




(8) Hide the original Hope page

Go to the "Home" blog. Press "Layout" on the left side.



In the "Layout" page, find the "Pages" gadget, and press "Edit".



In the "Configure Page List" pop-up window, deselect the box to the left of "Home".


Press the "Save" button. In the "Layout" page, press the "Save arrangement" button.

(9) Test

Go to the blog "Overview" page. Press "Pages" on the left.

In the "Pages" page, find the original Home page. Press "view". Now you see the menu on the top. Press "Cooking", you will go to the cooking blog. Press "Tennis", you will go the tennis blog. Press "Painting", you will go to the painting blog.



Notice that there is no date on the "Home" page.

You are done!






No comments:

Post a Comment