Blinkie Page Maker Tutorial

 

What you need to know before you start.

  • This page tutorial can be fiddly and long to make.
  • It's HTML and will be easier if you know the basics.
  • The images or props as they are called and the writing of the HTML will take time.
  • It's not a five minute job.


You can also use this tutorial for making a dollz maker.
Please understand that most of this is HTML
It's could be fiddly and may take a while to make.
You will need lots of patience!

What you will need for this tutorial.
NotePad - Most will have this.

Follow the steps below to make you own Blinkie Maker Page.

Step 1 [Making the images]

  • Use a paint program [ MS Paint or PSP ] to make your blocks, letters and the icons.
  • Make them GIF format and their background transparent.
  • Make a guide line or a set of about six blocks so it is easy to line up their blinkie blocks.
  • Name each of your props (blocks) e.g. b1.gif, b2.gif or for red blocks red1.gif, red2.gif.
  • Name your letter blocks a.gif to z.gif.
  • Save them all in a folder on your computer.

Step 2 The HTML [Part one]

    This is made easy for you with copy and paste.
  • Open Notepad, make a new text file and save as 'blinkie.html' in same folder as your props.
    You can preview your page by double clicking on the blinkie.html icon in the folder where you put it.
    To edit it just right click on the blinkie page icon & choose open with notepad.

    Remember after making changes to your page .. Click Save.
  • Copy the code below and paste into the open notepad blinkie.html page.
    This is the start of the HTML for your page plus the drag and drop javascript.


To Select all code and Copy - Click inside textarea then Ctrl+A then Ctrl+C ::--:: To Paste - Ctrl+V

Step 3 The HTML [Part two] The Props Table.

    Now we need an area for your props and a build area, for that we use Tables.
    Props
    Blocks
    Letters
    Icons
    Build Area

    Below is the code for this table.
  • Copy and Paste it into your notepad blinkie page after the javascript.



Step 4 The HTML [Part three] End Tags for page.
  • Copy and Paste this HTML code after the Table to finish off your blinkie page. Save page.



You can preview your page by double clicking on the blinkie.html icon in the folder where you put it.
To edit it just right click on the blinkie page icon & choose open with notepad.


Step 5 The Blinkie Props HTML

    Look at the Table HTML on your page, this is where you will be placing the HTML for the props.
    The code goes inside the different cells of the table.
    Each image will have an extra TAG to make it DRAGABLE like this:
    <img src="Block.gif" CLASS="DRAG">
    Paste the image codes inside the cells like this:

    <td> Blocks <br>

    <img src="Block1.gif" CLASS="DRAG">
    <img src="Block1.gif" CLASS="DRAG">
    <img src="Block2.gif" CLASS="DRAG">
    <img src="Block2.gif" CLASS="DRAG">
    <img src="Block3.gif" CLASS="DRAG">
    <img src="Block3.gif" CLASS="DRAG">

    </td>


  • Paste the image codes for your props in the appropriate table cells.
  • Repeat until you have put codes for all your images.
  • Paste each block code a few times so they can have a few to drag.

Step 6 HTML Letters code to Copy and Paste into letters cell.



Step 7 Instruction text, can be pasted into one of the cells or anywhere on your page.



  • This tutorial will give you the basic skeleton of a blinkie maker.
    Add your own images, text, links and change the colors to match the rest of you site.
    NEVER direct link to another sites images.
    Store your own images and your blinkie maker will be more succesful.
    This tutorial can also be used for making a dollz maker.


Related Links