Code Guide
This is a summary of the codes you can use when posting on your
SU blog and in SU forums. Please see the front page for more
information :)
Also, you might want to try the HTML code generator.
Font
How do I change the font size?
<font size=4>text</font>
Gives this:
text
2 is the default size on SU, so adding that won't make any
difference. 3 to 7 makes the font bigger and 1 makes it smaller.
Size 1
Size 7
How do I change the font color? (usual colors)
<font color="green">text</font>
Gives this:
text
I've created an extensive list of named colors. Check it out!
How do I change the font color? (unusual colors)
<font color="#FF9A00">text</font>
Gives this:
text
If you are using Firefox, I recommend getting
ColorZilla for simple color picking.
How do I change the font? (I.e. font face)
<font face="times new roman">text</font>
Gives this:
text
Just remember that even if you've downloaded a really cool font which you'd like to use,
other people won't see it unless they too have downloaded it. The above example is Times New
Roman, a common font.
How do I write italic text?
<i>text</i>
Gives this:
text
How do I write bold text?
<b>text</b>
Gives this:
text
How do I write underlined text?
<u>text</u>
Gives this:
text
How do I write striked out text?
<del>text</del>
Gives this:
text
Do I need to add a new <font> tag for every change?
Nope, certainly not. You can merge all font tags into one. Same goes for other tags,
but it has to be the same kind. I.e. you can't combine <i> and <font> into one tag.
<font size="3" color="#9933FF" face="Times New Roman">All text here.</font>
Gives this:
All text here.
If you want the text in italic too, you need to add the <i> tag either inside or outside
of the other.
<font size="3" color="#9933FF" face="Times New Roman"><i>All text here.</i></font>
Gives this:
All text here.
Images
How do I add an image to a review? (photoblogging)
right-click on image -> StumbleUpon Photoblog It!
However, this way you can add only one image to each review. This also adds a link around
the image, which you might not always want.
How do I add an image to a review? (without photoblogging)
<img src="http://stumbleupon.abandonedgarden.com/images/examples/100x100.gif">
Gives this:
This way, you can add more than one image in a review. But remember that there are many
people on dial-up, and trust me, loading pages with dozens of large images is not fun!
Also, see below for imformation on resizing images.
How do I change size on a big image?
<img src="http://stumbleupon.abandonedgarden.com/images/examples/400x200.gif" width="200" height="100">
Gives this:
This image is actually 400 x 200 pixels, but has been made 200 x 100. The file is still just as big,
and thus takes the same time to load as the bigger. (Useful to know for dial-up users.) Also, it can
sometimes be hard to get the right proportions. You might have to use a calculator for that :) If you
don't know the size of the original image, save it to your computer and open it in a paint program.
Sometimes it might be better to save the image locally, resize it and upload it to an image hosting site,
such as ImageShack. Bear in mind that not all people
like having their images either hotlinked and/or uploaded elsewhere. It's your own responsibility, so
it's up to you what to do.
This way, you can, in theory, expand the tables of your blog page, making it wider. However, I do not
recommend this, as people with lower resolution screens will have to scroll sideways - and that is
something most people dislike.
How do I make the text flow beside the image?
<img src="http://stumbleupon.abandonedgarden.com/images/examples/100x100.gif" align="left">
Gives this:
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<img src="http://stumbleupon.abandonedgarden.com/images/examples/100x100.gif" align="right">
Gives this:
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Links
How do I add a link?
<a href="http://stumbleupon.abandonedgarden.com">Abandoned Garden home</a>
Gives this:
Abandoned Garden home
You can also just write the link directly in the text area on
SU and it will transform
into a clickable link. Most of the time, this looks nicer though.
What is the rel="nofollow" that gets added to every link I post?
This is added automatically, so it's nothing you do. This is to stop robots from following the links. I don't know much about it, but there is no need to worry about it.
Miscellaneous
How do I center text/images?
<center>text</center>
Gives this:
text
<center><img src="http://stumbleupon.abandonedgarden.com/images/examples/100x100.gif"></center>
Gives this:
How do I make lists?
<ul>Line one<br>
Line two
Line three</ul>
Gives this:
Line one
Line two
Line three
Or, if you want a visual list, use this code.
<ul><li>Line one</li>
<li>Line two</li>
<li>Line three</li></ul>
Gives this:
- Line one
- Line two
- Line three
Line two
Line three