Have you seen many sites distributing linkware cute webclocks? I have some on my sites, check out the goodies section. This tutorial will tell you how to make your own clocks or make webclocks to distribute them as linkwares on your site. You can make a webclock out of pixelled small images or simple images cropped to smallet size. I will however be using a pixelled image to make a weblock.
I ill pixel a cute image to use as base for thee webclock. I use photoshop for pixelling and you can also see my pixelling tutorial if you are new to it.
Or you can skip this and use a normal image as base.
» Pixel a small image in photoshop (Click)
» Open a bigger, new window in photoshop and drag the pixelled small image onto it.
» Make a box like space where the time will appear under or on side of the cute pixelled image. (Click)
» Download this file and unzip it.
» Save the contents of the file (clock.html and liveclock.js) in a folder.
» Save the webclock you made in photoshop in the folder where you saved the downloaded .zip file contents.
» Open clock.html in notepad. It has instructions to change the variables.
» Change the font size on 4th line so that it fits in the text space on your webclock base image.
» Change the clock image name to the name of the webclock base you just made.
» If you want to distribute this clock and want it to link back to your site, change the link where the instructions are given.
» If you do not want the clock to be linked back to your site, remove the <a href ... part and in the end, remove the </a> (where it says - Links ends here).
» Change the co-ordinates, they are in pixels. They determine the position of the text/time on the clock. To adjust them, first save the clock.html file with all the changes
you made so far. Open clock.html in your browser to see how the clock looks, now you will see that time may not appear in the space where it is supposed to.
Open clock.html file in notepad again and adjust the co-ordinates of all sides and save, check again. Keep doing this until the text appears just in the right position on the clock.
» Change the font-color to match your image.
Your clock is ready! Congratulations. Here is the clock I made while writing this tutorial.
To put this clock on your site, use the following code, you need to uplaod all these files on a server. Make a folder on your server /goodies/clocks or name it anything else, just remember to change the directory in the code below accordingly (I upload all my clocks to another server because hotlinking from mine is disabled). Upload the clock.html, liveclock.js and clock.gif files to it. Copy the following code on your webpage and change the thigns in capital letters. Change the domain name url and the directory path in next line. You don't have to change the height and width most of the times. But if your clock is really big or really small, you might have to change the width and height in the following code accordingly.
| <script language='JavaScript'> document.write('<iframe src="HTTP://WWW.YOURDOMAIN.COM' +'GOODIES/CLOCKS/CLOCK.HTML" allowTransparency="true" mar' +'ginwidth="0" marginheight="0" height="51" width="5' +'0" name="clock" scrolling="no" border="0" framebor' +'der="0"></iframe>'); </script> |
If you want to distribute the clock to your visitors, put the code t o show webclock on your site and under it, put the same code in a textarea which your visitors can copy and paste on their sites. This is how I make clocks and distribute them on my site. Go to the goodies section and click Clocks to see few examples. Good luck!
« Back
