How To Make Blogs

Uploading
Coding
Finished Blog

Making your Image

Step 1. First, you need an image program. I use Paint Shop Pro 8. You can download a free trial of a jasc program, like paint shop pro, at jasc.com.

Step 2. Open a new image. It will ask you for dimensions- width and height. I make all of my blogs 300 x 200 pixels. It will look something like this:

Step 3. Choose an image for the background. Now, copy it and paste it into your new image. You use this button: to move the image to where you want it.

Step 4. This is where you get to do whatever you want to do! I suggest experimenting with the effects and maybe adding a couple of smaller images to go along with the background :P I usually put the text box in here. To do that, click the button that looks like this: and draw the box whatever size you want. It should look like this now:


Step 5. Now I fade the text box so that the text is more easily read. To do this, select the area with this button: and go to adjust-brightness and contrast-brightness/contrast.

This will bring up a box that looks like this:


You can play around with the values ^_^ To get get rid of dotted line around the selection after you are finished editing it, click the select button and right click in the image.

Step 6. Text. If you want to write something, click the button with the A on it. Make sure the color you want your text to be is lower on the color palette.


Step 7. If you want a border, I usually hand draw it to keep the blog the same size. If you are lazy or hurried you can instead go to Image-Add Borders... It will ask you to flatten the picture, so click yes if you are not planning on changing anything else. Now you change the thickness of the border to what you want. I like one pixel all the way around.

Note: Using this method changes the size of the blog, so when you go to code it, check the size so you don't cut out any part of the picture ^_^

Step 8. Adding credit (optional). Basically the same as step 6, just smaller and out of the way, usually. See picture below:
I usually fade behind the credit, unless it's easily visible.
**Make sure to save your blog in a place you'll remember!

Uploading your Blog


Step 1. First, find an image hosting site. I use theimagehosting.com, but some others are photobucket.com and villagephotos.com. There are others, but they all work the same. You may need to register, but that's usually no problem. After you register, always remember to log in! Also, pay attention as to whether or not you have to pay to use the site. Some sites won't let you upload a certain number of pictures unless you pay.

Step 2. Upload it! Find something that looks similar to this on the hosting site:

Click browse and find your blog, then click upload! *Note: This upload box is from theimagehosting.com

Step 3. To get the url for your blog, you can usually look at the images you've uploaded, so either find a button that says 'Get the url' or something like that, or click on the thumbnail of the image. If it does not tell you the url, right click on the image, go to properties and copy the url from there.

Okay, now you have the url!
Coding your Blog

Below is a rough code. I have substituted the values with letters and created a key to go with it. Copy the code and insert your own values. Good luck!

A. The width of the picture
B. The height of the picture
C. The url of the picture
D. Number of pixels from the top of the picture to where the text area starts (the top of the box)
E. Number of pixels from the left side of the picture to where the text area starts (the left side of the box)
F. The width of the text area (box)
G. The height of the text area (box)
H. Optional. Opacity determines if the scroll bar and the text will be opaque or transparent. The higher the value, the less transparent it is. If the value is 0, it will be completely transparent.
I-P. Scroll bar colors. Experiment, but I suggest using different shades of one color or using similar colors. I usually have it all the same color except for the arrow color (M). Look below for scrollbar help.
Q. Font size. I usually make mine 1, but it's up to you.
R. Text font. Example: verdana, arial, tahoma, etc.
S. Font color. I usually match it with the scrollbar arrow. Again it's up to you.
T. The amount of pixels to the right of the text area (box). It's okay to make this value less than it actually is. Mine usually stays at 10.


Scrollbar Information
Scrollbar: First of all, this section is for those of you who have no idea what each part of the scrollbar is. I have blown up a scrollbar and color coded it so that the colors correspond with the different parts. For example, if you don't know what the scrollbar face is, you can find it in the key below and look at where the color listed next to it is in the blown up scrollbar.

Note: I do not know what the base color is. I've tried to find out, but whenever I put a radically different color there, I can't see it! As far as I know, it doesn't have an effect on the scrollbar's appearance! If you know or find out what it is, please tell me! I would greatly appreciate it ^_^
Part of Scrollbar
as seen in Code
Color of Part
as seen in the Model
Model
Face
Blue
Highlight
Red
Shadow
Orange
3D Light
Green
Arrow
Yellow
Track
Grey
Dark Shadow
Black

Correction: The base color appears when you click the track to scroll down the page quickly, it's the color that the track becomes as you click it.
Compliments to funkymunkysss


Your Finished Blog!

Congratulations! You've successfully made a blog! This is how the How-to-Make-a-Blog blog (sorry about that :P) on this page turned out.

I can fly!
I can fly!
I can fly!
I can fly!
I can fly!
I can fly!
I can fly!
I can fly!
I can fly!
I can fly!
I can fly!


If you like this blog and want it, please feel free ^_^



NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2009.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions