Figmint designs goodly designs for the average tasteful chap

Make a Shop Blog

In this tutorial you'll learn how to create a blog like the shop blogs available on neopets, except these will actually work.

Every blog is composed of an image with a space for text, and the box of text itself. The first step is to create the blog image.

Create a document in your art program. Make the dimensions (width and height) what you want the dimensions of your blog image to be. Good sizes are 300x300 or 400x150 pixels. And remember when I say that, the first number is the width, and the second is the height.

I've opened my document, and here's what I have.

Now I'm going to make it look all spiffy. Then, using a shape tool I'll make a box where the text will go. My box is white, but I turned its opacity (its solidness) down so it's transparent.

When you're happy with your image, save it as a gif, jpeg (same as jpg) or png. Pngs are good because they won't lose quality when you save it, but they take a bit longer to load. I've saved mine as a png.

Now the image needs to be uploaded to the internet. Some good free websites that will host your images are Imageshack, Tinypic, and Photobucket. I'm going to use Imageshack, because tinypic seems to be in German today. O:

At imageshack, I click browse and then choose my file (blog.png). Then I click upload, and the image is now on the internet!

We're going to use the direct link to the image.

Now we'll code the blog.

Create a table and give it the width and height of your image.

<table width=400 px height=300 px>

Your code will look exactly the same, except instead of 400 and 300 put the values of your image.
Now we'll give the table a background image. The background image is the image you just uploaded. Copy the "direct link" and paste it instead of url in the code below. "Border =0" at the end just specifies that the image shouldn't have a border.

<table width=400 px height=300 px background=url border=0>

My code now looks like this.

<table width=400 px height=300 px background=http://img153.imageshack.us/img153/9523/blog.png border=0>

Next we add a bit more code. This will make it so the text isn't floating around wherever it wants. It will make the text stick at the top, so then we can position the text box based on that. Add this to the end of what you have so far:

<tr><td valign=top>

Now we'll position the text box. Paste this code in.

<div style="top:Xpx; left:Xpx; width: Xpx; height: Xpx; overflow: auto; position:relative;">

Replace all the X's with values. We're positioning it from the top left corner of the image. This means when it says "top:Xpx;" you should replace the X with the number of pixels between the top of the textbox and the top of the image. "leftXpx;" should say the number of pixels from the left side of the image to the left edge of the textbox, and the width and height values are the width and height of the textspace.

Here's my blog with the measurements written in along with its code.

<table width=400 px height=300 px background=http://img153.imageshack.us/img153/9523/blog.png border=0><tr><td valign=top><div style="top:130px; left:168px; width: 221px; height: 159px; overflow: auto; position:relative;">

Almost finished! Now we're at the part where you put your text. Add some filler text to the end for now and you can edit it later.

Finally, we need to close everything we started. We created a table, table row, table data box, and a div, so we need to close them all in reverse order using this code:

</div></td></tr></table>

<table width=400 px height=300 px background=http://img153.imageshack.us/img153/9523/blog.png border=0><tr><td valign=top><div style="top:130px; left:168px; width: 221px; height: 159px; overflow: auto; position:relative;"> Welcome to my shop! Please buy lots of stuff! I want to be rich and get a paintbrush or something. Yay, spend all your money...Hope I'm helpful...Blah. </div></td></tr></table>

You can see I need to adjust the numbers I put in for the length/width/top/left so it fits a bit better, and with some simple HTML I can make the font something more desirable. This will do the trick:

<font color="black" size="1">Text here</font>

After the adjustments are in place, the blog is finished!

Latest News:

ChatBox

Partners

Affiliates

Links

Change Skins