Making section thumbnails using a simple HTML table is not very hard but it does take some time to get all the links you need. This tutorial includes the code you need as well as where to find all the links you will need to use it. here is an example of how it will look:
| 1 |
open notepad (word or another program you can type words and edit them) |
|
| 2 |
copy and paste the following code into your notepad |
|
| |
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td><a href="url your linking to"><img src="url of image"></a></td>
<td><a href="url your linking to"><img src="url of image"></a></td>
<td><a href="url your linking to"><img src="url of image"></a></td>
</tr>
<tr>
<td><a href="url your linking to"><img src="url of image"></a></td>
<td><a href="url your linking to"><img src="url of image"></a></td>
<td><a href="url your linking to"><img src="url of image"></a></td>
</tr></table> |
|
| 3 |
this is your basic table code. and this is how to read it...
everything between <tr> & </tr> will appear in a row across
everything between <td> & </td> is 1 column in the row
so the code above is 2 rows of 3 boxes, if you wish to add 4th column across just copy and paste an extra <td> line between the sets of <tr>
to add another row just copy from one <tr> through the </tr> and paste it below the last </tr> before the </table>
|
|
| 4 |
To make the table display what you want just replace the italics words with what they are asking for. if you are hosting your own images (for the category) then you will use the url where you uploaded the image, if for a design you may choose any product image, then right click it and either say "copy image location" or go to properties and get the url for the image. |
|
| 5 |
copy the code into the basic information or product description area***
NOT IN THE BETA YOU DO NOT NEED TO ENABLE BETA TO DO THIS
see images below
|
|
| **** |
Special note all the enters that are applied in notepad will appear above the table pushing your table down, but there are 2 simple ways to fix that: |
|
| |
1 - you can go to the end of each line in notepad and hit the delete button so it all appear on 1 line |
|
| |
2 - paste the code into a product line description area and click save, then click edit again and reopen the product description and click save again and it will auto remove all extra spaces.
(for the basic info/home page one you can paste it into a product line area then save it then reopen and cut it from there to remove and then go and paste it without the hard enters into the basic area) |
|
| |
For the home page |
|
| |
|
| |
|
|
| |
for the product lines |
|
| |
|
| |
|
|
| |
|
|
| |
| |
|
|
| |
|
|
| |
|
|
| |
|
|
