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:
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.
Coming soon: Creating buttons WITH submenu's Tutorial!!!
+ 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
Last updated: 16th June
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!
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. 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!
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 login to your Gmail from sites of people whom you 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> <a name="DESTINATION5"></a> </p>
<h2> 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"> <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 on your site
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 :-)
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.
to do this paste the following code into your webpage (you have to manually upload this file!) and replace the link to the iink 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 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. 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:
- 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".
- Click the HTML icon next to "Calendar Address". You will be shown a pop-up from Google. Click on "CONFIGUTRATION TOOL".
- FIll out the options and click on "update URL"
- 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? Want more tutorials? Visit Martin Blow's Technical Pages!