My dear friend Monica is new to this world of blogging, and has had many questions about how to do this, that, and the other. It helps to be HTML proficient in cases like this, but for those who aren't very skilled with codes I'm going to do you a huge favor in this post. It's basically a How To/DIY kind of a thing for the stuff you'd want to learn to do for your own posts. I use a LOT of code in my posts, and I'm always happy to share what I know with others.
Let's start with my Semagic client settings. I post to LJ exclusively with the Semagic Client. I also use it for editing code I use elsewhere, in layouts for LJ, in websites for clients, word processing, you name it. It is very versatile software. One of the best features in Semagic is the ability to plug in your own macros. A macro is a kind of command you give, which saves you the headache of having to type out the codes or things you would tend to use a lot of in your posts. See my post on Semagic here for everything you may need to know about it.
For these tutorials, you'll need to replace the text I have put in red with your own info, such as URLS (web addresses) and the like.
Let's start with images, pretty basic. One thing I get asked a lot is how I get my images to move around in my posts. All images you post to your blog are going to default to the left margin of your layout, and unless you add a specific code allowing otherwise, any text you enter after will appear below the image. I don't like wasted space, so I always place images in my entries where I enter text to either the left or right side, with the text wrapping around. I rotate the placement, but it is really up to you.
To place an image on the left side of your post, use the following code:
<img src="IMAGE URL HERE" border="1" ALIGN="LEFT" VSPACE="2" hspace="5">Using this code will allow you to utilize the space beside the image and prevent that wasted blank space you would have otherwise, like this (see left). If you want the image to appear on the right side, simply substitute the word "RIGHT" in the code for the "LEFT" attribute. I added a 1 pixel border to this one, but if you don't want the border change the "1" attribute to "0".
If you want to have a little bit of small text beneath your image to caption it, use the following code:
<table style="float:right; margin-left: 0px; border: 0px solid #916d3a;" width="100"><tr><td align="right"><span class="imgborder"><img src="IMAGE URL HERE" border="0" alt=""></span></td></tr>
<tr><td><span class="photocaption"><p><font size="-2">CAPTION TEXT HERE</font></p></span></td></tr></table>
If you'd like to know how I've done things like this in the past, comment with a link to a previous post and I'll add it to this one. You'll likely find all the links to my older stuff on my tage page.
One last thing - code for the line I've posted twice now to break out this post into sections is the easiest thing ever:
<hr>If you want it shorter or a different color, change the attributes for width and color (list of color codes, called RGB values, can be found here):
<hr color="#ff00ff" noshade="noshade" width="50%">Here's what you'll end up with from the code above: