There are two options for posting on LJ – rich text and html.  When you email your fic to the lovely organisers of the Secret Santa this year they’re going to be using the html option, so here’s some handy tips on how to save our organisers a headache by marking your fics up for them.  It’s also useful for people who, like me, don’t along with the rich text box!  Any questions, feel free to ask :)

Where I’ve written TEXT this is the text that you want to be affected by the tag.

Here are the tags that you will probably use the most often:

To make you text bold: <b>TEXT</b>
To make your text italic: <i>TEXT</i>
To underline your text: <u>TEXT</u>
To strikethrough text: <s>TEXT</s>

To show a livejournal username with a built in link like inkvoices : <lj user="USERNAME">

To hide text behind a cut: <lj-cut text="THE UNEXPANDED TEXT">TEXT</lj-cut>

The html posing box on LJ recognises line breaks and paragraphs – how you type them is how they show up.  This is a good thing *grins*.  The convention for posting fics on LJ is to leave a line between paragraphs, avoiding large blocks of text that are often difficult to read.  Text typed into the html posting box will also automatically be aligned to the left.

You can change this to align it to the centre: <center>TEXT</center>

And to the right: <align="right">TEXT</align>

Brits and other non-US English users watch out for your spelling – html code is US English.  This catches me out a lot!

Html can also be fussy when it comes to the quotation marks used in them – if I type the tags with quotation marks in Word and then copy and paste into the LJ posting box the quotation marks aren’t accepted, so I have to add the quotation marks when I get to the posting box.  If this is a problem for you as well then I recommend posting your fic into a html livejournal posting box, adding the quotation marks, and then copy and pasting the fic onto the email you’ll be sending to the Secret Santa organisers.   Or pasting it back into Word and sending THAT document to the Secret Santa organisers.

It can also be fun to change the size and colour of your text.

The easiest way to make it smaller is: <small>TEXT</small>

Another way is to add a + or – that can go to seven in either direction.  For example: <font size=+3>TEXT</font>

There are a number of colours that you can use with the simple tag <font color="COLOUR">TEXT</font> such as <font color="red">TEXT</font>.  These colors are (and are spelt as): red, yellow, blue, green, black, white, aqua, fuscia, lime, maroon, navy, olive, silver, gold, teal, and gray.

Some other tags that can come in handy:

Adding links: <a href="LINK HERE">TEXT</a>

Where it says LINK HERE the link should start with http:// ; The easiest way to get a link is to copy and paste it from your internet browser’s address bar.  The TEXT part can be whatever you want :)

A link to this comm would look like <a href="http://be-compromised.livejournal.com/">TEXT</a>

Adding pictures: <img src="LINK HERE"/>

When people refer to ‘hotlinking’ they mean people who just copy the link of an image or icon and use that in their picture links.  In moderation, this is fine, but if too many people use the same link then wherever that link has been uploaded to can’t cope and the image link shorts out, for lack of a better explanation.  To avoid this save the image to your own computer, then upload it yourself onto your own place on the internet.  I use both photobucket and the livejournal scrapbook.

To use the scrapbook go to ‘home’, hover over ‘profile’ and go down to ‘scrapbook’ and click.  You will have options to create a new album or just to upload.  Follow the instructions to upload, either into an unsorted album or a new one.  Underneath the uploaded picture, on the right, you have the options ‘set as cover’, ‘original’, a little chain symbol, and ‘delete’.  Click on the chain and it will actually give you the direct link and, underneath, the html that I’ve shown you above complete with the link.  Alternatively, click on ‘original’ which will lead you to the image and nothing but the image, at which point you can just copy what is in the address bar.

You always use a direct link for posting pictures or images.  This is the image itself.  Not the address for the page that the image is on.  (Yep, I’ve done that mistake too.)

You can also post a box with html in it, so that people can copy and paste it, known as a ‘text box’.  This box doesn’t have to have html in it, but it’s a way of posting html without it doing anything.  The code is: <textarea rows='5' cols='42'>TEXT</textarea>

You can use different values, but 5 and 42 make a pretty good size and looks like:

this is where your text or html goes

Tags can be combined, just remember to close them all and in reverse order.  For example:

<u><b>TEXT</b></u>

<center><img src="IMAGE LINK"/></center>

And a few other things:

I’ve shown you how to do a livejournal username with a link, like be_compromised, which was <lj user="be_compromised"> since comm usernames are done the same as individual's usernames, but you can also do the same for dreamwidth and AO3 usernames.  Replace USERNAME with the username.

For dreamwidth:

<a href='http://USERNAME.dreamwidth.org/'><img src='http://dreamwidth.org/img/silk/identity/community.png' alt='[community profile] ' width='16' height='16' style='vertical-align: text-bottom; border: 0; padding-right: 1px;' /></a><a href='http://USERNAME.dreamwidth.org/'><b>USERNAME</b></a>

For AO3:

<a href="http://www.archiveofourown.org/users/USERNAME/profile"><img src="http://archiveofourown.org/favicon.ico" alt="[archiveofourown.org profile] " style="vertical-align: bottom; border: 0; padding-right: 1px;" /></a><a href="http://www.archiveofourown.org/users/USERNAME/"><b>USERNAME</b></a>

And finally, to hide spoilers or other text that you don’t want people to see you want to make the background colour the same colour as the text.  Some people just make their text white, but not everyone has a white background.  White text for someone that has a black background on their friends list page really does not hide anything!

To make both the text and the background white the html is: <span style="color: #ffffff; background-color: #ffffff;">TEXT</span>

Play around and use the preview function to see what things look like :)

If you can think of a way I can phrase/explain things to make them clearer please do tell me.  And if you want to add your own useful html hints and tips in the comments and make this a html party, fire away :D

PS. And if this entry is formatted differently to my usual posts that would be because I did it in the rich text box so that the html codes wouldn't activate and, like I said, the rich text box and me are not friends *sigh*.