[Guide] Setting up a Custom Arcade

Basically, this will teach you how to make a custom arcade containing games from sites where they give you embed codes to use their games, like miniclip.com.

Some basic knowledge of HTML is recommended.

GETTING THE EMBED CODES
Any site which offers you games to use on your website usually gives you embed codes. For example, http://www.miniclip.com/games/en/webmaster-games.php.
Get the embed codes for all the games that you plan to use in your arcade.

MAKING THE ARCADE
This is fairly complicated. We'll use dynamic iframes for this. First, you need to make an individual HTML file for each of the games.

Code:

<HTML>
<HEAD>
<TITLE>REPLACE</TITLE>
</HEAD>
<BODY>
PLACE THE EMBED CODE HERE
</BODY>
</HTML>

You need to make one individual HTML file for each of your games. Replace 'PLACE THE EMBED CODE HERE' with the embed code for that game.. Also, replace 'REPLACE' with the game's name. Once you are done customizing the code, put it in notepad and save it as '*.html'. Replace * with a meaningful name that will tell you which game's it is. Upload the files somewhere (I prefer Google Pagecreator) Remember the urls of the files.

Now, you need the actual page that will be displayed to your users.

Code:

<HTML>
<HEAD>
<TITLE>Arcade</TITLE>
<script>
function loadIframe(id,theURL) {
document.getElementById(id).src = theURL;
}
</script>
</HEAD>
<BODY>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="25%"> </td>
<td width="75%"> <iframe id="arc" src="game1">Sorry, your browser does not support iframes</iframe> </td>
</tr>
</table>
</BODY>
</HTML>

That is the outline for the body.
In between <td width=25%> and the </td> following it, you place 1 link to each of the games. Also, replace 'game1' with the url of the first game. This will be the game which will be shown by default.
For each of the games, you put this code between <td width=25%> and </td>

Code:

<a href="javascript:void(0);" onmousedown="loadiframe('arc','THEURL')">REPLACE THIS WITH THE GAME'S NAME</a>

You can also put this just before </BODY>:

Code:

That will take you user back to your forum.
That will give you the HTML for the page which will be shown to your users. Copy-paste it into notepad and save it as Arcade.html
Upload it anywhere. I prefer Google PageCreator. Remember the URL, once again.
You can make any changes on that page to make it look better.

REDIRECTING YOUR USER
Then place this code into your headers/footers:

Code:

Replace 'THE URL' with arcade.html's access url.
eg. http://vikhyatk.googlepages.com/arcade.html
That will basically take your user to your page instead of the default SMF Arcade. Note that you need the SMF arcade installed for this to work.

If you have any questions, feel free to ask.