Click
for sample for dark backgrounds.
There
are three easy steps to creating your LinkBox. The code that follows
will produce a LinkBox with a white background, suitable for pages with
lighter tones. Note that you'll need to work directly with the HTML
code of your page -- so if you use a WYSIWYG page creator such as FrontPage,
Dreamweaver, or one of the page builders from Geocities or other online
services, you'll need to find out how to access the HTML source code.
1.
Highlight and copy (CTRL-C) everything in the box below. Paste (CTRL-V)
the code into your webpage at the top, between the <head> and
</head> tags.
<SCRIPT
LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '"
+ id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable
=1,width=200,height=200,left=250,top= 200');");
}
// End -->
</SCRIPT> |
|
What
this does: This
popup window code will help Netscape users who visit your page. Since
the LinkBox uses a form of HTML that Netscape doesn't recognize, this
workaround will create a popup window with the LinkBox content.
2.
Next, use the same procedure to copy everything in the box below and
paste it right after the above code, just before the </head> tag.
<style
type="text/css">
IFRAME {
BORDER-RIGHT: #333333 1px solid; BORDER-TOP: #333333 1px solid;
BORDER-LEFT: #333333 1px solid; BORDER-BOTTOM: #333333 1px
solid
}
-->
</style> |
|
What
this does: This code is a CSS style
that will create a thin border around the LinkBox. This step is optional
but recommended!
3.
Final step! Copy and paste the code below at the point in your page
where you'd like to insert your LinkBox:
<iframe
src="http://www.epiguide.com/linkbox/light.shtml"
name="LinkBox" width="160" height="100"
align="default" frameborder="0">
<p><A HREF="javascript:popUp('http://www.epiguide.com/linkbox/light.shtml')">Click
for more webseries links!</a></p>
</iframe> |
|
What
this does: This creates an "inline
frame" -- a little window in your webpage that contains an outside
document. In this case, the document is the white LinkBox page for
light backgrounds. You can customize this code by changing the height
and width of the LinkBox, but note that 160x100 is really the minimum
size recommended. (Note: if you want one of the other colors seen
in the lefthand column, see below for the correct codes.)
Note
that everything between the <p> and </p> tags -- the "Click
for more webseries links" link -- will only be visible
to your visitors with Netscape. You can change the text of this link
if you like. Here's a preview of what your Netscape users will see:
Click
for more webseries links!
Code
for the light yellow LinkBox:
<iframe
src="http://www.epiguide.com/linkbox/lightyellow.shtml"
name="LinkBox" width="160" height="100"
align="default" frameborder="0">
<p><A HREF="javascript:popUp('http://www.epiguide.com/linkbox/lightyellow.shtml')">Click
for more webseries links!</a></p>
</iframe> |
|
Code
for the light green LinkBox:
<iframe
src="http://www.epiguide.com/linkbox/lightgreen.shtml"
name="LinkBox" width="160" height="100"
align="default" frameborder="0">
<p><A HREF="javascript:popUp('http://www.epiguide.com/linkbox/lightgreen.shtml')">Click
for more webseries links!</a></p>
</iframe> |
|
Code
for the light blue LinkBox:
<iframe
src="http://www.epiguide.com/linkbox/lightblue.shtml"
name="LinkBox" width="160" height="100"
align="default" frameborder="0">
<p><A HREF="javascript:popUp('http://www.epiguide.com/linkbox/lightblue.shtml')">Click
for more webseries links!</a></p>
</iframe> |
|
Code
for the light purple LinkBox:
<iframe
src="http://www.epiguide.com/linkbox/lightpurple.shtml"
name="LinkBox" width="160" height="100"
align="default" frameborder="0">
<p><A HREF="javascript:popUp('http://www.epiguide.com/linkbox/lightpurple.shtml')">Click
for more webseries links!</a></p>
</iframe> |
|
Code
for the light jade LinkBox:
<iframe
src="http://www.epiguide.com/linkbox/lightjade.shtml"
name="LinkBox" width="160" height="100"
align="default" frameborder="0">
<p><A HREF="javascript:popUp('http://www.epiguide.com/linkbox/lightjade.shtml')">Click
for more webseries links!</a></p>
</iframe> |
|
Important!
The LinkBox will only be visible when you check the page in your browser
when you're online; most HTML editors can't view inline frames directly.
When working on your page offline, you'll probably just see the Netscape
link. This should be expected, so don't panic! Just go online, open
your browser and surf to the page in order to see the finished product.
That's
it! If you have any questions about installing the LinkBox, visit the
epiguide Forums or drop us a line!
Prefer
to install a LinkBox for dark-colored backgrounds? Click
here for the code.
If
you're a series producer and would like to participate in the LinkBox
Episode exchange, we'd love to have you join us! Just add the LinkBox
to your site, then send a note to editor@epiguide.com.
We'll give you instructions on how to update your link and episode news.