This page is best viewed with Mozilla Firefox:

In this section, you will learn how to enhance your website in a couple of minutes!!! I had been using google page creator for more than 1 year. I went through the pain of learning by myself lots of interactive and attractive stuff to add to your webpage. I have listed the tips in a random manner which means you can add each one independently of the others.

I highly recommend that you visit my Google Page Creator FAQ since it is much more comprehensive.

Google's page creator is targeted at people who want to build a website, but have no clue how or where to start. It contains everything you need to build in minutes a functional website. First, the domain name will be as follows: http://YourName.googlepages.com/, thus no worries for choosing it. Second, hosting your website is automatically ensured by GooglePageCreator once you click on the publish button. Third and most importantly, you don't need to worry about learning or even knowing a word on how to code HTML.

Each tip contains a brief description, prerequisites, expected implementation time, and the code to add.

I keep on updating and adding new easy-to-add pieces of code.Keep on checking my website (press ctrl+D)

On this page there is information about how to:

Create pages having the same GPC design

Add google videos

Play live music using Javascript

Play live music using XSPF Music Player

Include a google search bar

Upload large files bigger than 100MB

Add a stats counter to your site

Link pictures to pages

Add Anchor reference within the same page

Add contact me form Linked to your Email

Redirect automatically your Google Pages

Redirect page automatically with timer

Add Google Maps

Add Interactive Java Script Menu

Add Google Picassa Flash Player

Add your own website Icon

Add a Marquee (Moving Text)

Open Link in a new Window

Add a clock to your website

Embedding your Flash files on your website

Add a shout box

Embed Google Docs

Add a dynamic box that move with the page scroll

AdSense Insider Tutorial

Useful Links

Top

Create pages having the same GPC design

Description: You will be able to edit and add advanced options to your webpage while using the same GPC design you have choosed ni GPC Manager.

Example: Click Here to look at an example. This is a page edited and enhanced in Microsoft FrontPage. You notice that it has the same theme design of GPC.

Prerequisites: You need to create a page without the content using google page creator and publish it. Then you view the site using your browser and save it on your computer (Click on File then Save As). Next you have the choice of either edit the saved page using a notepad (for advanced user) or a GUI (Graphical User Interface) HTML editor (for novice users) like Microsoft FrontPage.

Code to add: Add any code to enhance you page: Embedded content (Play Music Live), GPC non-supported Web Components (Marquee which make text to scroll horizontally the screen, Interactive Button which let you have image rollover button with text ), and most importantly JavaScript (search the web for millions of ready-to-use JavaScripts)

Top

Add google videos

Description: You will be able to post on your webpage any google video available on video.google using the google video player.

Example: Click Here to look at an example. In this example you can notice that there are 4 google videos outputed at the same time. It is super easy, believe me!!!

Prerequisites: In order to insert a google video you definitely need to add an embedded content. But in case you try to add any embedded content through the HTML editor the creator removes it before the page goes live. In order to get around this problem, your only option (until now, hoping that they extend GPC to support embedded content) is to upload your HTML file (check uploading your own HTML pages using GPC design) in which you can add any code you want and would work fine.

Code to add:

<embed style="width:400px; height:326px;" id="VideoPlayback0" align="middle" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?videoUrl=http%3A%2F%2Fvp.video.google.com%2Fvideodownload%3Fversion%3D0%26secureurl%3DoQAAAPXhqGFm66n3aw_97JuqIsSlHA9icacxpqsc2fVGLExmt-A2NHLuP7nmF5L-GtUqEKqqdSmCGOxfMn4BM8ixd7Lk07XWev11NFKyKG7pPcLL3DhPo0cpvQDVpVHfLh2BO3zo5KPVw6yI9nR-5kWDoeqXXQ5EhwGyWWQdbHh3iiWfa8uIwdh01GOmkXRFvD_E9cgWzP13M9Rf_ve5rmlw0tyxB0Jl67r5GK4O11NQDGpt%26sigh%3DVGccijslI38KihvV9IHLVehWBUU%26begin%3D0%26len%3D35433%26docid%3D-1179199752553564847&thumbnailUrl=http%3A%2F%2Fvideo.google.com%2FThumbnailServer%3Fcontentid%3D7547ca8caa119fba%26second%3D5%26itag%3Dw320%26urlcreated%3D1143380351%26sigh%3DRvr72aiKv0M1ykiggswDCiCJ8kQ&playerId=-1179199752553564847" allowScriptAccess="sameDomain" quality="best" bgcolor="#ffffff" scale="noScale" wmode="window" salign="TL" FlashVars="playerMode=embedded">

This code is generated by video.google when you click on embed on the right of the video you are watching. Each video has its own code so everytime you want a video you have to copy and paste the code generated by the embed button.

Top

Play live music using Javascript

Description: You will be able to listen live to mp3s (streaming) uploaded to your GPC account via your webpage

Example: Click Here to look at an example. In this example you can notice that there are 7 MP3 files.

Prerequisites: Playing MP3s requires that you use a bit of Java scripting. But GPC unfortunately does not support JavaSript and removes it before the page goes live as in the case of embedded tag. You have to upload your own HTML file as a way out of this limitation (check uploading your own HTML pages using GPC design). You have to add the following 2 pieces of code respectively within the head's and the body's opening & closing tags of the HTML file before uploading it to GPC.

Code to add (within the head section):

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


Code to add (within the body section):

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

Don't forget to upload your MP3 file and to change the anchor tag (<a href="...") in the previous code to reference the name of the uploaded MP3file.

If you want to put more than 1 song than all you have to do is to add within the unordered list tag (<ul>...</ul>) another list item tag (<li>...</li>) and so on.

Code to add for multiple mp3 files list (within the body section):

<ul><li><a href="/YourSong1.mp3">Your Song1</a></li><li><a href="/YourSong2.mp3">Your Song2</a></li></ul>

Top

Play live music using XSPF Music Player

Description: You will be able to play mp3s (streaming) in a classy jukebox linked to your favourite playlist

Example: Click Here to look at an example. In this example you can notice that there are 7 MP3 files in my playlist (the same as the Java Srcipt example files). I removed the Mp3 files for copyright and to save on my GPC bandwidth

Prerequisites: You can add the XSPF as a Gadget NOW. This is my example

Code to add:


Top

Include a google search bar

Description: You will add the Google Search standard bar to your webpage.

Example: Click Here to look at an example. It's practical, nah?.

Prerequisites: We will use GPC-supported HTML tags. So you need to locate the Edit HTML link in the left bottom side of your browser and then click it. Decide on where you want to insert this bar and then insert the followin code.

Code to add:

<form method="get" action="http://www.google.com/search"><input name="ie" value="UTF-8" type="hidden"><input name="oe" value="UTF-8" type="hidden"> <table align="center" bgcolor="#ffffff"><tbody><tr><td valign="top"><a href="http://www.google.com/"><img src="Google_logo_Small.gif" alt="Google" border="0"></a></td><td><input name="q" size="31" maxlength="255" value="" type="text"><input name="btnG" value="Google Search" type="submit"></td></tr></tbody></table> </form>

Dowload Google logo which is referenced by the previous code and then upload it to your GPC account manager.

Top

Upload large files bigger than 100MB

Coming Soon...

Top

Add a stats counter to your site

Description: You will be able to analyse and monitor all the visitors to your website in real-time! You will add a free yet reliable invisible web tracker, highly configurable hit counter and real-time detailed web stats.

Example: Everytime you login to any webpage of my website I can know the following about your visit: Date, Time, Browser, OS, Resolution, Country, Host Name/Web Page/Referring Link, City...

Prerequisites: There are many free stats counters online but the one i am using is Statcounter and it looks more than enough till now. Click on the "Edit HTML" link in the bottom right hand corner and copy & paste the code generated by statcounter.com in the footer of your webpage. Recently Google developed a very nice tool for website statistics: Google Analytics. I advise you to use it. They give you the code to copy and paste. So login with your google account and follow the steps.

Code to add: It should be generated by the statcounter.com once you register. BE AWARE of the fact that you have to choose the "Generate HTML code only" option during the registration process. GPC does not support Java script. Lately GPC is supporting Javascript so you can choose a javascript code.

Top

Link pictures to pages

Description: You will be able to link pictures to pages. When you click on an image you will open a pre-specified webpage

Example: Click Here to look at an example. In this example, you will be able to go to my picture webpage by cliking on the main picture on my homepage.

Prerequisites: Adding a reference to an image is extremly simple in HTML. But unfortunately GPC doesn't support it. So all you have to do is to add the picture you wan to link it using GPC editor. Then click on the "Edit HTML" link in the bottom right hand corner.

Code to adjust:

You have to locate the translated code of the image you had added. Search for:

<a style="..." href="YourImage.gif/YourImage-full.gif"><img src="YourImage.gif" style=""></a>

and adjust it as follows:

<a style="..." href="YourWebpage.html"><img src="YourImage.gif" style=""></a>

Or alternatively the link can be done easier. All you have to do is to add the href attribute to img tag likewise: <img ... href="YourPageYouWantToLinkTo"> where the ... are anything you find in an img tag added by GPC.

Top

Add Anchor reference within the same page

Description: You will be able to jump within your webpage by click on a hyperlink text linked to a specific region in the same webpage.

Example: Click Here to go to the top of this page. I did the same to jump to every tip in this section.

Prerequisites: We will use GPC-supported HTML tags but you can't add them using the GPC editor. So you need to locate the Edit HTML link in the left bottom side of your browser and then click it. You should first decide where your destination line and source link line would be.

Code to add (source):

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

Code to add (destination):

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

Every time you need to add an intra-webpage hyperlink you need to chsoose a different name. For example DESTINATION2.

Top

Add a contact me form linked to your email

Description: You will be able to get web users' feedback which are sent to your email by just completing a simple form.

Example: Click Here to go to my contact me webpage

Prerequisites: You will use GPC-supported HTML tags, so you need to locate the Edit HTML button in the left bottom side of your browser and then click it. You should register yourself in http://jotform.com/ in which you will draw your custom contact me form and then it will generate a HTML code.

Code to add (source):

Copy and paste the JotForm generated code into the body section of your Conact Me GPC webpage.

Every time anyone submit the form, you will be notified by email. You can also view it by login in to your JotForm account.

Top

Redirect automatically your Google Pages

Description: You will be able to redirect your google pages (your homepage, let's say) to any otherwebpage.

Example: Click Here to test the redirection. This redirection is automatic but waits 5 seconds.

Prerequisites: Open the page you want to redirect from(http://YourUsername.googlepages.com/home). You will use GPC-supported HTML tags, so you need to locate the Edit HTML button in the left bottom side of your browser and then click it.

Code to add (source):

<img src="javascript:if(document==parent.document)document.location='home.htm'">

Make sure you have uploaded to GPC manager the destination page (memorize the page's file name, it is home.htm in the previous case). You need to change the desitnation page (home.htm) in the previous code to the page you want to redirect to. Note that there are NO SPACES inside the src="javascript...."

Top

Redirect page automatically with timer

Description: You will be able to redirect your google pages to any otherwebpage after 10 seconds.

Example: Click Here to test the redirection.

Prerequisites: Open the page you want to redirect from (http://YourUsername.googlepages.com/thankyou for instance). You will use GPC-supported HTML tags, so you need to locate the Edit HTML button in the left bottom side of your browser and then click it. Copy and paste the following code anywhere on your page:

Code to add (source):

<div align="center"><script googattrtype="text/javascript" googscript="true" type="text/plain"> <!-- setTimeout('delayer()', 5000); function delayer(){ window.location = "home" } //--> </script></div><h3 align="center">You will be automatically redirected to <a href="home">home</a></h3>

In my case I am redirecting the current page to open my home page in 5 seconds. You need to change the desitnation page ("home") in the previous code to the page you want to redirect to. Note that there are NO SPACES inside the src="javascript...."

Top

Add Google Maps

Description: You will be able to add a google map on any webpage.

Example: Click Here to see my map.

Prerequisites: Open the page you want to add a google map on. Choose the middle body column and click on "edit html". Now that you are in the "edit html" area, copy and paste the following code:

Code to add (source):

<div align="center"><div id="map" style="width: 650px; height: 400px;"></div></div><script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAeF5IOkYyG3a2fGPgormt5hSKuv1vt0nYtwxtVLRwU8xG-NnQhxQOlDtz8P7du8MwXa2EF-r7AYKKVw" googattrtype="text/javascript" googscript="true" type="text/plain"></script><script googattrtype="text/javascript" googscript="true" type="text/plain"> <!-- if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.874, -122.255), 15, G_HYBRID_TYPE); map.enableDoubleClickZoom(); map.enableContinuousZoom(); map.enableScrollWheelZoom(); function createMarker(point, string) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(string);}); return marker; } // Add 10 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); var pointIhouse = new GLatLng(37.869657, -122.252136) map.addOverlay(createMarker(pointIhouse , "<a style=\"color:blue;\" href=\"http://ihouse.berkeley.edu/index.html\" target=\"_blank\">International House</a><br><font color=\"gray\">2299 Piedmont Avenue, Berkeley, CA 94720</font>")); } // --> </script></div>

In my case I am adding a map centered at UC Berkeley with a GMarker on International House. You can change the center point by changing "map.setCenter(new GLatLng(37.874, -122.255), 15, G_HYBRID_TYPE);" to whatever Latitude and Longitude you want. Notice that you can change G_HYBRID_TYPE to satellite view or normal map view. The following the code is a google map without a any marker, centered on New York City, and the view is a Satallite one.

<div align="center"><div id="map" style="width: 650px; height: 400px;"></div></div><script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAeF5IOkYyG3a2fGPgormt5hSKuv1vt0nYtwxtVLRwU8xG-NnQhxQOlDtz8P7du8MwXa2EF-r7AYKKVw" googattrtype="text/javascript" googscript="true" type="text/plain"></script><script googattrtype="text/javascript" googscript="true" type="text/plain"> <!-- if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(40.728007, -74.072571), 15, G_SATELLITE_TYPE); map.enableDoubleClickZoom(); map.enableContinuousZoom(); map.enableScrollWheelZoom(); } // --> </script></div>

Please take a look at Google API Documentation because you can implement really cool stuff if you are a little bit familiar with Javascript.

If you don't know your longitude and latitude reference you can obtain them from this site.

Here is Martin's Blow Tutorial (another good tutorial).

Top

Add an interactive Javascript Menu

Download the following two files:

mymenu.js

menu_com.js

Open mymenu.js and configure it as you like (menus, submenus, colors...). Next upload them to your GPC directory.

Code to add (source):

<script type="text/javascript">function Go(){return}</script> <script type="text/javascript" src="mymenu.js"></script> <script type="text/javascript" src="menu_com.js"></script>

Top

Add Google Picasa Slideshow Player

Description: You will be able to show your picassa pictures in a sideshow.

Example: Click Hereto look at my slideshow.

Prerequisites: First you have to create an album in google picasa. Within the picasa webpage, click on any of your album. On the left hand side of the album there should be a " Embed Slideshow" button. Click it and then save the embed code in a txt file. Open your google pages. Choose a page in which you want to put the slideshow. Click on the "edit html" and paste the copied code. That's it :)

Code to add (My album):

<div align="center"><div style="background: rgb(0, 0, 0) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 600px; height: 400px;"><div style="text-align: center;"><embed wmode="transparent" type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" flashvars="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Frami.mawas%2Falbumid%2F5085294001380631345%3Fkind%3Dphoto%26alt%3Drss" pluginspage="http://www.macromedia.com/go/getflashplayer" height="400" width="600"></div></div></div></script></div>

This code was generated by Google Picasa. I have my own ID within the code so don't forget to change it if you want to use this code. Or better you should copy and paste the code generate from Google Picassa when you login to your account and album.

Top

Set your own website Icon

Description: You will be able to set your icon. The icon I am talking about appears in the browser tab and in the address bar before the link starts.

Example: You can take a look at your tab and your address bar NOW! My icon is a kid with brown hair

Prerequisites: This trick is very easy. All you need to do is to upload your icon to you GPC account. DON'T name it "favicon" since google page creator will replace it with its default icon (the one with 3 small windows). Next copy and paste the followinng code in your page within the "edit html" area.

Code to add:

<link rel="icon" href="myfavicon.ico" type="image/x-icon">

Please don't forget to change the name of the favicon to your uploaded icon name. I have to warn you that this piece of code that you will add is going to be automatically removed by google page creator every time you edit this page. So in other words, every time after being done with editing your page don't forget to add this line of code.

Top

Add a Marquee (Moving Text)

Description: You will be able to add your own marquee anywhere on your website. A marquee is a moving test.

Example: You can take a look at my example: "Site under construction"

Prerequisites: No prerequisite. Just open the page you want to add marquee on and click on the "edit html" button

Code to add:

<div><font color="#ff0000"><marquee>Under Construction... Testing phase...</marquee></font></div>

Top

Open link in a new window

Description: You will be able to add a link that open its address in a new window.

Example: Test it here: Open my homepage in a new window

Prerequisites: All you need to do it to add a new attribute (target="_blank") to the anchor tag () like in the following code

Code to add:

<a href="home" target="_blank">Open my homepage in a new window</a>

Notice that all I did is added target="_blank"

Top

Add a clock to your website

Description: You will be able to add a nice looking clock to any web page that you want.

Example: Check out my World clocks here

Prerequisites: First Go to clocklink and choose your style of clock or counter (count up or down). The site will give you two types of code that both work in GPC: javascript and embed tag. I am using the javascript code.

Code to add:

<script src="http://www.clocklink.com/embed.js" googscript="true" type="text/plain"></script><script googattrtype="text/javascript" language="JavaScript" googscript="true" type="text/plain">obj = new Object;obj.clockfile = "5012-black.swf";obj.TimeZone = "PST";obj.width = 151;obj.height = 50;obj.wmode = "transparent";showClock(obj);</script>

This is the code of a black digital clock with Pacific Time Zone

Top

Embedding your Flash files to your website

Description: You will be able to add a flash file to any web page that you want.

Example: Check out my flash here

Prerequisites: Upload your flash file or jot down the address of the file in case it is online

Code to add:

<EMBED style="WIDTH: 452px; HEIGHT: 337px" name="obj11" pluginspage="http://www.macromedia.com/go/getflashplayer" src="REPLACE" WITH FILENAME width="452" height="337" type="application/x-shockwave-flash">

Put the name or the address of the filename in the code where REPLACE WITH FILENAME is in the code.

Top

Add a shout box

Description: You will be able to add a text shout box so that anyone can leave you a public message on your website.

Example: Check out my own shout box here and please leave me a shout!

Prerequisites: Register an account at ShoutMix and then click on "Create your shoutbox now". Design and set up your own box preferences. Get the "Generated codes"

Code to add:

<iframe title="YourUserName" src="http://www2.shoutmix.com/?YourUserName" width="160" height="400" frameborder="0" scrolling="auto"><a href="http://www2.shoutmix.com/?YourUsername">View shoutbox</a></iframe>

You should be able to copy and paste the code in your "edit HTML" area that you like

Top

Embed a Google Docs

Description: You will be able to add a Google doc (spreadsheet, document) to your webpage by embedding it.

Example: Check out my movies spreadsheet here and check out my best movies marked with a star!

Prerequisites: First go to Google Docs and create a new spreadsheet or document and then publish it by clicking on "publish" withing Google spreadsheet/Document. Next save the URL of your file

Code to add for Google Spreadsheet:

<iframe marginwidth="0" marginheight="0" src="http://spreadsheets.google.com/pub?key=YourPublicFileKey&output=html&widget=true" frameborder="0" height="400" scrolling="no" width="522"></iframe>

Code to add for Google Document:

<iframe allowtransparency="true" scrolling="auto" style="margin: 0px; padding: 2px; background-color: #ffffff;" frameborder="0" width="470" height="660" src="http://docs.google.com/view?id=YourPublicFileID&hgd=0"></iframe>

You should be able to copy and paste the URL provided by Google Spreadsheet/Document in the "src" attribute of the previous code. You can also set the height and width in the previous code as well. Note that embeding

Top

Add a dynamic box that move with the page scroll

Description: You will be able to add a dynamic box that will move with the page scroll.

Example: you can check it out on this page on the left or right of the main content. I display ads in them.

Prerequisites: nothing really. Just click on the "edit HTML" buton

Code to add:

<div id="div1" style="position: absolute; top: 255px; left: 100px;">Testing DIV</div><script googattrtype="text/javascript" type="text/plain"><!-- var topLimit = 100; // position of the div from the top [SET] var topOffset = 20; // offset to be added to the top position [SET] var left = 100; // position of the div from the left [SET] var leftLimit = 800;// When the screen width get smaller than leftLimit then hide the div [SET] var leftOffset = 20; // offset to be added to the left position [SET] var tagID = "div1"; // the div ID [SET] // DON'T TOUCH BELOW THIS LINE -------------------------------------- setInterval("poll()", 500); var tagNode = document.getElementById(tagID); function poll(){ var width; var top; if (navigator.appName == "Microsoft Internet Explorer") {top= document.documentElement.scrollTop; } else {top= window.pageYOffset; } if (navigator.appName == "Microsoft Internet Explorer") {width = document.body.offsetWidth; } else {width = self.outerWidth;} if (top < topLimit) {top = topLimit;} else {top = top + topOffset;} if (width < leftLimit) {tagNode.style.visibility="hidden";} else {tagNode.style.visibility="visible";} tagNode.style.top = top+"px"; tagNode.style.left = left+"px"; return true; } //--> </script>

You can set all the values of the variables that have a [SET] next to them. Make sure you make the 'top' and 'left' attribute in the div tag are the same as the 'top' and 'left' of the variables in the javascript code. The same applies if you decided to change the id of the div. Notice that you can add anything in this div tag: pictures, advertisement, text, ...

Top

AdSense Insider Tutorial

Check out: Garg Mitanshu AdSense Insider Tutorial

Top

Useful Links

If you still can't find the answer you are looking for, then try one of the following usefull links:

Top

.