Just So You Know {Read First!}

  1. This guide is for the coding part of blogs; not the images.
  2. If you don't have an image but want to learn anyways, try coding the example along with me.
  3. Although much simpler than than the ones neopets uses, these codes won't work on petlookups/pet descriptions.
  4. Guild layouts are just really giant blogs.
  5. If you have any questions, feel free neomail me

Link Back

If you found this guide helpful, why not link back?

Check out our affiliates!

What You Want

What you want in the end is blog, or an image with text in the shaded area. Here's an example below(yes, this image is from neopet's premade pages)

YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!YOUR SPIFFALICIOUS TEXT GOES HERE!!
Note-the shaded, or lighter area where your text shows up is NOT coded. It is PART of the image!

The Basic Code

First, let's take a look at the basic code (this code is much simpler than the one neopets uses, but it won't work on petlookups):

Important!

You will only be changing the parts in CAPITAL LETTERS. The parts in CAPITAL LETTERS will be replaced by the corect info! Got it? Everything else is there for a reason!

If you didn't understand a bit of it, don't worry, because you don't have to. =P Read on below to see what do to with the code.

Now let's break it down.

URL

The first part in capital letters says URL. (I believe it stands for Universal Resource Locater, but correct me if I'm wrong and it's not important anyways...)

The URL is the image link. To get the url of an image, right click, properties, highlight and copy the url.

After you upload an image, the url should be available.

Ex. The URL for the example blog shown above is: http://images.neopets.com/shopblogs/dung.gif

REPLACE "URL" in the code with your blog's URL.

IMG

IMG stands for image, but you'll notice that there are two parts that contain it.

IMGWIDTH is the first one.

It should be replaced with the WIDTH of your image.

To find this, open up your image in paint (start, all programs, accessories, paint). Click image, attributes. There will be a section that says "width" with a number after it. Copy that number (hold down the control + c keys at the same time) and paste it where it says IMGWIDTH.

Follow the same guidelines, and replace IMGHEIGHT with the image's actual height.

**LEAVE THE px part alone! (PX means pixels, so the size remains consistent in all browsers.)
**In the example, the width should be 190px and the height is 289px.

TOLEFT and TOTOP

TOLEFT means how many pixels the shaded area is from the left. TOTOP is how far down the top of the shaded area is from the top of the image. To get these numbers, open your image in paint, again.

Click on the selecting tool, the one that looks like this:

Once you make sure you're on the selecting option, hover over the top left corner of the shaded area where you want your text to appear.

While You're Hovering

While you're hovering, pay attention to the two numbers separated by commas on the lower right half of the screen.

IF YOU MOVE YOUR MOUSE AT ALL, THE NUMBERS WILL CHANGE! KEEP THE MOUSE STILL

The numbers, again, will be separated by a comma.
The first number, is the TOLEFT part. (So in this example 231 is the TOLEFT.)

The SECOND number, after the comma, is the TOTOP. (So then the 7 would be the TOTOP)

TXTAREAWIDTH, TXTAREAHEIGHT

Almost done! Now all we need is the height and width of the shaded area (shaded area=place where text will appear).

STILL using the selecting tool mentioned earlier, click the top-left corner of the shaded area, and DRAG the mouse to the bottom-right corner. The entire shaded area should be selected now!

Now, COPY THE IMAGE
(In the top left corner of the SCREEN, edit, copy.)
Open up a NEW paint window and paste it in.
(Edit, paste.)
Click image, attributes.

The width is the TXTAREAWIDTH.

The height is the TXTAREAHEIGHT.

YOUR TEXT

The part that says YOUR SPIFFALICIOUS TEXT GOES HERE! YOU MUST HAVE ENOUGH TEXT OR THE BOX WILL NOT SCROLL! is where you PUT YOUR TEXT.

Replace that stuff with what you want to write!
**And, yes you DO need enough text to make the blog scroll.

The End

And there you have it, how to code a blog.
  1. I would appreciate it if you linked back!


  2. If you still have any questions or are confused, neomail me!

    Comments/Suggestions are greatly appreciated!

Affiliates




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