Google Page Creator Tools - Tools for Webmasters.



Since I have put a link to my site on Google Groups, hundreds of people have visited my site looking for some interesting information or tools about Google Page Creator. Since these are people from all over the world (US, Canada, Japan, Turkey, Poland,...) this part of my site will be completely in English. Personally, I live in Belgium and speak dutch, so excuse me for any mistakes that I might make in English.... :-)

I will work the subjects extremely detailed out, so that even people who know nothing of HTML can use these tools!!

I will try to keep this site as up-to-date as possible. If there are subjects that aren't on my site, but you still want an answer to, Contact me!

Don't forget to give your opinon on my site with my site poll !! Want your own site poll?Get it at Bravenet!

 I'll tell you something more about some interesting tips when using Google Page Creator. 
This is a little table of contents for what will follow:

GPC is having trouble with my anchor references (table of contents below), CLICK HERE to solve the problem!! 

1) Setting up a counter on your site

2) Placing a personal guestbook on your site

3) How can I get people to post advertisements on my site? How much money can I make?

4) Adding advertisements from Google Adsense to your site

5) Creating a password protected area

6) How can I get Google Search or Google Sitesearch on my site?

7) Logging in directly into your Gmail account from your site

8) Creating embedded video's on your site

9) Adding an anchor reference within the same page 

10) How can I play music LIVE from my own site?

11) How can I display moving Text?

12) Adding a form to your GPC site

13) Adding a clock or counter to your GPC site. 

14) adding a Google Map to your site 

15) Opening a link in a new window 

16) Adding Background music to a webpage 

17) Creating a sitemap

18) Creating buttons on your site 

19) Adding Google Gadgets (time, games, pics,...) to your site. 

20) Your own favicon

21) Experimental Features: XSPF music player  

22) Adding a Flash Slideshow for your pictures 

23) Adding a site-poll at your Google Pages 

24) Embedding your Google Reader

25) Displaying your Google Calendar on your GPC site.

26) Adding buttons WITH submenu's to your homepage

27) A Flash slideshow for Picasa Webalbums  

28) Embedding Pictures stored outside of GPC

29) Adding Google Analytics to your website

30) Adding a Clustrmap to your website

  GPC is having trouble with my anchor references (table of contents above), CLICK HERE to solve the problem!! 

 

+ GPC Tips & FAQ

Something still not clear? Want more tutorials? Visit Martin Blow's Technical Pages!

 

IMPORTANT!! The following subjects are ALWAYS worked on with MOZILLA FIREFOX!! If you do not have Firefox yet, I strongly recommend it! Get it here!

 

1. Setting up a counter on your site

Setting up a counter on your website is very easy. Even amateurs can fix this! :-)

go to http://www.statcounter.com. Register here, it's 100% free. Once you're registered Statcounter will ask you to set up some options (counter visible or not, colors,...) DO NOT forget to check the "HTML only" box before generating your code!!You can change these settings afterwards, but you'll have to copy the code all over again into your website, so better set it up correctly. Another supplier of Counters is Bravenet, They also offer A LOT of other services (forms, polls,...) and webmaster tools, so I can really recommend you signing up there! Select the service from the list that you would like to sign up for (For FREE) when you click the Bravenet-link.

When you're done setting up, statcounter will give you a HTML-code. Now open GPC, go to your homepage and choose (on your left) "Edit HTML". (doesn't matter where your cursor is). Now copy the HTML-code given by statcounter into your GPC HTML-editor. Copy the code at the end of the HTML-code that you allready have in your HTML-editor, but BEFORE the words "<body><html>"!!! (these are the last two words of a HTML-coded page).

Save, Publish, and you're finished! When you return to statcounter and you log in, you'll be able to see all of your stats. 

IMPORTANT!!  If you want to use statcounter properly, and want to use ALL options, you will have to indicate that you want a visible counter, but ONLY on you homepage. You will be given two pieces of code: one for you homepage, the other for all your other pages. This is necessary if you want accurate records of "visit length, visitor paths, popular pages, ..."

If you had the option "visible" checked, you should see a counter on your homepage. If you didn't indicate that you wanted a visible counter, and you want to change it, Go back to your HTML-code from statcounter, now look for: "inisible=1". 
Change it to "invisible=0". Your counter should now become visible.

Note: Watch out that you don't accidentely delete a part of statcounters code when you're editing HTML.Should you do so, you can always get the code again from there site, just login and on your left choose the icon of "install code and customize project settings."

 Is this tutorial still unclear to you? Want another point of view? check out the corresponding tutorial on Martin's pages! 

 

 2. Placing a personal guestbook on your site

Last updated: 26th June

This is also relatively easy. 

Just go to Bravenet  and choose Guestbook (under BUILD Tools). Click on "Get yours now". When you have registered (free) for the guestbook,you can select "copy & paste HTML code" under the "Guestbook utilities". Next, go to you Google Page creator, choose your homepage (or any other page where you want to link to your guestbook) and click "edit HTML"  (on your left side).  Now copy the HTML-code from Bravenet into your GPC HTML-editor. Copy the code at the end of the HTML-code that you allready have in your HTML-editor, but BEFORE the words "<body><html>"!!! (these are the last two words of a HTML-coded page).

There should normally be an 2 icons : "view my guesbook" and "sign my guestbook"

Try them out, they should work!

Also be careful not to delete any part of the code when editing HTML later on!

You can also get a guestbook  at HTMLgear

 

3. How can I get people to post advertisements on my site?

There are probabely hundreds of advertisers on the Internet. But who would want to put ads on your site??? Well... EVERYONE!!

Once you got a site where you got a number of people visiting regularly (you can monitor this using statcounter!) you can actually make some money out of it!!

I really do recommend Google Adsense. Click HERE to get a Google Adsense Account! It's 100% free and I'm VERY excited about it! It's very easy to use, and very reliable! Making money just got a little easier thanks to Google!!

Once you're registered with Google Adsense, you can start showing ads: log in and click on "adsense setup". you can now choose between 3 categories of ads. For the rest of the text (chapter 4) we'll be using Referrals (the third category).

Click on referrals and than choose (for example) "Firefox". Once you placed your ad, Google will give you $1 if someone installs firefox by clicking on your ad! If you want to know how much you'll earn from other ads from google adsense you'll have to consult the Adsense help Database.

TOP

 

4. Adding Ads from Google adsense to your site

Last updated: 10th July 

The next step is a little bit more difficult. Since Google Page Creator isn't fully compatible with javascript yet, we'll have to make a little detour... Follow the next steps VERY precisely!!!

  • Go to your page Creator and and create a new page. Name this page "Firefox".
  • If you want any text above your ad, pick your layout and type it (optional). 
  •  Go to Google Adsense. (If you don't have an Adsense account yet, get it here.) Log in and choose "Adsense Setup".  Then pick "Referrals". Choose the tab "Firefox" (or any other if you like). Now choose (right side) the Ad you would like. Check it, on the left the HTML-code will appear.
  • Copy the HTML-code from Google Adsense and paste it into the HTML-editor. 
  • Save all changes in GPC and publish. Try the links/ads out. When you click on the ad, you'll be redirected to a Firefox download (if you chose the Firefox referral). Everytime someone downloads it and installs firefox, Google will give you up to $1 on your Google Adsense account!! 

TOP

 

 5. Creating a password protected area

Alternative 1

This is the safest solution I have found so far. (and the easiest too...)

First get your password gate HERE (select the password gate, and click "get yours now")

Next Create a new page in GPC (e.g. name= Please login), save and publish this page. Click on view live. then click on FILE - SAVE PAGE AS. , type:" Website, HTML only".

Login to your bravenet account and select "copy paste code" from the options. Now copy the code (javascript) into the HTML-code of the pleaselogin.htm file that you've just saved (open it with wordpad: right click > open with > wordpad)
Paste the code from bravenet BEFORE the <body><html> tags!!

Visit your general setting in bravenet and indicate wether  you want your users to be able to request passwords with you. 

Next go to your bravenet account and select "manage accounts" here you can add users and their passwords. Also give up the URL of the page that should be behind a security gate.

Now go back to GPC, and upload the file "pleaselogin.htm". Create a link from your homepage (or any other site) to this file.

Finished!

 

Alternative 2  !!SECURITY RISK!!

 In order to create a password protected area we will be following more or less the same path as we did when placing ads. It is important that you know that this code is NOT 100% safe. It is easy to use, but if there are people with bad intention who know their way around HTML, they can hack into your password protected area!!

Start with creating 2 new pages: The first one is called "LOGIN" the other is called "Password Protected Area" (you can ofcourse choose other names, but here in the examples we will be working with these names.)

If you want any text on the first page (LOGIN) type it now (e.g.: login here, if you want to obtain the password, you can send me an e-mail.)  Once you've created and edited these two pages (you'll be able to edit the second one at any time later, NOT the first one!!) SAVE AND PUBLISH them! follow the next steps very precisely!

  •  Go to your google page creator and locate your "LOGIN" -page. View it on the web. 
  • once you are viewing it on the web, click File, Save page as. name: Login. Save as type:  Webpage, HTML only. (save the file somewhere where you can quickly find it)
  • Locate the file and open it with wordpad (Right-Mouse, open with, Wordpad). You will now see a code of approximately one page long.
  • Scroll all the way down and find the last two words of the code: <body><html> . Put your cursor IN FRONT of them and hit RETURN a few times... :-)
  • now copy the following code IN FRONT of these last two words (<body><html>)




    <script language="javascript">
    <!--//
    /*This Script allows people to enter by using a form that asks for a
    UserID and Password*/
    function pasuser(form) {
    if (form.id.value=="userID") {
    if (form.pass.value=="password") {              
    location="page2.html"
    } else {
    alert("Invalid Password")
    }
    } else {  alert("Invalid UserID")
    }
    }
    //-->
    </script>

    <center>
    <table bgcolor="white" cellpadding="12" border="1">
    <tr><td colspan="2"><center><h1><i><b>Login
    Area</b></i></h1></center></td></tr>
    <tr><td><h1><i><b>UserID:</b></i></h1></td><td><form name="login"><input
    name="id" type="text"></td></tr>
    <tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"
    type="password"></td></tr>
    <tr><td><center><input type="button" value="Login"
    onClick="pasuser(this.form)"></center></td><td><center><br><input
    type="Reset"></form></td></tr></table></center> 



     
  •  On the sixth line of the code (above) you will find the word "UserID" replace it with the user ID you want. Do the same with the password (line 7).

    Example: you want the user id to be SCRAT and the password to be MANNY. the two lines of the code will be: 

    if (form.id.value=="scrat") {
    if (form.pass.value=="manny") {     

     
  •  Next, on line 8, you will find: location="page2.html"
    page2.htm is the site you want to enter if userID and password are correct. This will be out page called "password protected area". 
    1) create a link on your homepage to "password protected area".  Save & publish. (Do not forget to remove this lingk afterwards!!
    2) go to your website via the Internet and go to the link that you have just created. when you have arrived on your page called "password protected area" , copy the URL (http://......googlepages.com)
    Now replace the "page2.html" by this URL.
     
    Example: if the URL for your site that you want to be secured  is: http://johnsmith.googlepages.com/passwordprotectedarea, (do not copy!, use your URL!!!) then the code will be:
    location="http://johnsmith.googlepages.com/passwordprotectedarea"

    You can now remove the link that you created to you password protected area!
  • When you have made these 3 changes to the code, save the file. if you doubleclick the file (login) now you should see a login area. 
  • Now go to Google page Creator and upload the file where you just inserted the code (login.htm) 
  • Create a link from your homepage (or any other page) to the file you uploaded (login.htm).

That should be it!  When you click on the link to "login.htm" you should arrive on your login-page where you can see a login-area. If you enter here the correct password and UserID here, you should be able to enter your password protected area!

 Warning: This password script is not totally secure and the password can be seen if someone views your source code. Do NOT protect anything important with a script like this. 

 

6.How can I get Google Search or Google Sitesearch on my site?

Google gives the code for its search engine right here!
you can also choose to include a sitesearch. When someone uses Sitesearch on your site, they will search ONLY on YOUR site! Don't forget to replace "YOUR DOMAIN NAME" by the URL to your site (ending with .googlepages.com)

 You can also modify the code as you please. I modified it so you can search within all Google Pages: Check it out!
all you have to do for this is replace "YOUR DOMAIN NAME" by "googlepages.com" :-)

Is this tutorial still unclear to you? Want another point of view? check out the corresponding tutorial on Martin's pages!

Bravenet also supplies a sitearch-service. Selcect it from the list of cool tools they offer (for free!!) 


 7.Logon to your Gmail-account directly form your site

 just paste this piece of code directly into your HTML-editor!

<form action="https://www.google.com/accounts/ServiceLoginAuth"
method="post" style="margin: 0px;"> <input name="continue"
value="http://gmail.google.com/gmail" type="hidden"> <input
name="service" value="mail" type="hidden"> <input name="rm"
value="false" type="hidden"> <p style="line-height: 200%;"><input
name="Email" alt="" type="text"> login<br><input name="Passwd"
maxlength="25" alt="" type="password"> password<br><input value="sign
in" type="submit"> </p>
</form>

and you're set! :-)

 WARNING! Be careful when your logging into your Gmail-account from other sites! There is a possible risk of phising! I recommend to only log in to your Gmail from sites of people that you can trust!

 

8. Creating Embedded Video's on your site

This can only be done with Google Video Player, but then again, it's very easy...

 Create a new Page in Google Page Creator, save and publish the page and click "view live". now go to File, Save page as.
give  it a  name  and save as type: webpage, HTML only.

Choose the video you want to play on your site at http://video.google.com and click on EMBED on the right of the movie.
Google will give you a code. Copy it. 
Now go to the file you've just created and  open it with wordpad.  Paste the code here. Save it!

Next, go to GPC, and upload the file you've just saved. All you have to do now is create a link to this file!!

Click here for an example!


TOP

9. Adding an achor reference within the same webpage

 For this we will also be using the HTML-editor. There are two pieces of code that you require: 

 The first one is for your  link in your "table of contents" (example: see top of this page):

 <a href="#DESTINATION">your text</a>

 The second one is placed where you want to "jump to" when you click on a link:

<a name="DESTINATION"></a> 

 Take the first piece of code and paste it into your HTML-editor. replace "your text" by -for example- "TOP". 
If you use "TOP", you 'll have to paste the second part of the code all the way up on your HTML-editor.

watch out that every time you want to jump to another location, you'll have to use another destination!! (for example: destination2. 

Example from THIS site:
In my table of contents there is the following HTML text: 
<p><font size="2">5) <a href="#DESTINATION5">How do I create a password protected area?</a> </font></p>  

 In my webpage self you'll find: 
<p>&nbsp; <a name="DESTINATION5"></a> </p>
<h2>&nbsp;5. How can I create a password protected area?</h2>

So when you click on the link in my table of contents, you will be redirected to Chapter 5: How to create a password protected area. 


TOP

10. How can I Play music LIVE from my own website?

(Example)       For this, you'll need two pieces of code:

The first one should be inserted in the header of your page:

<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>

The other one in in the body of your text:

<ul><li><a href="/YourSong.mp3">Your Song</a></li></ul>

 Now create a new page in GPC (e.g.: Music) , save and publish it, click on view live. Remember to add all of the text required, as you will not be able to do this later on!
 View the page live and click "view live". now go to File, Save page as. Give  it a  name  and save as type: webpage, HTML only. 
Go to the file you've just saved and open it with wordpad. Now paste the first piece of code JUST AFTER the scentence 
<!-hack to avoid flash of unstyled content in IE--> 
(you can find this scentence easily in the code by pressing CTRL+F and typing "avoid" in the search box.)

 The second part of the code is pasted in your body, so before the end of your code (before <body><html>)

replace "YourSong.mp3" by the filename of your song and replace "Your Song" by the title you want to display on your site.

This should be the result: (example)


TOP

11. How can I display moving text?

(example)

Just paste the following code in the body of your text (before <body><html>):

  <p class="description">&nbsp;<div id="g_description">
            <font color="#FF0000"><marquee>YOUR TEXT</marquee></font></div></p>

Replace " YOUR TEXT" by the text you would like to see passing by :-)


TOP

12. Adding a form to your GPC site

Have a look at this example, as soon as someone fills out this form and clicks "submit" I will receive an e-mail with all the data from the form.

First register at bravenet (click on e-mail forms and than "get yours now") (Bravenet is in my opinon by far the best supplier of free forms)

Next, create a new page in GPC (named FORM for example) and save it  to your desktop (or other location) (publish it, view live, file>save page as>html only). Now copy the full HTML code from bravenet (SAMPLES)  to the .htm file of your GPC-site. (Form.htm)

You can make the modifications (adding, renaming, removing ...) to the form by replacing the text in wordpad.(see below) If you have a little more time you can use the Form tutorial.

example: this was the original code for "Name" (in the example)

<div style="font: normal 11px Arial, Sans-Serif;">Name:<br>
<input type="text" name="name" height="10" style=" font: normal 11px Arial, Sans-Serif;"> </div>

 If I wanted to change "NAME" to "NAAM" (=dutch for name). The HTML-code would then look like this: 

<div style="font: normal 11px Arial, Sans-Serif;">Naam:<br>
<input type="text" name="name" height="10" style=" font: normal 11px Arial, Sans-Serif;"> </div>

 If you want to remove a question/part of your form, just select from <div style= until </div>  and delete it :-)
if you want to add another question to your form, just copy a part of the code (from <div style= until </div> ) and change the text as illustrated above...

Is this tutorial still unclear to you? Want another point of view? check out the corresponding tutorial on Martin's pages!

 

13. Adding a clock or counter to your GPC site

 Go to clocklink.com  and choose your style of clock / counter (count up or down). The site will give you your HTML-code.

Create a new page in Google page Creator (the page on which you want the clock/counter to appear) . Edit it now (later will be more difficult) save & publish it. Once you've published it, click on view live. 

Next click FILE, Save page as. Choose HTML only. Now open .htm file that you've just created with wordpad and paste the code from clocklink in wordpad. Be careful to do this BEFORE <body><html> 

 Double click the .htm file (save first) to have a look at your result 

Upload the file to GPC and link to it as a file: and FINISHED! :-)

 

14. Adding a Google Map to your site

This was not very easy in my opinon (it took me quite a while to get the job done) but this is the result: example

First, create a new GPC page, and edit it as you please. next, type MAP LOCATION HERE Where you want the map to be placed on the page. Save and publish the page, click on view live. Click file, "save page as" and save as HTML only. Open the .htm file that you've just saved with Wordpad.

Next get your personal Google maps API-key.

Go to wordpad and search for </head> (press ctrl+F). Paste the following code JUST IN FRONT (no spaces,...) of the head-tag:

 <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR KEY HERE" type="text/javascript"></script>

now replace YOUR KEY HERE by the personal google maps key.

Next, locate the words "MAP LOCATION HERE" which you typed in in the beginning. Remove them and paste the following code in it's place:

<div id="map" style="width: 400px; height: 300px"></div>
    <script type="text/javascript" defer="defer">
    //<![CDATA[
   
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
   map.setCenter(new GLatLng(50.972, 4.872), 13);
   
    //]]>
    </script>
</div>

If you want to center the map automatically on a specific location you will need latitude and longitude data for your location. You can find these here or by using Google earth (location data is displayed in the corner of your screen). The first number is your latitude (E) , the second your longitude (N), the third number (in this case 13) is the zoom.

The  HTML-code of the Google Map I created on my site looks like this: (example) important items are indicated in green

 
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6U6LnC1fI8o1yhFZL0jOrRSH-zhUzeGnH1BWvhxXctuB 5WXxcRQC9AN2t26o9bAjYWiMknK9hUk5IQ" type="text/javascript"></script></head>

<body id="onecolumn">
  <div id="container">
    <div class="wrapper">
      <div id="header">
        <div class="wrapper">
          <h1 id="page-title"><div id="g_title">My Google Maps</div></h1>
          <div style="clear: both;"></div>
          <p class="description"><div id="g_description"> </div></p>
          <div style="clear: both"></div>
        </div>
      </div>
     
      <div id="main-content">
        <div class="wrapper">
          <div class="content-item"><div id="g_body"><p> This Google map shows my neighbourhood, feel free to look around :-)</p><p>Jo. </p>
<div id="map" style="width: 400px; height: 300px"></div>
    <script type="text/javascript" defer="defer">
    //<![CDATA[
   
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
   map.setCenter(new GLatLng(50.972, 4.872), 13);
   
    //]]>
    </script>
</div>

Just upload the file to GPC, link to it (as a file) and you're set! :-)

Is this tutorial still unclear to you? Want another point of view? check out the corresponding tutorial on Martin's pages!


15. Opening a link in a new window

If you want your webpage-viewers to open links they click on your site to open in a new browser window all you have to do is to add a simple piece of code to the link.

Link to my home that opens in a new window: example1
Link to my home that opens in the current browser window  (press back to get back here!): example2

All you have to to is to add the following code between the " and the < of your link in your HTML-editor:
target=_blank 

The code of the link (example2) that opens in the current window (standard in GPC) is:

 <a href="home">example2</a>

After I modified to the code so that the link will open in a new window (example1) it looks like this:

 <a href="home" target="_blank">example1</a>

And yes, it is THAT easy :-)

 

16. Adding Background music to a webpage

important: so far this only works for Internet Explorer.

EXAMPLE

You can not do this directly in GPC so you have to create the page that you want with BG-music, save it, publish it and click View Live. Click File> save page as >html only.

Open the .htm file that you have just saved with wordpad and paste the following code BEFORE <body><html> (the last two words of a Html-code).

<embed src="FILENAME.mp3" autostart="true" hidden="false" loop="false"
height="10" width="10">

now replace FILENAME.mp3 with the filename of the MP3 (I recommend giving it an easy name of just 2 or 3 letters so there are no problems with typing errors etc)

If you wish to autostart the song when someone loads the page autostart should be equal to true.
If you want the song to be repeated over and over again loop should be equal to true.
If you modify height and width the  player will become larger (I recommend height="40" width="400") (as in the example)

Finally upload the song (FILENAME.mp3) to your GPC and upload the .htm file that you have just modified. link to the .htm file as a file.

 Is this tutorial still unclear to you? Want another point of view? check out the corresponding tutorial on Martin's pages!

 

17. Creating a sitemap

One way to help google (or the Googlebot) find your site and index it so it can be seen in Google search results is to add your URL to google (see GPC FAQ). Another way is to create a Sitemap and upload it to Google. It's no guarantee that this will make your page visible in the Google search results, but all bits help :-)

Go to http://www.sitemapspal.com/ enter your URL here (for example: http://jvanbaelen.googlepages.com) and set the options below. They are of very little importance but here is what I filled out:

changefreq: daily
lastmod: (date of today)
priority: 1

I left the 3 last blank.

Click on "make my sitemaps XML now!"  The website will then generate a XML-code for you. Copy this code and paste it into a wordpad document. Rename the wordpad document to sitemapspal.xml (remember to ALSO CHANGE the extension!!!) Once you've correctly changed the extension, the icon will change to a document with a globe on it.

If you don't know how to change the extension (in XP most of the extensions are not displayed) open a random map, select the tab "extra" and select the last one (options or someting like that, I have the dutch version). now open the tab "file types".
select the .TXT extension and click on advanced. now indicate: always display extension

now go to http://www.google.com/webmasters/sitemaps and sign up. They will also ask you to put a file from Goole at the root of your website (just click "upload" in gpc and upload the file). Follow further indications that Google might have.

Note: I took Google quite a while before the results of my sitemap showed up on Google Sitemaps: it took them over a month before the first webpages started showing up...

 

18. Creating buttons (without submenu's) on your site

for the tutorial of Buttons WITH submenus: CLICK HERE!

 go to http://www.buttongenerator.com
pick the style of buttons you would like. click on "click here to edit menu". 

Now replace "button" by the name of the first button and "link1" by the link where the first button should link to.
For example (my site):
I replaced "button" by About me
and "link1" by http://jvanbaelen.googlepages.com/aboutme

NOTE: Since GPC still has some problems with Javascript, you cannot use the sub-buttons... (unless you edit the file on your computer and upload it manually, but since this is quite difficult for an homepage (redirecting) I will not discuss this).

It is possible to get the buttons to work properly, but this has to be done with an uploaded .htm file (example)

So just name all the buttons and assign a link to every button. FIll out your options (menu lay out):for my site I took a vertical spacing of 20 pixels. when youf finished click on "click here to generate your Menu".And click on "click here to download your menu now!" On this page they also give the HTML-code for the reference to their site. If you wish to use their buttons you must link to them (from anywhere on your site). 

Open the unzip the file you've just downloaded and open the folder. inside you will find a map called "buttons". upload all the files from this map to google page creator. 

Finally open the "OPEN ME" file and copy the two pieces of code given there: one in the head of your webpage and one in the body. (this file also suggests to upload the .js and .css file but this is not necessary if you use GPC: it won't work anyway) :-)

You have to make a little modification to the code though: the original code for a button will look like this:

<a href="http://jvanbaelen.googlepages.com/home.htm" onmouseover="setOverImg('1','');" onmouseout="setOutImg('1','');" target=""><img src="buttons/button1up.png" border="0" id="button1" vspace="1" hspace="1"></a><br> 

You will have to remove the word "buttons" (as you can not create a folder named "buttons" in GPC) 
The code will then look like this:

 
<a href="http://jvanbaelen.googlepages.com/home.htm" onmouseover="setOverImg('1','');" onmouseout="setOutImg('1','');" target=""><img src="button1up.png" border="0" id="button1" vspace="1" hspace="1"></a><br>

Do this for every button. (a new button starts in the HTML-code with <a href =http:// .... )

 

19. Adding Google Gadgets

Now this is very easy, and you can do some cool stuff with this! example

Just go to your GPC, and click Site Settings. click on "Enable experimental features". click Yes!
Now if you create a page you'll see below the "images" and "link" button a new button in GPC: "MORE... "

Click it to add cool gadgets from google or other :-) 

 

 TOP

20. Your own favicon

What is a favicon? It's the little icon displayed next to your page URL, for Google Pages, this will be the G of Google. For my page that should be a J.
remark: you can not host your own favicon on GPC, you have to use someone else's, or host one yourself on another website than GPC (Picasa Webalbums or Flickr might be worth a try...)

to do this paste the following code into your webpage (you have to manually upload this file!) and replace the link to the link of the favicon.


<link rel="icon" href="http://www.jewishsf.com/favicon.ico"
type="image/x-icon" />
<link rel="shortcut icon"
http://www.jewishsf.com/favicon.ico"
type="image/x-icon" /> 

If you have found a site with a favicon that you like, you can usually find the favicon at the root 
(e.g. www.google.com/favicon.ico)

the name of the file is usually favico.ico or favicon.ico. you can link back to this file by replacing the link in the code above.

 
 

21. Experimental Features: XSPF music player

This tutorial will allow you to add a music player with playlist directly to your webpage. Just follow the next steps:

1. Go to http://webjay.org  and create an account and a playlist (you can choose from a bunch of other playlists and music available at this site)
2. Go to "Browse" in your Webjay account and select "XSPF" instead of I tunes in the upper left corner of the screen.
3. Enable the experimental features at GPC and add the XSPF music player (you can find it by searching for features and typing "music".)
4. Before you add it, you get a preview of the music player, on the left you can change the URL to your XSPF-file. Change the URL to the URL of webjay, but type .xspf behind it. 
 
Is this tutorial still unclear to you? Want another point of view? check out the corresponding tutorial on Martin's pages!
 

 

 

22. Adding a flash slideshow for your Flickr pictures

Personally I finde the result of this tutorial very good-looking. :-)

Just follow the following steps to come to the same result. I have to warn you though that the flash slideshows might not work for IE...

 We start by opening a Flickr account. do this here. Login to your Flickr-account and click "You" > "upload photo's". Upload the pics you wish to display in the slideshow.

Paste the following code in your HTML-editor:


<style type="text/css"><!--
.dtop,.dbottom{display:block;background-color:#ffffff /* change the color of the corners here */}
.dtop b,.dbottom b{display:block;height:1px;overflow:hidden;background:#000}
.d1{margin:0 5px}.d2{margin:0 3px}.d3{margin:0 2px}.dtop .d4,.dbottom b.d4{margin:0 1px;height:2px}
--></style>
<div style="text-align:center"><div style="background:#000;width:550px">
<b class="dtop"><b class="d1"></b><b class="d2"></b><b class="d3"></b><b class="d4"></b></b>
<iframe style="margin-top:10px" src=http://www.flickr.com/slideShow/index.gne?user_id=XXXXXXXX@NXX frameBorder=0 width=500 height=500 scrolling=no></iframe><br />
<a style="font-size:10px;text-decoration:none;color:#555" href="http://blogger-templates.blogspot.com/2005/09/flash-slideshow.html">Flash Slideshow</a>
<b class="dbottom"><b class="d4"></b><b class="d3"></b><b class="d2"></b><b class="d1"></b></b>
</div></div>

 Replace the XXXXXXXXXX@NXX by your Yahoo ID. You can find it in the URL of the webpage if you surf to "your photo's" of any other site in Flickr. Your User ID is always a part of the URL.

This should do it.

[OPTIONAL] If you want more than one slideshow, you'll have to split up your pictures in Sets in Flickr. All you have to do is add a little part of code (Set ID) to the code above:

You'll find the Set ID when you open the relevant Set in Flickr in the URL.
Example
When the URL of a set is like this: http://www.flickr.com/photos/62716010@N00/sets/72157594168347827/
Then the Set ID is 
72157594168347827
the address of the iframe will be "...user_id=XXXXXXXX@NXX&set_id=72157594168347827"   

 

23. Adding a site-poll to your Google Pages

You can get your Mini-poll here. (select it from the list of Bravenet Tools). This is a very good bravenet-Tool that I have been using myself for quite a while! Check it out! You can find the mini-poll under the "Interact tools". Click it, Next click "Get yours Now". continue with the free version. 

First create a new poll and  modify it's look and feel as you wish. Also modify the question you will be asking to your visitors and the possible answers. You can modify these settings afterwards without having to RE-paste the code!!
If you're finished with this, select "Copy & Paste code" and paste the code in a page that you saved to your pc (create a new webpage in GPC, View it live and click File > Save as > webpage, HTML only).You can open the .HTM file with wordpad. Paste the code BEFORE the words <body><HTML> in the html-code!! (these are the last two words of a Html-code)

When you've pasted the code in the .htm file, save it and upload the file to your GPC. Link to it as a file and.....DONE! :-)


24. Embedding your Google Reader

Example
For those of you who don't know google Reader, Check it out here!
If you wish to display certain topics from Google Reader into your website like I did, just give your topics a label or a star and then go to "SHARE" in Google Reader. Select the labels you wish to share with your website-visitors. Under "put a clip on your site" you can modify the look & feel of the google reader display on your site. Click "get code now".

Now  a new webpage in GPC, View it live and click File > Save as > webpage, HTML only. You can open the .HTM file that you just saved with wordpad. Paste the code from Google Reader BEFORE the words <body><HTML> in the html-code!! (these are the last two words of a Html-code)

When you've pasted the code in the .htm file, save it and upload the file to your GPC. Link to it as a file. 

 

25. Displaying your Google Calendar on your site

just follow the next steps: 

  1. Login to your Google Calendar. on your left side you can see the name of your calendar with next to it a  little triangle. Click the small triangle and choose "Calendar Settings".
  2. Click the HTML icon next to "Calendar Address". You will be shown a pop-up from Google. Click on "CONFIGUTRATION TOOL".
  3.  FIll out the options and click on "update URL"
  4. Go to your Google Page Creator and click "Edit HTML" on the webpage where you wish to add your Google Calendar. Paste the code given by Google Calander into the HTML-editor.

 

 TOP

Something still not clear?  Visit Martin Blow's Technical Pages! 

 

26. Adding Buttons WITH submenu's to your website

First of all it is important to know that you can't have menu's on your GPC homepage. A way around this is to have a welcoming page (like mine: click here) which redirects you to the actual homepage (a manually uploaded file) 

example: my google homepage is: http://jvanbaelen.googlepages.com 
but my real homepage is: http://jvanbaelen.googlepages.com/home.htm

To come to this result you should take the following steps:

  • save your current homepage in GPC to your computer: surf to the URL of your homepage and click FILE>SAVE PAGE AS in your browser. under "SAVE AS" you select "HTML ONLY". save the file as "HOME".
  • Change your GPC homepage to a welcoming page or something like that
  • make a big link from your welcoming page to the file HOME.HTM (that you just saved to your computer)

If you don't want a  welcoming page you could always use a redirect code. I should advise against this though: there have been many people who've had serious problems with GPC after pasting the redirect code, some even had to delete their GPC account...

Next, go to www.buttongenerator.com and see if you can find a menu that you like. Not all menu's are available for free though: some menu's have to be paid for, but become free after a few hours/days. 
When you've located a nice menu, click on "click here to edit menu" (just below every menu on buttongenerator)

buttongenerator.com will now ask you to fill in the labels for your buttons and submenu's and their links.
Do this for every button and submenu (in the left column you fill in the labels and in the right column the links) the labels with a "-" in front of them are part of a submenu.
Example: (a piece from my menu)

About me                     http://jvanbaelen.googlepages.com/chooseyourlanguage
-Dutch                         http://jvanbaelen.googlepages.com/aboutme
-English                      http://jvanbaelen.googlepages.com/aboutme%28eng%29
-My games                    http://jvanbaelen.googlepages.com/mygames
-My music                     http://jvanbaelen.googlepages.com/mymusic
Photo's                         http://jvanbaelen.googlepages.com/foto's
-Normandië                   http://jvanbaelenhomepage.googlepages.com/foto%27snormandi%C3%AB2005
-Ardennen                     http://jvanbaelenhomepage.googlepages.com/foto%27sardennen2005
-Snowman                   http://jvanbaelenhomepage.googlepages.com/sneeuwman2005
-New Year                   http://jvanbaelenhomepage.googlepages.com/nieuwjaar2005-2006
-grand ball                   http://jvanbaelenhomepage.googlepages.com/galabalaloisiana
-LAN-party                   http://jvanbaelenhomepage.googlepages.com/lan-party
-other                          http://jvanbaelenhomepage.googlepages.com/andere
GPC tools & FAQ        http://jvanbaelenhomepage.googlepages.com/gpcinfo           
Extra                            http://jvanbaelen.googlepages.com/extra
-Downloads                 http://jvanbaelen.googlepages.com/downloads  
-Links                          http://jvanbaelen.googlepages.com/links
-Video                        http://jvanbaelen.googlepages.com/video2  
-Audio                        http://jvanbaelen.googlepages.com/music.htm 
Contact me                 mailto:Yourmailadress@gmail.com


If you've finished typing and copy-pasting all this information, I STRONGLY reccomend you to copy everything (labels and links) to a word or text-file for later reference. If something goes wrong with your menu or you want a new one you don't have to do all this work again! 

For a "CONTACT ME" button, you should use the MAILTO -tag. 

 If you want a menu in the same layout as mine, you don't have to change anything to the options you see below.

Next, click on "click here to generate your menu now" You will be given an example of how the menu will look in the end (if everything goes fine...) Click on "Click here to download your menu". Your menu will be saved to your computer. Extract the files using Winzip, Winrar,...

Once you have extracted all the files, you'll see a folder called "BUTTONS". Upload all the images in this folder to your GPC account. 

You will also see a file named "OPEN ME.HTM", open it :-) It will give you 2 pieces of code. What you have to do with them is explained in the next steps:

A. MODIFY HTML CODE:

Copy the first code in the <HEAD> section of the .htm file (HOME.HTM)  that you saved to your computer in the beginning of this tutorial. To do this, open the .htm file with wordpad (or dreamweaver, frontpage,...) and search (CTRL+F) for <HEAD>. 
(the HEAD- section begins with the tag <HEAD> and ends with the tag </HEAD>). Just paste the code just after the <HEAD> tag.

The second code has to be modified before we can add this to our HOME.htm file. 
The original code looks like this:

<table border="0" cellpadding="0" cellspacing="0"><tr><td>
<a href="http://jvanbaelen.googlepages.com/chooseyourlanguage" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target=""><img src="buttons/button1up.png" border="0" id="button1" vspace="1" hspace="1"></a><br>
<a href="http://jvanbaelen.googlepages.com/foto\'s" onmouseover="setOverImg('2','');overSub=true;showSubMenu('submenu2','button2');" onmouseout="setOutImg('2','');overSub=false;setTimeout('hideSubMenu(\'submenu2\')',delay);" target=""><img src="buttons/button2up.png" border="0" id="button2" vspace="1" hspace="1"></a><br>
<a href="http://jvanbaelenhomepage.googlepages.com/gpcinfo" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3');" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu(\'submenu3\')',delay);" target=""><img src="buttons/button3up.png" border="0" id="button3" vspace="1" hspace="1"></a><br>
<a href="http://jvanbaelen.googlepages.com/extra" onmouseover="setOverImg('4','');overSub=true;showSubMenu('submenu4','button4');" onmouseout="setOutImg('4','');overSub=false;setTimeout('hideSubMenu(\'submenu4\')',delay);" target=""><img src="buttons/button4up.png" border="0" id="button4" vspace="1" hspace="1"></a><br>
<a href="*" onmouseover="setOverImg('5','');overSub=true;showSubMenu('submenu5','button5');" onmouseout="setOutImg('5','');overSub=false;setTimeout('hideSubMenu(\'submenu5\')',delay);" target=""><img src="buttons/button5up.png" border="0" id="button5" vspace="1" hspace="1"></a><br>
<a href="*" onmouseover="setOverImg('6','');overSub=true;showSubMenu('submenu6','button6');" onmouseout="setOutImg('6','');overSub=false;setTimeout('hideSubMenu(\'submenu6\')',delay);" target=""><img src="buttons/button6up.png" border="0" id="button6" vspace="1" hspace="1"></a><br>
<a href="*" onmouseover="setOverImg('7','');overSub=true;showSubMenu('submenu7','button7');" onmouseout="setOutImg('7','');overSub=false;setTimeout('hideSubMenu(\'submenu7\')',delay);" target=""><img src="buttons/button7up.png" border="0" id="button7" vspace="1" hspace="1"></a><br>
</td></tr></table>

 While we cannot create folders in GPC, we have to remove the folder name "buttons" from the code. We do this in for EVERY button. The words that have to be removed are indicated in green. The number of buttons may be different from the code given above. 

for EVERY button the code should look like this:
<a href="http://jvanbaelen.googlepages.com/chooseyourlanguage" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target=""><img src="button1up.png" border="0" id="button1" vspace="1" hspace="1"></a><br>

If you want to modify the  distance between the buttons (like I did),  all you have to do is  change the number in  red for every button. The setting for my homepage is 20. (change to: vspace="20" )

Finally, paste this code in the .htm file for your homepage (Home.htm)

B. MODIFY JAVASCRIPT CODE

Among the files you have obtained from buttongenerator.com you'll find a file called MENUSCRIPT.JS. Open this file using wordpad (or dreamweaver, frontpage,...) 

The modification that has to be made is:

  • Changing the folder name (GPC can't work with folders): 
    The original code looks like this: 
    var buttonFolder = "buttons/";

    This should be changed to:
    var buttonFolder = "";
     

C. Completing the submenu

When both the codes (HTML and Javascript) have been modified, all that remains is to upload our result. the files that have to be uploaded to Google Page Creator are:

Menuscript.js
Menustyle.css
Home.htm

D. Result

The result of this (quite long and complicated) tutorial is that when you go to your Google Pages Website (e.g.: http://jvanbaelen.googlepages.com), you get a WELCOME-page. Here you can continue to the actual homepage (e.g.: http://jvanbaelen.googlepages.com/home.htm). The actual homepage is now equipped with a stylish menu with submenu's when you move your mouse over them!

E. EXTRA: adding a submenu item

When you've got your menu fully operational, it is possible that after a while you'd like to add a submenu item.
This is done by adding a line to the javascript code for this submenu. 

Example:
The submenu for "About me" on my homepage:
subInfo[1][1] = new Array("Dutch","http://jvanbaelen.googlepages.com/aboutme","");
subInfo[1][2] = new Array("English","http://jvanbaelen.googlepages.com/aboutme%28eng%29","");
subInfo[1][3] = new Array("My games","http://jvanbaelen.googlepages.com/mygames","");
subInfo[1][4] = new Array("My music","http://jvanbaelen.googlepages.com/alltimetop10","");
subInfo[1][5] = new Array("Starred","http://jvanbaelen.googlepages.com/mygooglereader.html","");

Now let's say that I would like to add a new submenu item called "My house ". (suppose that I had created a page in Google Page Creator called  "My House".
All I would have to do is add the following line after "
subInfo[1][5] = ".
subInfo[1][6] = new Array("My House","http://jvanbaelen.googlepages.com/myhouse","");

 Don't forget to change the second number to "6" (or the number following the last submenu item in the current menu) 

the numbers [1] and [5] behind "subinfo" have the following meaning:
[1] : it is the submenu for the first button.
[5] : it is the 5th line in the first submenu. 

 

F.In case of problems

This was a very complicated tutorial and it wouldn't surprised me if I overlooked a little modification that had to be made or something like that... So ALL feedback is more than welcome!! If something doesn't seem to work, contact me! But also if all is working well: please let me know! (so I can establish wether this tutorial is 100% foolproof or not...)

A common problem with this menu is that the color of the text changes to light-blue. This is because Google Page Creator can't work with CSS yet (CSS determines the style of your text in the submenu's). I have been having the same problems as well,  and have not been able to find a proper solution for this specific problem... The only advice I can give you is to opt for a button style with a dark background, this way the light-blue text still remains readable...

 
 
 

27. A Flash slideshow for Picasa Web Albums

For an example of what the result will look like, click HERE!

You can do this tutorial without having to download Picasa2 (by Google). Nevertheless I recommend having Picasa2 on your computer! I use it all the time and it's very easy to upload and manage your pictures! Get picasa2 HERE!

Now we can begin our tutorial. 
First of all: go to Picasa Web Albums. sign up for it and log in.

Next, create a new album and upload some of your pictures. (I recommend resizing the photo's to 100-500 kb, this way the uploading will go faster and you can store more photo's!)

When you've finished uploading,click on "Slideshow" (above your uploaded pics). Copy the URL displayed by your browser.
Example: http://picasaweb.google.com/jvanbaelen/Snowman2005/photo#s4968748349593681938

 Next, paste the following code in one of your GPC-webpages using the html-editor:

<iframe style="margin-top: 10px;" src="http://picasaweb.google.com/jvanbaelen/Ardennen2005/photo#s4968745626557284370" align="middle" frameborder="0" height="550" scrolling="no" width="550"></iframe> 

BUT replace the code in GREEN by the link you copied in the step above (the link to the slideshow page)

Save the page, and click "view live" to see the result :-)

 

28. Embedding Pictures stored outside of GPC

This can be a very useful tutorial if you have reached (or going to reach) the 500-file-limit in GPC or the 100MB-limit. This tutorial will allow you to store your pics elswhere on the internet, but have them displayed on your Google Pages!

First, Sign up for Picasa Web Albums (By Google) here.
Now create a new album, and upload a picture to it.  (on the left side when you've opened the album)
Click on the picture you've just uploaded and select "Embed in Blog/Myspace" on your right hand side.
Copy ALL the code given by Google to your HTML-editor in GPC.
The code will look like this:

<table style="width:auto;"><tr><td><a href="http://picasaweb.google.com/jvanbaelen/DaHonu2006/photo#4973517024447430674"><img src="http://lh4.google.com/jvanbaelen/RQV7YgaMABI/AAAAAAAAAP8/p8zdKNU6JWk/weekend%20weg%20036.jpg?imgmax=288"></a></td></tr><tr><td style="font-family:arial,sans-serif; font-size:66%; text-align:right">From <a href="http://picasaweb.google.com/jvanbaelen/DaHonu2006">Da Honu 2006</a></td></tr></table>

Save The page, publish it, and view it on the web. Satisfied with the result?
If not, you can alway remove the text that refers to the album, or make the pic smaller or larger with GPC.

By doing all this, you've got 250MB extra webspace for pictures added to your GPC-account :-)

 
 TOP

29. Adding Google analytics to your website

 

Google analytics is the best hitcounter I've come across so far, and it's 100% free!Sign up for Google Analytics here: www.google.com/analytics.

Create a new analytics account and fill out all the information requested by Google.When you've finished doing that google will deliver you the javascript code that has to be pasted in every webpage. Select the code and paste it in the Edit-html screen of your GPC, and do this in EVERY webpage that you wish to track!!

When later on you wish to add the code to some new webpagesyou've just created, sign in at your Google analytics account and click on "Edit" (settings) in the table in the center of the screen. At the top right of the screen you will see a link that says "Check Status" click it. Google will now display the analytics-code again.


Note: in this screen google says "Copy and paste the code segment into the bottom of your content, immediately before the </body> tag"
Forget about the <body> tag: GPC leaves this out. Just paste the code anywhere in the edit-html screen!

Note 2: Unlike Statcounter, Google Analytics only processes the data generated by your website once a day. So if you've pasted the analytics-code today, you'll have to wait until tomorrow to see your stats...

 
 
 

30. Adding a Clustrmaps to your website

(example)

This is very easy, but a cool tool to have on your homepage: it allows other visitors to see from which countries other visitors on your website came.
Go to www.clustrmaps.com and click "get one" at the top. Register, and fill out all information requested. They will then supply a html-code that you have to paste in the edit-html screen of your GPC.

Pay attention to where you're pasting the code: the minimap (like the one on my homepage) will appear where you've pasted the code, so don't paste the code just anywhere, take into consideration where you would like the minimap to appear...