So.
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:
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:
| IMAGE URL HERE” border=”0″ alt=”"> |
|
CAPTION TEXT HERE
|
|
|
This post is Not Safe For Work.
|
And this (see image at right) is what you’ll get as a result - nice and neat and functional, plus you have a neat space to give a blurb about whatever image you’ve posted directly underneath it. Some of these codes you’re going to have to change attributes for. In this example, the image is 100 pixels wide, so I entered 100 in the width attribute so the text would be in line with the width of the image. To find out the pixel width of an image on your computer, simply mouse over the image file icon and it’ll tell you, or right-click on the file and select Properties. The first number in
Dimensions is the width, followed by height.
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:
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):
Here’s what you’ll end up with from the code above:
Nifty, huh?
