Sanrio Town

For those who like uploading images on their blogs but don’t know how to format these to make it look nicer, this tutorial would be of great help to you.

For those who weren’t able to see the blog basic tutorial on how to upload images, or if you’ve forgotten how to do it, here’s how you do it:

There are two ways in uploading images in your entries. One option is to get an image already uploaded on the Internet. If you haven’t put up yours yet, you can do so by first saving it in photo sharing sites, like Photobucket or Flickr. Once you’ve uploaded the image there, you can then get its link by right-clicking on the picture and then copying its URL. Bear in mind that you have to copy the Image URL and not that of the site you’re taking the picture from, otherwise, it wouldn’t work. Go to the Editor of your blog (“Write Post”) and then click on the Image button (the one that looks like a tree). A window should pop up asking for the URL. Paste what you’ve copied and then click “Insert.” The photo should then appear on the Editor.

Another option you have is if you upload the images directly here instead of coursing it through a photo sharing site. To do so, you have to have the images saved in your computer. Below the Editor is the Upload section. Click the “Browse” button and then search for the image you want to use. Once you’ve found it, click on it, followed by “Open.” Upload it, and then afterwards, click “Send to Editor.” The image should then appear there.

Another note: If there have been instances when the content of your sidebar appeared at the bottom rather than where it should be, chances are, the image you’ve uploaded at the top is a little too big. Resize its width down to 400 px and it should be back to normal.

How do you resize images, you ask? Aside from using photoediting software (like Photoshop), you can edit it by clicking on the Image button and then entering in “Dimensions” the size of how you want your image to be. Another great use of this little tree icon is changing the alignment of your images. If you’ve tried to change the position of your picture on your editor only to find it hasn’t changed after publishing, you can manually edit it with this button. Click on the image and then the Img button. Click Horizontal space and then enter there the size of how much space you want to appear on the left and right sides of the image. There’s really no definite number that you enter – it all depends on how big the image is.

Stay tuned for more image tutorials next week.

We’ve already covered how to change your font color and size, so we’ll be talking about how to change the font face of your blog entries.

What are font faces? These are the kinds of fonts that you can use, examples of which are Times, Arial, Verdana, and Tahoma.

Similar to when you change the font color and size, the face can only be changed in HTML and not in Editor. Also, as you probably have noticed by now, any editing you make with regards to the characters of your entry has to begin with < font ______=”xxxxxx” > and ends with < /font >, but without the spaces between the brackets, of course. That’s also how you do it when you change the font face of your entries: using < font face”xxxxxxxxx” > and then closing it with < /font >, bearing in mind that the spaces between the brackets be deleted. The “xxxxxxxxx” standing for the font face that you want to use. For example, if I wanted my font to be Helvetica, all I have to do is type < font face=”helvetica” > at the beginning of the sentence and then close it with < /font > at its end and I’ll have something that looks like this.

Let’s have some more examples.

This is Verdana.
This is Arial.
This is Arial Black.
This is Sylfaen.
This is Comic Sans MS.

Now, if your computer has a different set of font faces installed in it as compared to mine, chances are, you didn’t see some, if not all, of the different font faces I’ve used. The explanation is this: computers are limited with the font style that are saved on their systems. This means that even if you use a really cool font face on your blog, if it’s not on other people’s machines, what they’ll see is the default face and not the one that you modified. Don’t be deceived when you see your entry to appear the way you want it on your computer. It only displays like that because you have the font installed on your system.

For example, I’m using the Aniron for this sentence, as you can see on the screenshot below. However, since it’s not a common font, what most people will see is the regular font face.

There is, however, some way to remedy this. If you want to instill your own personal style on your blog entries, what you can do is to provide options for the computer to read, aside from your primary choice. The computer will then read these by order of importance (the order you set this is descending, meaning, your top preference is the first option and the one at the end is the last). Below is an example of how you do this:< font face=”aniron, sylfaen, tahoma, trebuchet, verdana ” > [text] < /font > .

When you use this, this means that the five font faces are the options the computer can read when it comes to “interpreting” your entry. Aniron, being the first on your list, is your priority. If the computer opening up that entry can’t read that, it will skip to the next one, Sylfaen, and so on. Only when the computer has run out of options will it use the default font.
You can combine all the font modifications that we’ve discussed so far. You can do this by putting < font color=”xxxxxx” size=”xx” face=”xxxxxxxxx” > and then closing with < /font >. It doesn’t matter what order you put these three as long as they’re all there.

Example: If I encode < font size=”4″ face=”arial black” color=”#oo9900 > at the beginning and then close it with < /font > , I’ll get this as a result.

That’s all for this week’s tutorial. Do try this on your own blog and see what it looks like.