CharlieMC (charliemc) wrote,
CharlieMC
charliemc

  • Mood:

Creating a Table for Sharing Icons -- the HTML Code


More than one person has asked me how to create the code for sharing icons here at LiveJournal (or at other LJ-like blogs). I keep promising I'll explain how, but I haven't done that until now. (yikes)

To begin, yes -- I can write basic HTML code, which is what I'm sharing here. No. This won't do the code for you -- nor will it automatically create a table for you. You're going to have to do a lot of the work yourself. (Sorry.)

That said, if you've got a good software -- like NoteTab Lite (which happens to be free) -- then you can easily Copy the code below into it and do a 'search and replace' to change some of the code. (Yes. I highly recommend all versions of NoteTab -- perhaps the finest software I've ever used.) And sure, you can do this in many other text editors easily well, just for the record...

There's no way around it, though -- you'll have to enter each and every image address/URL with the 'cut and paste' method. But, hey, even if you can find a table generator, you still have to enter that info, anyway! (grin)

I'm going to show a sample of how the table code displays (including icons of my own). Then I'll show the code below that -- with some basic instructions for use.

Before you bother to ask, I use this two-icons-per-row version for a couple of reasons:
1) I usually always have an even amount of icons to share
2) This narrow table doesn't scroll off to the right forever and a day.
No. It's not that difficult to change it so you can display three (or four) icons per row -- but I'm not going to do it. So if you want something different, you'll need to adapt this code accordingly yourself. (Please don't waste YOUR time or mine by asking for different code.)


So! The table you'll create will look like this (with your icons in place of mine):

Your Name Here
Type of Icons
12
soup 1soup 2
34
soup 3soup 4
56
soup 5soup 6
78
soup 7soup 8
910
soup 9soup 10
1112
soup 11soup 12
1314
soup 13soup 14
1516
soup 15soup 163
1718
soup 17soup 18
1920
soup 19soup 20
  1. Highlight the code below.

  2. Copy and Paste it into your text editor.

  3. Save for future use -- or add this entry to your memories.

  4. Use a copy of the code to make appropriate changes for each batch of icons you post and share.

  5. You must manually cut and paste in the actual hosted location of each icon image.
IMPORTANT NOTES

REPLACE: http://pics.livejournal.com/your_username_here/xxx

You need to put the CORRECT address/URL of each of your icon images in the various spots below where you see this code. The numbering that appears in the Alt area should help you to keep track of where you are -- at least, it seems to help me when I use it! (grin)

Note: Obviously you must do this for each and every icon, no matter how many you're sharing.

You can see from this code that I actually use My Scrapbook (and make a Gallery) to host my icons right here at LiveJournal! (grin) But there are lots of free image hosts. I have my own list that you can check out:

Image Host - Links List

The layout below will display exactly as shown above when posted to LJ. I've written it this way -- with added white space -- to try and make it EASIER to locate each icon by (alt) number for cutting and pasting the image address/URL. (smile)

If you want to share less than 20 icons, simply remove the portion of the table you don't need. Just don't forget to leave </table> at the end!

If you're unfamiliar with HTML code, most tags have an opening and closing tag, such as:
<tr> (opens a TABLE ROW)
</tr> (closes a TABLE ROW)

You'll notice these all through the code below...

Actually, as you use this code (over and over), you might find yourself becoming more comfortable with HTML -- and that's a good thing!

Note: If you want a different BACKGROUND color (other than red), then simply change style="background-color:red" to the color you want. For example, if you want to use Cyan (a medium-to-light blue) you'd type: style="background-color:cyan"

Here are several colors (this is only a partial list) that only need the text name used.

HTML Colors - Text Version
Aliceblue
Antiquewhite
Aqua
Beige
Black
Blue
Blueviolet
Brown
Burlywood
Coral
Cornflowerblue
Crimson
Cyan
Deeppink
Deepskyblue
Gray
Green
Hotpink
Lavender
Lightblue
Lightpink
Lightyellow
Magenta
Maroon
Navy
Orange
Pink
Plum
Red
Seashell
Thistle
Tomato
White
Yellow

Here's the CODE:

<table border="1" cellpadding="4" cellspacing="4" width="208"><tr><td align="center" colspan="2" style="background-color:white"><b>Your Name</b><br>Type of Icons</td></tr>

<tr><td align="center" style="background-color:red">1</td><td align="center" style="background-color:red">2</td></tr>

<tr><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="1"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="2"></td></tr>

<tr><td align="center" style="background-color:red">3</td><td align="center" style="background-color:red">4</td></tr><tr>

<td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="3"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="4"></td></tr>

<tr><td align="center" style="background-color:red">5</td><td align="center" style="background-color:red">6</td></tr>

<tr><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="5"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="6"> </td></tr>

<tr><td align="center" style="background-color:red">7</td><td align="center" style="background-color:red">8</td></tr>

<tr><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="7"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="8"></td></tr>

<tr><td align="center" style="background-color:red">9</td><td align="center" style="background-color:red">10</td></tr>

<tr><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="9"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="10"></td></tr>

</td></tr><tr><td align="center" style="background-color:red">11</td><td align="center" style="background-color:red">12</td></tr>

<tr><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="11"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/xxx" alt="12"></td></tr><tr><td align="center" style="background-color:red">13</td><td align="center" style="background-color:red">14</td></tr><tr>

<td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/pic/xxx" alt="13"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/pic/xxx" alt="14"></td></tr>

<tr><td align="center" style="background-color:red">15</td><td align="center" style="background-color:red">16</td></tr>

<tr><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/pic/xxx" alt="15"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/pic/xxx" alt="16"> </td></tr>

<tr><td align="center" style="background-color:red">17</td><td align="center" style="background-color:red">18</td></tr>

<tr><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/pic/xxx" alt="17"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/pic/xxx" alt="18"></td></tr>

<tr><td align="center" style="background-color:red">19</td><td align="center" style="background-color:red">20</td></tr>

<tr><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/pic/xxx" alt="19"></td><td style="background-color:red"><img src="http://pics.livejournal.com/your_username_here/pic/xxx" alt="20"></td></tr>

</table>

If you're unfamiliar with gacking text, I'll mention that it's easy to do! Just click on the beginning (or end) and hold down the mouse button while you scroll down (or up). Then right-click and Copy. Go to your text editor. Right-click and Paste. That's all there is to it!

I hope you find this code useful! If you do, I'd love to hear about it, so take time to comment, please. (Thanks.)

It's not as easy as a Table Generator, granted -- but it's here and it works!

Good luck using it -- and sharing your icons!
Tags: 2007, january-2007
Subscribe

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 2 comments