Counter
Html
simple counter:
To
add a counter to you site, it's useful to monitorate visitors
access, you can use one of the many free counters but the
best free counter, I
think, is statcounter. Statcounter (www.statcounter.com)
is completly
free and you have many resource like popular pages, entry
pages, exit pages and more and more. You can also set a
visible counter for your homepage and invisible counter
for the others, or alls invisible. It's very simple to
register and install. Remember to check the HTML only during
the set up.
Once you have done the set up, statcounter will give oyu
the code for your pages. Copy it in the body section
(i.e. <body> in this
section</body>), usually at the end.
Finish
Javascript
counter BEST METHOD
Now GPC allows the use
of javascript code, so paste the code
from, e.g. from statcounter, directly
in GPC:
open an account in www.statcounter.com (I prefer statcounter for many resons)
setup your account in stacounter using the javascript option and not the html only option
at the end of the setting up of your acconut in statcount yoou have the javacode
the javacode for your homepage will be like this: <!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=NUMBER1;
var sc_invisible=NUMBER2;
var sc_partition=NUMBER3;
var sc_security="NUMBER4";
</script>
Insert this code just before, e.g., the </body> tag. Remember that you can place a code for your home page (so you can set visible the visitor's number only in your home page) and a code for the other pages.
Javascript
counter (old):
Unfortunatly, using the html code only there are
some limitations, statcounter says: "It is not recommended
to choose this option as it will not be possible
to record the referring link, page title and other
information. Only choose this if you web host does
not allow you to insert javascript into your webpage.
We recommend you move to a web host that will give
you proper access to your website."
So I have written two gadget that you can use to insert a statcounter
javascript counter in pages made with GPC.
First method:
In GPC enable
experimental features
click on
"more" button, than on insert thirdy part gadget
in another
browser window open
an account in www.statcounter.com (I prefer statcounter for many resons)
setup your account in stacounter using
the javascript option and not the html only option
at the end of
the setting up of your acconut in statcount yoou have the javacode
the javacode
for your homepage will be like this: <!--
Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=NUMBER1;
var sc_invisible=NUMBER2;
var sc_partition=NUMBER3;
var sc_security="NUMBER4";
</script>
.......................................................
Insert the NUMBER1 in the
firt row of the gadget, the NUMBER2 in the second row of the gadget etc
at the and we can see your woun counter
(with the visitor number 1 displayed)
resize if you
wold your gadget
finish
Second method (old):
You can find my xml file at
this link. In order to
write your gadget for your site this is the procedure:
Gadget menu
Add
a menu
using gadget is like to add a javascript coun.
I have written a gadget, see my xml file,
and an example
which uses this gadget, a table and an inline frame.
Using my xml file in GPC you can have only 1 menu
for all your pages: when you have to add a new link
or remove a link you have to remove a link just in
1 file.
With this gadget you can use your own style modifying the option in the
style section, insert your own javascripts menu and so on.
In order to
write your gadget for your site this is the procedure:
Add a menu without gadgets
In http://polycrystalline.googlepages.com/menuexample1
you can find an example of menu without gadgets that uses a script from http://www.dynamicdrive.com/ (my script is
in http://polycrystalline.googlepages.com/menugatop.js) and a script ( http://polycrystalline.googlepages.com/menugaprova.js) that I have created
using the tool in http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/default.php
In this
way you have a vertical menu using two scripts. To
change your links you have to change only one file
(the file menugaprova.js).
Note that in the menuexample1
you can also import a style file: in effect to setup
your menu you have to download the file http://polycrystalline.googlepages.com/menugatop.js and http://polycrystalline.googlepages.com/menugaprova.js and
the style file http://polycrystalline.googlepages.com/stile.css and
edit they following your necessities.
Next you have
to donwload the files in GPC and insert them whey you
want.
My html part is the following:
<TABLE style="BACKGROUND-COLOR: white" cellSpacing=2
cellPadding=2 border=1> <CAPTION>This is a
caption</CAPTION>
<TBODY> <TR> <TD align=left>
<STYLE>@import url(
http://polycrystalline.googlepages.com/stile.css );
</STYLE> <SCRIPT src="menugatop.js"
type=text/javascript></SCRIPT>
<SCRIPT src="menugaprova.js"
type=text/javascript></SCRIPT>
<DIV></DIV>
</TD> <TD style="VERTICAL-ALIGN: top; TEXT-ALIGN:
center" width="100%">Your content<BR>
</TD></TR> <TR>
<TD>Contact</TD>
<TD></TD></TR></TBODY></TABLE>
Add a menu with button.
Sign up in, e.g., www.buttongenerator.com, create your menu, download the image files (button1up.png, button2up.png, button1over.png etc, The number of files depends by the lengths of your menu), the javascript file menuscript.js, the file menustyle.css,
Now in your html file (in GPC) insert the code like this (for a two button menu) where you would (the table is not necessary):
Now outside GPC, in your java file menuscript.js (at the top) replace the starting original code with a code like this:
/*** SET BUTTON'S FOLDER HERE ***/
/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("button1up.png","button2up.png"); overSources = new Array("button1over.png","button2over.png");
// SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THIS
subInfo = new Array();
subInfo[1] = new Array();
subInfo[2] = new Array();
//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//
subInfo[1][1] = new Array("Home
Page","http://polycrystalline.googlepages.com/","");
subInfo[1][2] = new Array("English Home
Page","http://polycrystalline.googlepages.com/poly.html","");
subInfo[2][1] = new Array("Cioa ciao","http://polycrystalline.googlepages.com/","");
subInfo[2][2] = new Array("bye bye ","http://polycrystalline.googlepages.com/poly.html","");
//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
var xSubOffset = 120;
var ySubOffset = 1;
The rest of code is the same.
Save the file, download it in GPC. Download the other files (the image files and the css file) in GPC. The extension to more than two button is simple.
You can also download the file http://polycrystalline.googlepages.com/menu.zip to see an example.
Guestbook
To set up a guest book into your site you can register at
the bravenet site and get the code to add to your site. It's
very simple: register and receive a code like this:
Forms and radio buttons
It's very simple to add a poll form
or set up form into your web site. You can see a
form into my
site at the
contact page or see this page at
"Provincia di Isernia o Caserta" tab. To
insert a form you must register at jotform
site. Remember that in jotform you can
also set up a
returnig page, an email to
receive advises or/and view online the messages.
The html code from jotform can be inserted easily into your web
site.
Into the NO GPC compatible section there is the
example about a form with the Chaptcha method.
How use GPC interface and scripts at the same
time
GPC has some templates that can be easily used inside GPC. In
this
way you cannot use embedded tag and so on.
The simple way to use the GPC interface and javascript
at the same time is the following:
create your page into GCP
publish your page
see the page using, e.g., Internet
explorer
right click-->Html
save the page in html format
edit the page using notepad or other
editors or
html editors. At this point you can insert script
upload the page you have edited into GPC
Remember that with this method you have to edit your file outside GPC.
To
redirect a page (also your home page) you can insert the
following
GPC compatible code. In GPC click on "edit html" and insert the
following (replacing http://polycrystalline.googlepages.com/poly.html
with your page):
Note that if you are using frames this form doesn't work, so in this
case you can add the target element as in the following
<form target="_top"
action="https://www.google.com/accounts/ServiceLoginAuth"
method="post" style="margin: 0px;">
<div style="text-align: left;"> <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"></div>
<p style="line-height: 200%; text-align:
left;"><input
name="Email" alt="" type="text">
login<br>
</p>
<div style="text-align: left;"><input
name="Passwd" maxlength="25" alt=""
type="password"> password<br>
</div>
<p style="line-height: 200%;"></p>
<div style="text-align: center;"><input
value="sign in" type="submit"></div>
<p style="line-height: 200%;"> </p>
</form>
In this way you open a new window and
all
works fine. Open
the Gmail link in this sitetoo
see an example.
To insert an
external file
into your page you can use this code:
<object type="text/x-scriptlet" width=100% height=100%
data="yourfile.htm">
</object>
Remember to set width and height and remeber that scriplets
"are only supported by IE
4 and above. NS users will simply see nothing." as
http://www.dynamicdrive.com/dynamicindex3/docsindocs.htm says.
Remember that yourfile can contain also javascript code, so this method
can be used to insert adsense, Google analytics and more. See an example
To
add a javascript counter in your home page you can create a
html
file (e. g. yourfile.html) and place in it your conter code. The html
file will be like this:
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<br>
<!-- Start of StatCounter Code -->
<!-- End of StatCounter Code -->
</body>
</html>
Add your statcounter code, for example, between <!--
Start of StatCounter Code --> and <!--
End of StatCounter Code -->
next link this file in your home page using this code: <object type="text/x-scriptlet" width=100% height=100%
data="yourfile.htm">
</object>
Add a Form with the Chaptcha
(anti spam) method
This method
displays
an image in your form and ask the user to fill in a field with the
showed code. See an example in
my site.
Create a form using for
example jotform (see this section: form)
Insert the link where your
form is (one my form is in here)
Click on Save this and
continue
Insert the URL where the form is
processed: for
example my form in my site is processed at
http://www.jotform.com/submit/61411142782. To see where your form is
processed open your html file with notepad and search (use Ctrl+t) the
string: <form action="http://www.jotform.com/submit/yourcode.
The URL to insert is http://www.jotform.com/submit/yourcode
Click on Save this and
continue
Choose the Form
method (post in my case, search the method in notepad)
Click on Save this and
continue
Choose the URL to go after processing:
you can
leave blank to return to the form page in your site.
Click on Save this and
continue
Now you can check this field to send
results of
form processing to your e-mail
Follow the indication from Cero Spam,
i.e.:
Substitute
the code <form action="http://www.jotform.com/submit/yournumber"
method="post"> with the code <form name="yourformname"
action="http://www.cerospam.com.ar/form.php" method="post">
insert the code from Cero
Spam into your form: <input size="10"
name="cerospam_code" value="" type="text">
<script type="text/javascript">
<!--
cerospam_client = 117;
cerospam_form = 151;
cerospam_background = "1";
cerospam_width = 200;
//-->
</script>
<script type="text/javascript"
src="http://www.cerospam.com.ar/captcha.php"></script>
When you insert your adsense code using the "edit html" you cannot see, in preview, the adsense banner but only after you have published your page you can see it.
So, follow this to insert your adsense code:
Login into your adsense account and copy your adsense code
In GPC, click on "edit html" on the left. If you don't see the link "edit html" press F11
Insert the adsense code in GPC where you want
Save changes and Publish the page
In "view live" now you can see the adsense banners
Remember that once you have published the page with your adsense code, to modify the code (for example to place the adsense code in another position) you have to copy the ORIGINAL adsense code and paste it in GPC: if you copy the adsense code directly from GPC in another position in GPC it doesn't work.
Remember also that now (july 18 2006) you cannot place more then one adsense ads for content but I am sure that (on my test page http://polycrystalline.googlepages.com/adsenseprove it work fine) you can place one adsense ad for content, one referral and a search form.
Outside GPC (i.e. when you download the file using the right click-> HTML-> save as -> html and next you edit you pages using notepad or Dreamweaver, and filnally oyu upload the page in GPC) there aren't problems: you can do all.
You can also insert your adsense code in GPC using gadget:
In order to write your gadget for your site this is the procedure:
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the
class is changed
to "tabberlive" and it will appear. */
To add your own news to your site you can use a script file
(see my javascript file dowloaded from http://www.dynamicdrive.com/ ) where
you can insert what you want (se my homepage).
You have to place the javascript file where you would
place your news inseting this code: <script
src="news.js" type="text/javascript"></script>
The file starts with:
var delay = 3000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 10px Verdana, Arial, Helvetica,
sans-serif; padding: 2px;">'; //set opening
tag, such as font declarations
fcontent[0]="<br>See <a href='yesgpc.html#Counter'>Javascript Counter</a> to add a counter to your site.";
fcontent[1]="<br>See the <a href='nogpc.html#Vertical'> menu </a> section to add a menu to your site.";
fcontent[2]="<br>See the <a href='nogpc.html#news'> news </a> section to add news to your site.";
closetag='</div>';
var fwidth='150px'; //set scroller width
var fheight='100px'; //set scroller height
................
................
Changing the red lines you can add your own news. See an example
Bye
<head> Informations about the
document............ </head>
<body>
The content of the document......
</body>
</html>
The head element can contain information about the document. The
browser does not display the "head information" to the user.
The following tags can be used in the head section:
<base>, <link>, <meta>,
<script>, <style>, and
<title>. In GPC you cannot access to the head section
so you cannot insert in the head section <base>,
<link>, <meta>, <script>
and <style> but you can define the title of the
page using the interface of GPC.
In GPC you can use about all tags but be carefull when use script: GPC is javascript compatible but there are some problems yet. The tags that are GPC compatibility are indicated as "YES".
A complete list of html tags is:
TOP <a>
Tag. YES
<a> means anchor. The tag can be used to create an anchor
(a link) to
another document, in this way:
<a style="color:
rgb(33, 117, 188);"
href="http://polycrystalline.googlepages.com"
target="_blank">Polycrystalline</a>
or within the same document (see Anchors section) or a combination: a link to an anchor within another
document: <a
style="color: rgb(33, 117, 188);"
href="http://polycrystalline.googlepages.com/nogpc.html#menu"
target="_blank">Polycrystalline menu</a>
the target can be
_blank (the URL will be open in a new window )
_parent (the URL will be open in the parent frameset )
_self (the URL will be open in the same frame)
_top (the URL will be open in the full body of the window )
TOP <base>
Tag.
Specifying in the head section:
<head>
<base href="http://polycrystalline.googlepages.com/" />
</head>
when we insert in the body, for example <img
src="tft.jpg"
/>, the real address of this link will be http://polycrystalline.googlepages.com/tft.jpg
TOP
<bdo> Tag. YES
The bdo element reverses the text direction.
the result of <bdo
dir="rtl">Hello</bdo> is
olleH
TOP
<col> Tag. YES
In a table specifies only the attributes for the colomuns (remember to
defines the td element within the tr element to really create the
column)
Example:
</form>
<p>
If you click the "Submit" button, you will send your input to
WhereTheFormWillBeProcessed.php.
</p>
If you click the "Submit" button, you will send your input to
WhereTheFormWillBeProcessed.php.
The only required attribute is action. action must be equal to an url
where the form will be processed.
The optional attributes are:
Attribute
Value
Description
accept
list of contenttypes
A comma separated list of
contenttypes that the server, that processes this form, will handle
correctly
accept-charset
charset_list
A comma separated list of possible
character sets for the form data. The default value is "unknown"
enctype
mimetype
The mime type used to encode the
content of the form
method
get
post
The HTTP method for sending data to
the url where the form will be processed. The default is get.
method="get": This
method sends
the contents in the url: url?name=value&name=value.
Note: If the form values contains non-ASCII characters or exceeds 100
characters you have to use method="post".
method="post": This
method sends the
form contents in the body of the request.
name
formName
Defines a name for the
form
target
_blank
_self
_parent
_top
_blank (the URL will be open in a
new window )
_parent (the URL will be open in the parent frameset )
_self (the URL will be open in the same frame)
_top (the URL will be open in the full body of the window )
<input> Tag. YES See
the form tag. There we use
the input tag.
Optional attributes for input are:
Attribute
Value
Description
accept
list_of_mime_types
A comma-separated list of MIME
types that indicates the MIME type of the file transfer.
Note: Only used
with type="file"
align
left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom
Defines the alignment of text
following the image.
Note: Only used
with type="image"
alt
text
Defines an alternate text for the
image.
Note: Only used
with type="image"
checked
checked
Indicates that the input element
should be checked when it first loads.
Note: Used with
type="checkbox" and
type="radio"
disabled
disabled
Disables the input element when it
first loads so that the user can not write text in it, or select it.
Note: Cannot be
used with
type="hidden"
maxlength
number
Defines the maximum number of
characters allowed in a text field.
Note: Only used
with type="text"
name
field_name
Defines a unique name for the input
element.
Note: This
attribute is required with
type="button", type="checkbox", type="file", type="hidden",
type="image", type="password", type="text", and type="radio"
readonly
readonly
Indicates that the value of this
field cannot be modified.
Note: Only used
with type="text"
size
number_of_char
Defines the size of the input
element.
Note: Cannot be
used with
type="hidden"
src
URL
Defines the URL of the image to
display.
Note: Only used
with type="image"
type
button
checkbox
file
hidden
image
password
radio
reset
submit
text
Indicates the type of the input
element. The default
value is "text"
Note: This is not a
required
attribute, but we think you should include it. If omitted, IE 5.5 will
still display a text field, but Netscape 4.7 will not.
value
value
For buttons, reset buttons
and submit buttons: Defines the text on the button.
For image buttons:
Defines the
symbolic result of the field passed to a script.
For checkboxes and radio
buttons:
Defines the result of the input element when clicked. The result is
sent to the form's action URL.
For hidden, password, and
text fields:
Defines the default value of the element.
Note: Cannot be
used with type="file"
Note: This
attribute is required with
type="checkbox" and type="radio"
