|
Custom Hit Counter
Here is an example of what we will be making:
This basic counter will count all the hits to your website. Please note that this is NOT a unique hit counter, meaning that if the same IP-address visits your site twice, it will count 2 hits, not 1.
This tutorial requires knowledge of your graphic program, and also basic html knowledge.
Okay, on to the work!
You will need the following programs:
- Any graphics program (i.e. Paint, Photoshop, Paint Shop Pro)
- Notepad
- Winzip, winrar or any other unzipping program
What we basically are going to do, is to draw a background image, and the stick the counter numbers to the top of this image. It is very important that you follow all steps of this tutorial.
1. Download THIS .rar-file.
2. Open counter.gif in your graphics program
This file is just an example of what the backgroundimage of the counter could look like.
Create your own backgroundimage using your graphic program, any size you want your counter to be (you can even animate the image if you want to, transparency is also no problem!), and overwrite the existing counter.gif file.
3. Open counter.htm in Notepad
Edit yoururl.com to your own url (i.e. turtlebug.net) in the following line:
<img border="0" src="http://www.yoururl.com/counter/counter.gif">
Edit the numbers 10 and 15, to the position where you want the numbers of the counter to appear in your image (left is the number of pixels from the left in your image, top is the number of pixels from the top of your image) in the following line:
POSITION: absolute; left: 10px; top:15px;">
Edit font color, face and size of the counternumbers in the following line:
<font color="#000000" face="arial" style="font-size : 9px;">
Save the changes to counter.htm
4. Open counter.js in Notepad
Edit width and height to the size of your backgroundimage (size is measured in pixels)
Edit yoururl.com to your own url
Save the changes to counter.js
5. Open count.txt in Notepad
Edit the number to whatever number you want the counter to start on (if you know you have had 500 visitors, edit the number to 500)
Save the changes to count.txt
6. Upload the folder, with all files in it, to your webspace.
7. Open the page that you want your counter to appear on in Notepad (i.e. your index.htm page), then copy and paste the following code anywhere you want between the <body> and </body> tags:
Edit yoururl.com to your own url
Save and upload.
8. That's it! You now have your very own custom hitcounter on your website!
 
|