Great Underground Empire Strikes Back
Views
3067
Comments
135

Handy Dandy HTML Guide

Warning: You are about to become very dangerous on FanNation. remember what Peter Parker's uncle told him:

"With great power comes great responsibility".

^^^^^^^Used wisely^^^^^^^

1. Tag List

2. Formatting Text and Quote Boxes

3. Uploading Images and TinyURL

4. Swimsuit 2010 Workaround

5. Hyperlinks and Clickable Images

6. Youtube Videos

7. Formatting Tags in a Comment Quote

1. Tag List

First, HTML works with brackets on Fannation. HTML requires an opening tag and a closing tag. Opening tags and closing tags look like this:

[Tag]Link or text[/Tag]

Now the trickiest part of pasting links is the nasty habit of FanNation inserting spaces into long links. The extra space appears as a "%20" when you look at the link. To get around this error, you need to create a shorter link at http://tinyurl.com. More on this below.

The main tags are:

Picture Tag: IMG

NOTE: FanNation mods blocked the ability to post pics with 'img' (lowercase only - uppercase still works). Change all 'img' examples to 'IMG'.

Bold Tag: b

Italics Tag: i

Youtube Tag: youtube

Direct Hyperlink Tag: url

Embedded Hyperlink opening Tag: url=http://tinyurl.com/xxxxxx.

Embedded Hyperlink Closing Tag: url

Gray Quote Box: quote

2. Formatting Text and Quote Boxes

Formatting Text

[Tag]any text here[/Tag]

Bold: Tag = b

Italics: Tag = i

Red: Tag = url

You can combine HTML Tags, but remember to close the tags in REVERSE order.

For Text that is Red, enclose the text in the URL tags. This also works inside Bold and Italics.

As far as I know, no other colors are possible.

____________________________

Insert a quote box

Fannation allows quoting other comments. You can add your own quote box by using the "quote" tag. The appearance of the quote box varies depending on the section of FanNation.

Blog Post: Indented gray, italic text.

Comment Box: Indented gray box with black text.

Throwdown Argument: this does not work in a Throwdown argument. It dorks up the argument box... which is kind of funny in its own right.

[Tag]Quoted text[/Tag]

Tag = quote

Blog quotes are indented gray italics.

You can combine quote with url to get a "Scarlet and Gray" themed comment box.

3. Uploading Images and TinyURL

If the picture is on your computer, first upload it to your FN profile or an image sharing site of your choice. If the image is already on the internet, skip to step 6.

1. To upload to your FanNation Profile, go to your profile by clicking your user name.

2. Click the "> Images" tab.

3. Upload new Photo

4. Browse to the file, click the terms of use check box. Click > Save Photo.

5. You will probably see a red [x] where the image failed to refresh. No worries. Click the image thumbnail or red [x] to see a larger picture below.

6. On the full image, right-click and select properties.

7. Under Address (URL), select the address (right-click the address and click Select All).

8. Copy the URL by pressing [ctrl]-[c]

9. Open http://tinyurl.com in a new tab.

10. Paste ([ctrl]-[v]) the image into the tinyurl text box. Click [Make TinyURL!]

11. Select the new tinyurl. Do not select the url labeled "preview".

12. Copy the TinyURL by pressing [ctrl]-[c]

13. Go back to FanNation's comment box. Use the [img] tags to create the image.

14. Click "> Submit" You're done!

4. Swimsuit 2010 Workaround

Sports Illustrated tried to get a little bit sneaky this year to prevent linking to pictures in the SI 2010 Swimsuit. However, they are not too sneaky for PSUinStL's Handy Dandy HTML Guide!!!

SI covered the image with a transparent gif file. If you try to grab the image (right-click, properties), you see the gif properties. But the picture is tantalizingly close, just behind the glass.

I've heard Firefox still works with Right-Click. This is for Internet Explorer users.

1. Find a swimsuit pick you want to post. Take your time. Make sure. Enjoy... we'll wait.

2. From Internet Explorer's menu, Select View > Source

Whoa.. what's this? Geek talk. Klingon or something. I'ts OK... deep breath. Remember the girl of your dreams is in here.

3. Using the default word editor (Usually [Ctrl]-[f] or Edit > Find), do a search for:

<div class="cnnImageHolder">

This is the code that contains the link to the real file. It is a little more than halfway down the page of code.

A couple lines down, you'll see <img src=.

img src=http://i.cdn.turner.com/si/pr/subs/swimsuit/images/10_bar-refaeli_02.jpg

4. Grab the img src link. Copy/paste into TinyUrl.com. Congrats. You've hacked SI. OK, not really but it feels good.

Stick it to the man!

5. Hyperlinks and Clickable Images

Hyperlinks

Making hyperlinks follows a very similar procedure to embedding pictures. FanNation still breaks long links with spaces. Therefore, it helps to use tinyURL.com again to shorten the link. Follow Steps 8-12 under 3. Uploading Images and TinyURL to create the tinyURL with the long website url.

Direct Hyperlink:
[Tag]http://tinyurl.com/xxxxxx[/Tag]
Tag = url


Embedded Hyperlink
[Tag=http://tinyurl.com/xxxxxx]Click Here[/Tag]
Tag= url

____________________________

Clickable Images

You can make images clickable by inserting an [IMG] tag inside a [url] tag. Make sure there is a space betweeen the url and img brackets so FanNation doesn't insert a space automatically. Use the techniques above to make an image link and a separate hyperlink.

6. Youtube Videos

I bet you couldn't scroll fast enough to learn this trick. This is arguably the easiest one.

[Tag]http://wwwyoutube.com/watch?v=blahblah[/Tag]
Tag = youtube

Important: Youtube cannot be shortened with tiny URL.

However, the standard youtube link is short enough. Sometimes youtube adds extra crap to the URL that must be deleted... like: "http://www.youtube.com/watch?v=blahblah&feature=related".

Delete the ampersand and everything after it. (&feature=related). The ampersand and everything after it is useless.

7. Formatting Tags in a Comment Quote

Tags in quotes use less than (<) and greater than (>) signs like regular HTML, not brackets. Still use an opening and closing tag with the backslash. They can be combined but close them in reverse order.

Bold: <b>

Italics: <i>

Bigger font (can be combined): <big>

Smaller font (cannot be combined): <small>

Strike through: <del>

Underline: <ins>

Picture (NO closing tag!): <img src="http://tinyurl.com/xxxxxxx">

Hyperlink: <a href="http://www.fannation.com/blogs/post/429179" mce_href="http://www.fannation.com/blogs/post/429179"> Visit my Blog</a>

For example

The standard FanNation Quote Box would have:

<b>QUOTE(#19):</b> <small>Originally posted 12:20 PM ET 02.23 by PSUinConthievable</small>

To fix a typo:

Robert Horry is better than <del>LEBRON</del> KOBE.

Clickable Thumbnail:

<a href="http://www.fannation.com/blogs/post/712306"><img src="http://tinyurl.com/yacs3sj"></a>

Please bookmark and check back for updates. Have a tip? Send me FanMail. Enjoy.

August 6, 2010  06:28 PM ET

Awesome! My favorite blog... reincarnate

August 20, 2010  10:56 AM ET

Props to you, Grue. This must have taken a long time. It's very appreciated.

August 20, 2010  11:03 AM ET

it works

August 20, 2010  11:04 AM ET

[ins]hello[/ins]

August 20, 2010  11:04 AM ET

<ins>hello</ins>

August 20, 2010  11:05 AM ET
QUOTE(#9):

<ins>hello</ins>

FAIL

August 20, 2010  11:05 AM ET
QUOTE(#9):

hello

hmm

August 20, 2010  11:06 AM ET

so how was RSP able to do blue text?

August 20, 2010  11:07 AM ET
QUOTE(#12):

so how was RSP able to do blue text?

???

August 20, 2010  11:09 AM ET
QUOTE(#13):

???

???

August 23, 2010  10:10 PM ET

well ...

August 23, 2010  10:12 PM ET

Using IMG ...

August 23, 2010  10:14 PM ET

Again ...

<img src="http://www.imagevader.com/show.php?img=166596_148708.jpg.html&qu ot;>

August 23, 2010  10:16 PM ET

<img src="http://tinyurl.com/2enssjk">

October 15, 2010  10:52 AM ET

Testing ....

<img src="http://imagevader.com/images.php?i=48842_1014-2.jpg">

October 15, 2010  10:58 AM ET

<img src="http://imagevader.com/out.php?i=186395_jencorliss.jpg">

October 15, 2010  10:59 AM ET

<IMG src="http://imagevader.com/out.php?i=186395_jencorliss.jpg" alt="Free Image Hosting At ImageVader.com" />

October 28, 2010  10:47 AM ET
QUOTE(#25):

Put in the quote box.

October 31, 2010  11:07 AM ET

boom boom



???

 
October 31, 2010  11:10 AM ET
QUOTE(#24):

Testing ....<img src="http://imagevader.com/images.php?i=48842_1014-2.jpg">

klllk

Comment

Remember to keep your posts clean. Profanity will get filtered, and offensive comments will be removed.


Start Your Own Blog

Start Now

Truth & Rumors

MOST POPULAR

  1. 1
    Irving: Fans don't deserve the Cavs
    Views
    7084
    Comments
    680
  2. 2
    Red Sox dodged two injury scares
    Views
    2924
    Comments
    495
  3. 3
    Trump taking a legit run at the Bills
    Views
    2191
    Comments
    106
  4. 4
    Why the Raiders have lost 111 of 160 games
    Views
    5512
    Comments
    66
  5. 5
    Bruins can't count on shut-down D
    Views
    1476
    Comments
    59

SI.com

SI Photos