Here is a (hopefully) simple step-by-step guide to coding a blog. For those who do not know, a "blog" in this guide refers to an image with a scrolling box coded into it. Neo Nutters provides premade blogs here, but this page may be helpful if you would like to create and/or code your own.

Note: The codes used in this tutorial will work only for blogs with one scrolling box. Blogs with two or more boxes require a different code, and you will not find it here as of now.

• STEP 1: Getting an Image to Work With

To code a blog, you obviously must have a blog image to work with in the first place. You have a few options, including making your own or asking another person to make one for you. It is reccomended that your blog image includes some sort of box for text, although it isn't absolutely necessary.

Once you have obtained an image, make sure that it is uploaded onto some sort of online host (http://www.yoxio.com/ is a good one, although there are many others).

Coding a blog is made much easier if you have some sort of pixel ruler, so that you can make measurements more accurately (that means less fiddling around with dimensions to get your scrollbar in the proper place). You can download a nice, free pixel ruler here.

The example blog image that will be used in this tutorial is the following, which is one of the blogs on Neo Nutters' premade blog page:

• STEP 2: The Code

Copy and paste the following code onto Notepad or some sort of text editor, or directly onto the website you plan to display the blog on:

<div align="center"><table border="0" cellpadding="0" cellspacing="0" width="NUMBER" height="NUMBER" background="URL"><TR><TD width="NUMBER" height="NUMBER" colspan="3"></TD></TR><TR><TD width="NUMBER" height="NUMBER"></TD><TD width="NUMBER" height="NUMBER"><div style="width: NUMBER; height: NUMBER; overflow: auto; font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color:COLOR; scrollbar-arrow-color:COLOR; scrollbar-track-color:COLOR; scrollbar-face-color:COLOR; scrollbar-highlight-color:COLOR; scrollbar-3dlight-color:COLOR; scrollbar-darkshadow-color:COLOR; scrollbar-shadow-color:COLOR;"><br><div style="padding: 5px;"> YOUR TEXT GOES HERE <br></div></div></TD><TD width="NUMBER" height="NUMBER"></TD></TR><TR><TD width="NUMBER" height="NUMBER" colspan="3"></TD></TR></table></div>

This is the code that we will be working with in this tutorial, and the process of coding a blog comprises simply of editing it.

• STEP 3: Editing the Background Image URL and Dimensions

What you're really doing when you code a blog is making a table the same size as your blog image and using the image you've created as a background for your table. Of course, it doesn't look much like a table because the cells don't have borders. If our example blog was fully coded and did have borders, its cells would look something like this (I've darkened the background image a bit so that you can see the lines more easily):

Keeping this in mind, think of your blog image as the background of a table.

Find the following section of the code that you just copied. . .

. . . And replace the part I've outlined in red with the width of your entire image, the part outlined in yellow with the height of your entire image, and the part outlined in blue with the URL of that image. You can find its dimensions (height and width) by right clicking on the picture and selecting "Properties" from the menu that appears.

• STEP 4: Editing the Dimensions of Table Cells

Your next step is to fill in the different dimensions of the cells of the table you're using to code your blog. Sound difficult? It isn't.

Take a look at the following diagram and the one below it; the first has all the quantities that you need to change outlined in various colors. The second shows which lengths and widths that the outlined numbers actually refer to.

If you're wondering how exactly you're supposed to accomplish the task of measuring the blog's dimensions, then this is where the pixel ruler comes in handy (see a bit above). It's really a choice between that and estimating the dimensions and changing them repeatedly until you get them perfect.

Only one more step until you're finished . . .

• STEP 5: Editing the Scroll Bar Colors

The last step of the process is to change the colors of the scrollbar to your liking. You can use either color names or hex codes; a list of hex codes is provided on this very site, at this link.

Here is something that may help you as well: it is a diagram showing which parts of the scrollbar each part of the code refers to ("scrollbar-area-color" is represented by "scrollbar area color" on the diagram, etc.).

• STEP 6: Testing and Using

You've finished coding your blog, but there is one more thing you need to do: test it to make sure everything lines up. There is a chance that your scrollbar will not be perfectly aligned with your box, even if you used a pixel ruler or something of the sort. This problem should be easily fixed by adjusting the cell dimensions you edited above until your blog looks to your liking.

Good luck!

Report an error

Change your site settings

Support a Cup team!