Thanks for Philippe and Ashish’s help of correcting my English spelling and grammar.
Google Pages is an amazing tool, easy to use. Without any knowledge of HTML or CSS, anybody can create a site, in a couple of minutes.
I have used Google Pages for several months; the big problem I encounter is that I was not able to to maintain the sidebar menu consistent.
If I want to modify the sidebar, I have to do it in every page, it is very inconvenient and vulnerable to mistakes.
Some time back I found GPC support JavaScript resonably well, so I try to use some basic Ajax functions to implement it. Via several tests, it works!
Now I would like to share my ideas here, hope it will help you too when you use Google Pages Creator.
Step 1: Create the navigation file. Name it as NAV and save it in UTF-8 format. It should be like:
It is very simple and easy to understand HTML code. When you finish creating file, upload it to GPC.
Step 2: Create the NAV.JS file.
var xmlHttp; /*XMLHttpRequest Object */
function createXMLHttpRequest(){
if (window.ActiveXObject){ /*Initialize the XMLHttpRequest object in IE */
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”)
}
else if(window.XMLHttpRequest){ /*Initialize the XMLHttpRequest object in Firefox*/
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange; /* Set the callback is handleStateChange. */
xmlHttp.open(”GET”, “nav”, true); /*though get method to request NAV，*/
xmlHttp.send(null);
}
function handleStateChange(){
if (xmlHttp.readyState == 4 ){
if (xmlHttp.status == 200 ){ /*The HTTP state is 200，it means OK */
document.getElementById(”g_description”).innerHTML = ”
Deng Deng’s Hong Homepage
“; /*Set the page’s subtitle*/
document.getElementById(”nav”).innerHTML = xmlHttp.responseText;
document.getElementById(”g_footer”).innerHTML = ‘
Copyright © 2006/7/8 ~ some right reserved
‘; /*Set the page’s foot*/
}
}
}
window.onload = function (){
startRequest();
}
NAV.JS contains basic Ajax statements. For more information about Ajax, please refer to the book Foundations of Ajax. It is a good Ajax book for beginners.
Step 3: When you create or modify your Google Page, add the following HTML code to your sidebar.
Loading…
/* Before the navigation is loaded to page, display red color style Loading…, if you don’t like it use to instead it */
/*Call the JS file defidebefore*/
/*Add other code in Sidebar*/
These 3 steps is all about how to keep sidebar consistent in Google Pages. The onload event will call the startRequest function to request the content of the NAV file as part of the sidebar, and modify the subtitle and footer at same time. The other important benefit of it is that if you want to modify your sidebar for every page, you have to modify only NAV file.
This method, to make menu is a good way, as we don’t need to cut and paste a menu on every page. But in term of optimization of Search Engine results, it’s very bad! It’s a choice, but using Ajax, the result page doesn’t contain the main keywords of your different pages.
If you feel the article is useful and if you use my method mentioned in this article, I will appreciate if you can add my link in your Google Pages. If you refer to this page, please add the original link in yours.
Thank you very much!
PS：I can also use the method LoadXML in JavaScript to implement the same function, I will show you the LoadXML method some time later.
