Important
Attention all site visitors! Please remember that we are a free linkware site! Do not pay scammers for what we want to give you for free.

Quick Links
Home
Neopets Home
Donate Neopoints
Site Related
About
Contact Us
FAQ
Credits
Link to Us
Terms of Use
Affiliates

Apply
How To Code A Shop Blog

Introduction
So you want to learn how to code your own shop blog. In this tutorial, we'll be demonstrating how to code your shop blog using HTML tables. But, first off, you're going to need somewhere to save your code. You can use Notepad, Frontpage, Dream Weaver or your website's online editor (if you have one). We're going to be using notepad. Secondly, you're going to need your blog image. We'll be using this image:



Ready? Let's begin the tutorial.

Step 1
The first thing you should do is is decide how you're going to divide up your image. You need to divide it up because we're using a table and in order to code for the text area, you have to code the areas surrounding it as well. For now, this is how we're dividing our image:



Please note the following about the borders for our example:
  The border above area 2, 3 and 4 and below area 1 are part of area 1.
  The border below area 2, 3 and 4 and above area 5 are part of area 5.
  The border between area 2 and 3 are part of area 2.
  The border between area 3 and 4 are part of area 4.
This means that NONE of the borders fall within area 3 which is our text area.

Step 2
Now that we've divided up the areas, we're almost ready to start coding. However, you will need the dimensions of each area (width x height) in pixels. You can choose to figure this out before or during your coding, it doesn't really matter. Here are the dimensions for our areas:



Step 3
Ok, let's start the coding. First off you will need to put in the start and end table tags. For our shop blog, we want to specify:
  • Image width (width="###")
  • Image height (height="###")
  • No cellspacing (cellspacing="0")
  • No cellpadding (cellpadding="0")
  • No borders (border="0")
  • Set our image as background (background="http://linktoimage/image.gif")
We do this with the following code:

<table width="300" height="200" cellspacing="0" cellpadding="0" border="0" 
background="http://linktoimage/image.gif">

</table>

You will need to replace:
  • The width with the width of your blog image.
  • The height with the height of your blog image.
  • The background link to the link of your blog image.
Step 4
Now, we will be coding the individual areas. Something you need to understand now is that tables work in rows and columns. Horizontal = rows. Vertical = columns. Here is our image with the row numbers and column numbers to help you understand.



When creating a table, we read from top to bottom from left to right. This means that when we code our example, we will code area 1 because it's at the top, then area 2 because it's on the next line and the one on the very left, then area 3 because it follows area 2 etc. This is why we needed to define the areas to start with, each area is a td - /td.

First off, we will code area 1. Here is the information we will need for it.
  • In a new row. (tr)
  • It's width is 300 pixels. (width="300")
  • It's height is 65 pixels. (height="65")
  • It spans (goes across) the 3 columns of the next table row. (colspan="3")
  • It's the only column in the row. (/tr) 
	<tr>
		<td width="300" height="65" colspan="3"></td>
	</tr>

Now for area 2. Area 2's information:
  • In a new row. (tr)
  • It's width is 83 pixels. (width="83")
  • It's height is 99 pixels. (height="99") 
	<tr>
		<td width="83" height="99"></td>

Area 3's information:
  • Follows on from area 2.
  • It's width is 198 pixels. (width="198")
  • It's height is 99 pixels. (height="99") 
		<td width="198" height="99"></td>

Area 4's information:
  • Follows on from area 3.
  • It's width is 19 pixels. (width="19")
  • It's height is 99 pixels. (height="99")
  • It is the last column in the row. (/tr) 
		<td width="19" height="99"></td>
	</tr>

Area 5's information:
  • In a new row. (tr)
  • It's width is 300 pixels. (width="300")
  • It's height is 36 pixels. (height="36")
  • It spans the 3 columns of row 2. (colspan="3")
  • It is the only column in the row. (/tr) 
	<tr>
		<td width="300" height="36" colspan="3"></td>
	</tr>

Step 5
Now that we have coded the individual areas, it's time to put them together in the table so our code becomes:

<table width="300" height="200" cellspacing="0" cellpadding="0" border="0" 
background="http://linktoimage/image.gif">
	<tr>
		<td width="300" height="65" colspan="3"></td>
	</tr>
	<tr>
		<td width="83" height="99"></td>
		<td width="198" height="99"></td>
		<td width="19" height="99"></td>
	</tr>
	<tr>
		<td width="300" height="36" colspan="3"></td>
	</tr>
</table>

This is all that's needed to put the blog image in the right place awaiting your text.

Step 6
Now you need just one more code to complete your shop blog. This code is to:
  • Specify the width of the text area. (width: ###px;)
  • Specify the height of the text area. (height: ###px;)
  • Prevent the text from getting out of the text area and to make it scroll if the text takes up more space than the area assigned. (overflow: auto;) 
<div style="width: 198px; height: 99px; overflow: auto">
	Your blog text goes here.
</div>

Step 7
Your blog is practically complete. Just put your code from step 6 into the final table from step 5 like this:

<table width="300" height="200" cellspacing="0" cellpadding="0" border="0" 
background="http://linktoimage/image.gif">
	<tr>
		<td width="300" height="65" colspan="3"></td>
	</tr>
	<tr>
		<td width="83" height="99"></td>
		<td width="198" height="99"><div style="width: 198px; 
height: 99px; overflow: auto">

			Your blog text goes here.

		</div></td>
		<td width="19" height="99"></td>
	</tr>
	<tr>
		<td width="300" height="36" colspan="3"></td>
	</tr>
</table>

Important: Make sure you put it into the area which corresponds to your blog image's text area.

You've Completed The Tutorial

That's it!

The end of the tutorial and hopefully a finished blog. Although I've called this a shop blog tutorial, it can actually be applied in many situations i.e. coding a guild layout.

Thanks for reading, and if this tutorial has helped you out, please put a link back to us. It'll be much appreciated.

- Temiko


NST
Tutorials
Coding Shop Blogs
Graphics
Neopets Pet pages
Neopets User Lookups
HTML Tools
Link Generator
CSS Tools
Main Site CSS Generator
User Lookup CSS
Other Neopets Tools
Shop Cost Calculator
W.O.Mono Time Calc
© Copyright Temiko.net 2009-2010 | Terms and Conditions
Neopets © Copyright 2000-2010 Neopets, Inc. All Rights Reserved. Used With Permission
All copyrighted content is property of it's respective owners. All rights reserved.