WordPress FAQ - Tutorials, Tips & Tricks

Empty blank page

Cédric — Sat, 16 Apr 2011 11:42:28 +0000

How can I have an empty page? How can I have a totally blank page with no theme or template on it? I would like to start with a page with just nothing on it! No styles, nothing!

Chapter 1: Building a page a page with codes
Chapter 2: How to build the page with codes

Chapter 1: Building a page a page with codes

If you want to have a blank page then the solution would be to build one in an HTML Editor like Dreamweaver or in a Full Text Editor like TextWrangler or Notepad.

Of course this means that you have to use HTML codes to build the structure of the page and to add the content.

Chapter 2: How to build the page with codes

In my WordPressFAQ.org E-Book (15$) (sample) I tried to explain the basics on giving your page the look and structure you want and on how to add your content to it.

What I used it for is to create a "mini website" to display in a popup. People can choose a music playlist and keep the popup window behind the window displaying the website to keep the music going while browsing the website. Click here to see the example.

Of course one could also use it to display something else or actually build the website with it (kind of making your own theme). I think it's easier than some may think it is but of course that's my personal opinion.

WordPressFAQ.org - Tutorials, Tips & Tricks is made with and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric and hosted by HostExcellence.com

I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.

Thank you for visiting and supporting my website,
- Cédric -

Toggle, Hide and Display

Cédric — Sat, 16 Apr 2011 09:08:13 +0000

How can I add some content to my page which is hidden when the page loads and displays when people click on a link?

Hide/Display also referred to as toggle or toggle switch is usually used to have some content on a page which shows only when people hit a link. The classical way to use it is:

What are the best sources for FAQ, Tutorials, Tips & Tricks about WordPress? (show)

either to display some text, photos and images, a bunch of links or whatever.

The code uses

<div>

(containers) to hide/display their content. You can set each div to display either right after the link as in the example above or you can set each of them to display in another part of the page or (as in the example below) have them all displaying in the same area.

Here I used it to embed various YouTube videos and have a menu on the left from which you can choose what video you would like to see

Birth of Apple Inc.
Apple 1984 Commercial
Get a Mac: Security
Almost famous: Trailer
Almost Famous: Penny Lane
Almost Famous: Uncool
Almost Famous: Ode to Penny
Almost Famous: Golden God

Of course it also works to display anything else.

Please note that I don't recommend using this method for search engines relevant content (content which you use to attract people to your site) since it's not clear whether they read the hidden content or not. So don't use it to build your entire website. However I see no reason why you shouldn't use this on content which is not so search engines relevant like YouTube videos you embed, just display some photos or text, ...

This is also used on my Music Popup page.

How this is done is described in my WordPressFAQ.org E-Book (15$) (sample)

Google Maps

Cédric — Sat, 16 Apr 2011 08:59:03 +0000

How do I add a Google Map to my website? How can I add a map with a mark/pin, descriptions, lines and more on it

You will find a lot of plugins for this. Personally I prefer doing it by myself without using plugins.

1. Go to Google Maps. If you’re logged in you can click on My Maps, Create new map

2. Enter a title and a description of the map. If you want people to collaborate on the map you can invite them. You can choose whether you want it to be public so everyone can see it or whether you want to share it only with the people you want to see the map.

3. On the right side you see the map.

On the top left side you see the tools. The hand to move the map, the pin to add a mark on the map and the line to draw a line on the map (draw a line, a line along roads or a shape)

Once you add a pin and place it on the map you will be able to write some text for the title and the description. Of course you can also add HTML instead of text in the description. Especially helpful to add links, images, ...

4. Once you’re done editing the map hit Save, Done. To embed the map into your site on the upper toolbar’s right hit “Link”. You can either copy the URL to the map to make a link or copy the iFrame code. By clicking on the “Customize and preview embedded map” under “Link” you can further customize what the map should look like once you embedded it into your site. Paste the code into your page or post. That's it.

Examples:

If you have a business instead of having only the address displaying you could also add an image displaying your logo or the building for people to better find it when on place, your phone number or e-mail, www, whatever.

Here's my Bicycle trip 2010 from Basel (Switzerland) to Amsterdam (Netherlands). In the descriptions on the map I could add a link for people to read more about each place I visited on my journey like a diary with images and so on...

View Bicycle trip 2010 in a larger map

Here's another example of a map I made for a restaurant which indicates how to reach the restaurant by bus, where to park the car, where you have to walk to and of course where the restaurant is. This ensures people find the place. By clicking on the bus and the other icons you get further instructions (it's in German but I guess you get the idea).

View Tschugga Restaurant in a larger map

Simple scroll image gallery

Cédric — Wed, 13 Apr 2011 11:38:02 +0000

Just one more way to present your photos...

Here's an example of what it looks like...

Credit for the pictures goes to the author of Highslide.

How this type of gallery is made is fully described in my WordPressFAQ.org E-Book (15$) (sample). I think the gallery is really easy, looks really basic but nevertheless looks good. Especially if you have some panoramic pictures. The images could also be turned into links so you could also use it as a menu if you want.

Regards,
Cédric

How this type of gallery is made is fully described in my in my WordPressFAQ.org E-Book (15$) (sample). I think the gallery is really easy, looks really basic but nevertheless looks good. Especially if you have some panoramic pictures. The images could also be turned into links so you could also use it as a menu if you want.

Floating menu (or float anything else)

Cédric — Wed, 13 Apr 2011 09:36:55 +0000

How can I add a floating menu in WordPress? What is that good for? How can I have some text floating? Links? An image?

Scroll down the page and see how the menu on your left hand side sticks in place as everything else moves (except the WordPressFAQ.org logo on the left which is a link to go to the Home of this website and the black toolbar at the bottom of the window which are also part of the example here hence stick in place).

What you achieve with floating is that something sticks in place in a certain position while the rest of the page scrolls.

In the example on this page it is mainly used to have a menu floating.

However you can also use it to have some text floating or an image with your business’ logo or whatever you want.

This is good especially when you have long pages and don’t want your visitors to have to scroll all the way back to find a menu to switch page.

How this is done is described in my WordPressFAQ.org E-Book (15$) (sample)

Hello, here you could add any HTML code you like or type any text you like!

Wrap text around objects

Cédric — Tue, 29 Mar 2011 13:02:17 +0000

How can I have text wrapping around images, movies, music players, other text, or anything else in WordPress?

To wrap text around an object in WordPress is really easy. Here's an example...

This is my caption

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Also works for music players or whatever you want to use it for! Just anything!

aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Imagine there's no Heaven
It's easy if you try
No hell below us
Above us only sky
Imagine all the people
Living for today

- John Lennon -

When adding images it is enough to choose the Alignment towards the bottom of the "Add an Image" window in WordPress. Whereas for other things like text, players and more you can add a tiny bit of code. How this is done is described in my WordPressFAQ.org E-Book (15$) (sample)

Columns

Cédric — Tue, 29 Mar 2011 12:43:59 +0000

How can I have columns in WordPress?

At times you may want to have some text of a page displaying in columns. Of course it also works for images, HTML codes or whatever you want. The number of columns, their size and their position can be changed. Here's an example...

The Little Prince (Chapter 6)
by Antoine de Saint Exupéry

Oh, little prince! Bit by bit I came to understand the secrets of your sad little life . . . For a long time you had found your only entertainment in the quiet pleasure of looking at the sunset. I learned that new detail on the morning of the fourth day, when you said to me:

"I am very fond of sunsets. Come, let us go look at a sunset now."

"But we must wait," I said.

"Wait? For what?"

"For the sunset. We must wait until it is time."

At first you seemed to be very much surprised. And then you laughed to yourself. You said to me:

"I am always thinking that I am at home!"

Just so. Everybody knows that when it is noon in the United States the sun is setting over France.

If you could fly to France in one minute, you could go straight into the sunset, right from noon. Unfortunately, France is too far away for that. But on your tiny planet, my little prince, all you need do is move your chair a few steps. You can see the day end and the twilight falling whenever you like . . .

"One day," you said to me, "I saw the sunset forty-four times!"

And a little later you added:

"You know--one loves the sunset, when one is so sad . . ."

"Were you so sad, then?" I asked, "on the day of the forty-four sunsets?"

But the little prince made no reply.

To have columns in WordPress either use the WP columns plugin as described in the Plugins page or if you don't like to use the plugin you will find another way described in my WordPressFAQ.org E-Book (15$) (sample)

Tables

Cédric — Mon, 28 Mar 2011 18:24:58 +0000

How can I add a table to my WordPress created website?

Chapter 1: Tables
Chapter 2: Sortable tables

Chapter 1: Tables

Here's an example of a table:

Table title	column title	column title
row title	cell1.1	cell2.1
row title	cell1.2	cell2.2
row title	cell1.3	cell2.3

The code of the above table is:

<style type="text/css">

table {width:450px;

font-family: Helvetica;

font-size: 14px;

color:#fff;

background-color:#ccc;

border-spacing: 5px 5px;

border:3px solid #ccc;

}

th {width:150px;

height:35px;

color:#000;

background-color: #fff;

border:1px solid #fff;

}

td {color:#000;

font-style:italic;

text-align:center;

background-color: #fff;

border:1px solid #fff;

}

</style>

<table>

<tr><th>Table title</th><th>column title</th><th>column title</th></tr>

<tr><th>row title</th><td>cell1.1</td><td>cell2.1</td></tr>

<tr><th>row title</th><td>cell1.2</td><td>cell2.2</td></tr>

<tr><th>row title</th><td>cell1.3</td><td>cell2.3</td></tr>

</table>

and it's pretty easy to use. From top to bottom you first enter the width of the table, the font, font-size, the color of the text. Of course you can also set a particular styling for a particular cell by using a

<span>

as explained in the Basic HTML Codes knowledge base. The background color is used to define the color of the background of the table. Under border-spacing the first value defines the space between cells horizontally and the second value vertically. Under border you define the border around the entire table.

Under th you define the parameters for the title-cells. The width equals the width of the table divided by the number of columns. Height defines the height of the cells. Color defines the color of the text in these cells. Of course you could also add other parameters to define the font or font size. You can also set a background color for the title-cells if you want them to have a different color than the other ones. Border defines the border displaying around the title cells.

Under td you define the parameters for the normal cells. Same as for th. Under text-align you could have the text aligned to left, right or justify instead of center.

The rest is pretty self explanatory I think. The first row

<tr><th>Table title</th><th>column title</th><th>column title</th></tr>

is for the title of the table and the columns. If you need more columns add more

<th>column title</th>

The second and third rows

<tr><th>row title</th><td>cell1.2</td><td>cell2.2</td></tr>

first you have the title of the row and then the cells. If you need more rows add more lines like the one above. If you added more columns in the first line remember to add the appropriate cells

<td>cell2.2</td>

in the other rows.

Once you're done with editing the code paste it into your WordPress page or post. That's it.

Another way to add tables to your website would be using Google Docs to embed an excel spreadsheet on your page as you can read here.

Chapter 2: Sortable tables

What is a sortable table? A sortable table is a table where you can click on a title or criteria to sort the elements in the table after that criteria. Here's an example of a sortable table where you can click on Name, Price or Rating to change the order in which the elements display:

Name	Price ($)	Rating (1-10) * where 10 is best
Name 1	300	1
Name 2	20	3.8
Name 3	10000	10
Name 4	62.30	9
Name 5	4500	7.8
Name 6	5	3.9
Name 7	12000	4.7
Name 8	20.50	8

This uses a script written by Stuart Langridge you find here: http://www.kryogenix.org/code/browser/sorttable/ you may want to read that page for further customizations. I will only discuss the basics here.

1. Click here to download a file called sorttable.js and upload it to the root of your server (If you don't know what the root is or how this is done read it here)
2. The code of the table is pretty much the same as the one you find in Chapter 1 of this page. I just changed the

<th>

tags of the first column to

<td>

, added

<script src="/sorttable.js"></script>

to call the script, added the class to the table to make it sortable by replacing

<table>

with

<table class="sortable">

and added some more rows. So in the end this is the code I get for the above sample table is:

<script src="/sorttable.js"></script>

<center><style type="text/css">

table {width:450px;

font-family: Helvetica;

font-size: 14px;

color:#fff;

background-color:#ccc;

border-spacing: 5px 5px;

border:3px solid #ccc;

}

th {width: 150px;

height:35px;

color:#000;

background-color: #fff;

border:1px solid #fff;

}

td {color:#000;

font-style:italic;

text-align:center;

background-color: #fff;

border:1px solid #fff;

}

</style>

<table class="sortable">

<tr><th>Name</th><th>Price ($)</th><th>Rating (1-10)<br><span style="font-size:8px;">* where 10 is best</span></th></tr>

<tr><td>Name 1</td><td>300</td><td>1</td></tr>

<tr><td>Name 2</td><td>20</td><td>3.8</td></tr>

<tr><td>Name 3</td><td>10000</td><td>10</td></tr>

<tr><td>Name 4</td><td>62.30</td><td>9</td></tr>

<tr><td>Name 5</td><td>4500</td><td>7.8</td></tr>

<tr><td>Name 6</td><td>5</td><td>3.9</td></tr>

<tr><td>Name 7</td><td>12000</td><td>4.7</td></tr>

<tr><td>Name 8</td><td>20.50</td><td>8</td></tr>

</table></center>

3. Have a look at the instructions in Chapter 1 on this page to know how to customize the appearance of the table.

Shadowbox

Cédric — Mon, 28 Mar 2011 15:35:08 +0000

How can I add Shadowbox to my WordPress created website? What can I do with it?

Shadowbox is an enlarge on click effect (zoom) such as Lightbox or Highslide. It is easy to use and looks fantastic. Here you will find a few examples...

Simple image:

Multiple images opening from one image:

Multiple images opening from an image gallery:

Movie from a thumbnail:

Further examples are also found on the Shadowbox-js.com website.

Just as Highslide, Shadowbox is free to use for personal websites but it's not free if you use it for commercial purposes (20$) . And I would really urge you to respect that!

1. Go to Shadowbox-js.com, check all the boxes you find on the page and hit the zip file at the bottom of the page to download the necessary source files
2. You will get a folder named shadowbox-X.X.X, rename this folder shadowbox and upload it to the root of your website (What is the root of a server/website?)
3. Now we need to add the shadowbox code to your page. The first part of the code is the same no matter what you want to do with the shadowbox. The first part is:

<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">

<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>

<script type="text/javascript">

Shadowbox.init();

</script>

The second part of the code differs depending on what you want to do with it. Whether you want to use it for images, movies, whatever first upload the files to your server and find out the URL (If you don't know what the root is or how this is done read it here).

Simple image opening from a thumbnail:

<a href="myimage.jpg" rel="shadowbox" title="My Image Title"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a>

Where it says myimage.jpg add the URL to your image
Replace My Image Title with the title you wnat to give to your image
Adapt width and height for the thumbnail

Multiple images opening from one image:

<a href="myimage.jpg" rel="shadowbox[albumname]" title="My Image Title"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a>

<a href="myimage2.jpg" rel="shadowbox[albumname]" title="My Image Title 2"></a>

<a href="myimage3.jpg" rel="shadowbox[albumname]" title="My Image Title 3"></a>

Multiple images opening from an image gallery:

<div style="width:450px; text-alignment:left;">

<a href="myimage.jpg" rel="shadowbox[albumname]" title="My Image Title"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a> <a href="myimage2.jpg" rel="shadowbox[albumname]" title="My Image Title 2"><img src="myimage2.jpg" style="width:200px; height:120px;border:0px;"></a> <a href="myimage3.jpg" rel="shadowbox[albumname]" title="My Image Title 3"><img src="myimage3.jpg" style="width:200px; height:120px;border:0px;"></a>

</div>

Where it says myimage.jpg add the URL to your image
Replace My Image Title with the title you want to give to your image
Adapt width and height for the thumbnail
Replace albumname with the name you want to give to the album or group of images. Of course you can have multiple groups on the same page by giving different group names.
The div was added to give a uniform look to the gallery. Enter the width you want to have thumbnails displaying in and change left to center if you want.

Movie:

<a href="mymovie.extension" rel="shadowbox;height=140;width=120">My Movie</a>

Where it says mymovie.extension add the URL to your movie
Adapt height and width to fit your movie
Change My Movie to what you want to display as the link text

Movie from thumbnail:

<a href="mymovie.extension" rel="shadowbox;height=140;width=120"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a>

Where it says mymovie.extension add the URL to your movie
Adapt height and width to fit your movie
Change My Movie to what you want to display as the link text
Where it says myimage.jpg add the URL to your image
Adapt width and height for the thumbnail

Website from link:

<a href="mywebsite.html" rel="shadowbox">Link Title</a>

Replace mywebsite.html with teh URL to the page you want to open in the shadowbox
Change Link Title to what you want to display as the link text

Website from thumbnail:

<a href="mywebsite.html" rel="shadowbox"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a>

Replace mywebsite.html with the URL to the page you want to open in the shadowbox
Where it says myimage.jpg add the URL to your image
Adapt width and height for the thumbnail

Mixed:

Of course you can also have an album with mixed content like images and movies and websites all in one. Just specify the same album name as we've seen earlier.

Take the first part of the code and the second part of the code which fits your needs.

If you want to add multiple shadowboxes to your page you have to add the first part of the code only once on your page. For the other boxes only add the appropriate second part of the code. No need to add the first part multiple times on the same page.

4. Paste the code for the shadowbox you found in step 3 of this tutorial into your post or page where you want the shadowbox to appear.

Zoomify

Cédric — Mon, 28 Mar 2011 14:39:09 +0000

What is the best way to add panoramic or high resolution photos in WordPress? How can I add Zoomify to my website?

Zoomify lets you add big images in a small area. It allows people to zoom in to see a detail and move around. It also loads very fast.

Chapter 1: With Zoomify converter
Chapter 2: With Photoshop (better and further customizable)
Chapter 3: Examples

Chapter 1: With Zoomify converter

1. Make a folder on your Desktop and name it zoomify3
2. In that folder add the image you want to zoomify and name the image zoomify3.jpg
3. Download and open the Zoomify Converter, choose the zoomify3.jpg image as the file to open

Zoomify will create another zoomify3 folder inside the zoomify 3 folder you created

4. Drop the ZoomifyViewer.swf file you find in the folder which downloaded when you downloaded the Zoomify Converter into the zoomify3 folder you created on your Desktop
5. Upload the zoomify3 folder you created to the root of your server (What is the root of a server/website?)
6. Use the following code to embed the zoomify into your website:

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="750" HEIGHT="450" ID="theMovie">

<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=/zoomify3/zoomify3/">

<PARAM NAME="MENU" VALUE="FALSE">

<PARAM NAME="SRC" VALUE="/zoomify3/ZoomifyViewer.swf">

="zoomifyImagePath=/zoomify3/zoomify3/" SRC="/zoomify3/ZoomifyViewer.swf" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  WIDTH="750" HEIGHT="450" NAME="theMovie"></EMBED>

</OBJECT>

7. Change width and height to better match your picture's ratio (optional)
8. Paste the code into your post or page where you want the zoomify to appear.

If you want to have multiple zoomify on your website just follow the tutorial again and replace all zoomify3 you find in the tutorial and in the code with zoomify4, zoomify5, zoomify6, ...

Chapter 2: With Photoshop (better and further customizable)

1. Name the image you want to zoomify to zoomify3.jpg
2. Open zoomify3.jpg in Photoshop and under File choose Export and Zoomify... (if you don't see Export as a choice, under File select "Display all the choices" or similar to see it)
3. You will now see a window popping up. At the top you can define the style. As the folder to publish to choose Desktop. Name enter zoomify3. Choose the quality. Choose the size you want the zoomify to display in on your website and hit OK.
4. On your Desktop you will now find a folder named zoomify3_img and a file called zoomify3.html
5. Upload the zoomify3_img folder to the root of your server (What is the root of a server/website?)
6. Open the zoomify3.html file in TextWrangler and copy the part of the code which looks similar to...

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" WIDTH="400" HEIGHT="400" ID="theMovie">

<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=zoomify3_img&zoomifyNavigatorVisible=false=true">

<PARAM NAME="BGCOLOR" VALUE="#000000">

<PARAM NAME="MENU" VALUE="FALSE">

<PARAM NAME="SRC" VALUE="zoomify3_img/zoomifyViewer.swf">

="zoomifyImagePath=zoomify3_img&zoomifyNavigatorVisible=false=true" SRC="zoomify3_img/zoomifyViewer.swf" BGCOLOR="#000000" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  WIDTH="400" HEIGHT="400" NAME="theMovie"></EMBED>

</OBJECT>

In front of every zoomify3_img you find in the code enter a slash / to make the paths being a absolute paths (in total there are 4 slashes to be added)
7. Once you added the four / paste the code (only starting from

until

</object>

both inlcuded) into your post or page where you want the zoomify to appear.

If you want to have multiple zoomify on your website just follow the tutorial again and replace all zoomify3 with zoomify4, zoomify5, zoomify6, ...