Short presentation of Google Page Creator

The page manager of Google Page Creator :

The page editor (Experimental Features disable) of Google Page Creator :

top

Create a redirection

Write this code to the second header and the page will be change automatically :

<script type="text/javascript">document.location='[new link]';</script>

Now if you want to display a message before the redirection occur, just add a temporisation :

<script type="text/javascript">setTimeout("document.location='[new link]';",[tempo]);</script>

The value of the temporisation must be given in milliseconds (1s=1000ms).

top

Modify the color of the links

To modify the style properties of any kind of objects in HTML, the main use is to create a 'style' property in the tag. Here, if we want to modify the color of a specific link, we should write :

<a href="[url]" style="color:red;">My red link</a>

You have several possibilities to define the color of your link. You can choose the standard colors (red, black, white, blue, etc.), define the red green and blue (rgb(255,0,0) for the red) properties of your color or give its hexadecimal value (#ff0000 for the red).

Important ! For some of the templates of Google Page Creator, the property '!important' is used at the end of there CSS codes. To have the priority, just add '!important' to your color property as shown here :

<a href="[url]" style="color:red !important;">My red link</a>

This technique work for all the other CSS properties so if your modifications are not shown, check if, with this property, it still don't work.

top

Create and call an external stylesheet to your pages

Now, if you want, by example, change all the links of all your pages, the good solution is not to apply the previous links (of course!) but to call an external stylesheet. This file must have the *.css extension and respect the CSS conventions for the code. So if you want to erase the underlined style for all your links, your CSS file must have :

a {
text-decoration: none !important;
}

And in the second header, you will need to load this stylesheet with this code :

<script type="text/javascript">
document.write('<link href="[url of the css file]" type=text/css rel=StyleSheet>');
</script>

For having more informations on the CSS code here.

You can apply a general color with the same technique to all of your links with the 'color' property.

top

Upload a file to Google Page Creator

To upload a file to Google Page Creator, nothing is easier! On the right side of your Google Page manager page you should see this kind of column : this is the file manager. Here you can upload and erase your files (any kind of files!) :

top

Create links through images

In the editor pge of GPC, insert the image you want to use as a link. Then, click on the 'edit HTML' link on the bottom right corner and find the correspondent tag for your image (you can use the name of the file). Now, you should have all around the <img> tag, two <a> link tags. In the 'href' property of the first, replace its content by your URL, save your changes and publish. The complete code for this is :

<a href="[your url]"><img src="[your img url]"/></a>

The previous code is given in XHTML but Google Page Creator erase the '/' at the end of the <img> tag.

top

Create links to the same page (anchor)

If you want to create internal links to one of your pages, as the content summary on this page, you will need to use the HTML anchor technique. For doing this, if you want to create an internal link to a title, edit the HTML and in the <h2> tag, by example, add an 'id' as shown here :

<h2 id="[my id]">My Title linked</h2>

This method work for any HTML tag, so you can create an internal link to an image or anything else. Now, if you want to create an internal link to text which don't have any specific tag, you will need to add something to create the link. Usually, we use the <span> tag and add the 'id' inside as shown here :

<p>
bla bla bla bla bla bla bla bla <span id="[my id]">bla bla bla</span> bla bla bla bla bla
</p>

Now, to do the link, in a <a> tag, at the end of the 'href' property, add '#[my id]' :

<a href="[url of the current page]#[my id]">My link</a>

For more informations :

top

Insert a video from Google Video or YouTube!

If you want to insert a video from Google Video, the technique is the following : copy/paste. By example, if the video we want to insert come from Google Video, in the green link , you should read 'video.google.com', as shown here :

Click on the video to open its page and on the right side, click on the 'Email - Blog' button. Copy the code given in the field :

Then in Google Page Creator, edit the HTML of your page and paste this code where you want :

Save your changes, publish... the video is now on your page.

Note that the player is close to that used in the Google Video page.

Now, if we want to insert a video from YouTube!, in fact you can apply exactly the same method. In the green link in the Google Video search page, you should read 'www.youtube.com' :

Click on the video to open it in YouTube!. On the right side of the video, you should see this kind of panel :

Copy the content of the embed field and paste it in your page by the edit HTML frame :

Save your change, publish and view live... You should now have this video in your page.

One more time, note the player used...

top

Add a favicon to your Google Page Creator site

Firefox

For Firefox, a lot of different sorts of icons can be used. With the following code, you will insert a favicon to your site :

<script type="text/javascript">
var favicon = document.createElement('link');
favicon.setAttribute('rel', 'icon');
favicon.setAttribute('type', 'image/[type of your icon (ie:png)]');
favicon.setAttribute('href', '[url of your icon]');
document.getElementsByTagName('head')[0].appendChild(favicon);
</script>

This code can be written in the second header of your page by example.

Internet Explorer and Firefox

For Internet Explorer, only an icon (*.ico) file can be called. The code is close to the previous :

<script type="text/javascript">
var favicon = document.createElement('link');
favicon.setAttribute('rel', 'icon');
favicon.setAttribute('href', '[url of your icon]');
document.getElementsByTagName('head')[0].appendChild(favicon);
</script>

One more time, this code can be written in the second header.

top

Add metatags to your page

With the javascript, it is possible to you to add some metatags to your page. The method is always the same, so I will just explain with an example: insert a description of your page.

<script type="text/javascript">
var description = document.createElement('meta');
description.setAttribute('name','description');
description.setAttribute('content','A page on Google Page Creator');
document.getElementsByTagName('head')[0].appendChild(description);
</script>

Now, when you seee your published page, you can try to find your metatags in searching in the 'page info' :

In Firefox, you should see :


For more informations about the meta tags :

top

Insert an external document in a GPC page

In Google Page Creator and any other HTML page, it is possible to insert an external document into a webpage thanks to the iframe tag. In GPC, just insert the following HTML code where you want in your page (use the 'edit HTML' link on the bottom right corner of the editor page):

<iframe src="[url of your file]" width="[width]" height="[height]">
<a href="[url of your file]">Link to the document</a>
</iframe>

The iframe create an area in the webpage where the document will be shown. Some browsers do not have the ability to display the content inside an iframe. That is why you need to add a link to your file, just for visitors who can't use this functionality. Note that the link is note visible for all the other visitors.

Examples :

text document (*.txt)HTML document

...


For more informations about the iframe tag :

top

Insert a gadget in GPC

Directly from the GPC Editor

From the editor page of Google Page Creator, the addition of a gadget is very simple. Click in a edition box where you want to add your gadget and click on the link on bottom right corner of the page 'add gadget' as shown on the following picture :

You should now see a Google's styled frame where you can search an interesting gadget in the directory of Google. If you just add a gadget like these presented here, just click on the picture of this gadget to enter in the parameter page (if available for the gadget that you choose).

Now, if you want to add a gadget that you find on the web and you just know its URL, you can click on the link 'add by url' :

A new text field appears just below the previous search field and you can enter in the URL of the gadget you want to insert. Note that a Google gadget is a XML file, so the only URLs available must end by '.xml'.

Click on the 'Add' button and you should arrive in the parameter page of the gadget. After the modification of the parameters of this gadget, click on the 'OK' button to insert it in your web page. You can now modify its location in your page, its width and its height and reedit its parameters. The appearance of a gadget in the Google Page Creator page looks like :

The result of the gadget presented just above in a real is very simple to obtain. This picture is the picture of the gadget GPRate present on the top of this page just below the title!

From the syndication page

First of all, what is the syndication page? The syndication page is Google's page where you can modify all the parameters of a Google gadget and view the result in real time. The original page has the address :

http://gmodules.com/ig/creator?url=

At the end of the previous URL, you can add the URL of your gadget and this page will do the rest. By example you can see the result by clicking on the following link :

http://gmodules.com/ig/creator?url=http://gilles.rasigade.googlepages.com/GVideoDL.xml

The page that you obtain should (I hope so!) look like the following picture :

After having modified all the parameters present on this page in the way you want, click on the button 'Get the code', copy the code given just below and paste it where you want in the HTML code of your web page.

In Google Page Creator, to add some HTML code, just click on the link 'edit HTML' on the bottom right corner of the edition page and paste the code on the correct place in the new frame.

Publish your page and the gadget should now be added to your page. Note here that it can be preferable if you use Google Page Creator to insert a gadget directly from the editor just because the syndication add borders and adds to each gadget.

References :

top