Ten Sophisticated Auction Templates
| The code for all 10 of these auction templates can be found on the CD that accompanies this book. Each template is located in the Starter Kit Templates folder, as are the graphics files necessary to present the templates as you see them here. You'll need to copy the graphics files from the CD to your computer's hard disk, and then upload the files to an external server or photo hosting service before you post the listing to eBay. Naturally, you should edit the URLs in the HTML code to reference the uploaded locations of each of the files. Template 10.1. Colorful Borders and Background This template uses nested tables to create a very colorful multi-layer border. The outside border is a pulsating blue, with a pulsating red in the middle, and a pulsating gold as the background for the description. It's a very neat effect, quite different than what you find in a typical eBay listing. Figure 10.1. A colorful template with nested borders. The auction code itself is relatively simple, with space for two photos; the first photo can be as large as you want, the second photo is limited to a width of 150 pixels. In the code, replace the filenames for the background images (bluestripbackground.jpg, redstripbackground.jpg, and goldstripbackground.jpg) with the full URLs and filenames after you've uploaded the files to your own photo hosting server. <table width="80%" border="0" cellpadding="40" cellspacing="0" align="center" background="bluestripbackground.jpg"> <tr> <td> <table width="95%" border="0" cellpadding="40" cellspacing="0" align="center" background="redstripbackground.jpg"> <tr> <td> <table width="95%" border="0" cellpadding="20" cellspacing="0" align="center" background="goldstripbackground.jpg"> <tr> <td align="center"> <h1 style="font-family: Times Roman; font-size: 36pt; font-weight: bold"> Auction Title </h1> <p><img src="PICTURE1"></p> <p style="text-align: center; font-size: 14 pt; font-family: Times Roman; font-weight: bold; text-align: center; color: darkblue"> This is the text for your auction's overview paragraph. This paragraph should be no more than 2-3 sentences long. </p> <p><img src="PICTURE2" width="150px"></p> <p style="text-align: left; font-size: 12pt; font-family: Times Roman"> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <p style="text-align: left; font-size: 12pt; font-family: Times Roman"> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> </td> </tr> <tr> <td align="center"> <table width="75%" cellpadding="5"> <tr> <td colspan="2"> <p style="font-family: Times Roman; font-size: 14 pt; font-weight: bold; color: darkblue; text-align: center"> Payment and Shipping Details </p> </td> </tr> <tr> <td bgcolor="blue" width="25%" valign="top"> <p style="font-family: Times Roman; font-size: 10 pt; font-weight: bold; text-align: right; color: white"> Payment </p> </td> <td bgcolor="darkblue" width="75%" valign="top"> <p style="font-family: Times Roman; font-size: 10 pt; text-align: left; color: white"> I accept credit cards via PayPal, money orders, cashier's checks, and personal checks. Personal checks will delay shipment for ten business days. </p> </td> </tr> <tr> <td bgcolor="blue" width="25%" valign="top"> <p style="font-family: Times Roman; font-size: 10 pt; font-weight: bold; text-align: right; color: white"> Shipping </p> </td> <td bgcolor="darkblue" width="75%" valign="top"> <p style="font-family: Times Roman; font-size: 10 pt; text-align: left; color: white"> I ship via USPS Priority Mail. Shipping/handling charge to any location in the continental United States is $6.00. Email me for shipping/handling outside the U.S. </p> </td> </tr> <tr> <td bgcolor="blue" width="25%" valign="top"> <p style="font-family: Times Roman; font-size: 10 pt; font-weight: bold; text-align: right; color: white"> Returns </p> </td> <td bgcolor="darkblue" width="75%" valign="top"> <p style="font-family: Times Roman; font-size: 10 pt; text-align: left; color: white"> All sales are guaranteed for 30 days after receipt. Please contact me if not satisfied. Buyer is responsible for return postage. </p> </td> </tr> </table> <p style="font-family: Times Roman; font-size: 12pt; font-weight: bold; text-align: center"> <a href="http://search.ebay.com/_W0QQsassZ[USERID]QQhtZ-1"> Click here to view my other auctions </a> </p> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> Template 10.2. Bullets and Pictures This template is ideal for any item where you need to present a lot of detailed features. The features are presented in a bulleted list in the right column, with the terms of sale at the bottom of that column. The wider left column includes the title and descriptive text, as well as a click-to-enlarge picture gallery. Visual interest is accomplished via the wide color border and the graphic banner at the top of the listing. The click-to-enlarge picture gallery accommodates four pictures; you'll need to create both regular-sized and thumbnail versions of all your photos, and replace the URL-BIG and URL-SMALL text with the appropriate URLs and filenames. Also remember to replace [USERID] in the "other auctions" code with your own eBay ID. Make sure to copy the greenbanner.jpg file to your own photo host, and change the <img> reference to the new URL and filename. <table width="100%" cellpadding=40 cellspacing=0 border=1 bgcolor="darkgreen"> <tr> <td width="100%"> <table width=100% cellpadding=5 cellspacing=0 border=1 bgcolor="white"> <tr> <td colspan="2"> <img src="/books/2/949/1/html/2/greenbanner.jpg" width="100%"> </td> </tr> <tr> <td width="70%" valign="top" > <p style="font-family: Arial; font-size: 36pt; font-weight: bold; color: darkgreen; text-align: center"> Auction Title </p> <p style="font-family: Arial; font-size: 18pt; font-weight: bold; color: black; text-align: center"> Auction Subtitle </p> <p style="font-family: Arial; text-align: left"> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <p style="font-family: Arial; text-align: left"> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <table align="center" cellspacing="20" height="500"> <tr> <td> <center> <img src="URL1-BIG" height="400" border="0" alt name="the_pic"><br> <a href="#"; onClick="document.the_pic.src='URL1-BIG';return false;"> <img src="/books/2/949/1/html/2/URL1-SMALL" border="0"></a> <a href="#"; onClick="document.the_pic.src= 'URL2-BIG';return false;"> <img src="URL2-SMALL" border="0"></a> <a href="#"; onClick="document.the_pic.src= 'URL3-BIG';return false;"> <img src="URL3-SMALL" border="0"></a> <a href="#"; onClick="document.the_pic.src= 'URL4-BIG';return false;"> <img src="URL4-SMALL" border="0"></a> </center> <p style="text-align: center; font-family: Arial; font-weight: bold; color: darkgreen; font-size: 10pt"> Click on thumbnails to enlarge </p> </td> </tr> </table> </td> <td bgcolor="#DDDDDD" width="30%" valign="top"> <p style="font-family: Arial; font-size: 14pt; font-weight: bold; color: darkgreen"> This item includes: </p> <ul style="font-family: Arial; font-size: 10pt"> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> <li style="margin-bottom: 10pt">Bullet point</li> </ul> <hr> <p style="font-family: Arial; font-size: 10 pt"> <strong>Terms of Sale</strong><br> I accept credit cards via PayPal, cashier's checks, money orders, and personal checks. (Personal checks will delay shipment for ten working days.) Will ship via USPS Priority Mail. Actual shipping charges calculated at end of auction. Insurance optional, extra. </p> <hr> <p style="font-weight: bold; font-family: Arial"> <a href="http://search.ebay.com/_W0QQsassZ[USERID]QQhtZ-1"> Click here to view my other auctions </a> </p> </td> </tr> </table> </table> Figure 10.2. A template with right-column bullets, click-to-enlarge picture gallery, and graphic banner. Template 10.3. Banners and Backgrounds This is a nice-looking template for when you have a single photo to present. It uses color-coordinated top and bottom banners and puts the main text against a similar color background. A white background is used behind the title (which is in the darker color) and the terms of service. Notice also the graphic links to your other auctions and About Me page. This is relatively simple code. We start with the top banner (flush left, since it fades to white on the right), followed by centered title and subtitle in the banner color. Then it's a two-column table with background the same color as the banner and title text. After the table are the other auctions and About Me graphic links, followed by the short bottom banner, centered on the page. Remember to replace [USERID] and USERID with your eBay User ID. In addition, make sure you upload the tealbanner.jpg, tealbottom.jpg, aboutmegraphic.jpg, and auctiongraphic.jpg graphics files to your picture host, and insert the full URLs of their new locations. <img src="/books/2/949/1/html/2/tealbanner.jpg" width=95% > <p style="font-size: 36pt; font-weight: bold; color: teal; text-align: center"> Auction Title </p> <p style="font-size: 18pt; font-weight: bold; color: teal; text-align: center"> Auction Subtitle </p> <table bgcolor="teal" cellpadding="10"> <tr> <td width="300"> <img src="URL" width="300"> </td> <td valign="top"> <p style="font-size: 14pt; font-weight: bold; color: white; text-align: left"> This is the overview paragraph. It should be relatively short, no more than 2-3 sentences long. </p> <p style="font-size: 12pt; color: white; text-align: left"> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <p style="font-size: 12pt; color: white; text-align: left"> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> </td> </tr> </table> <p style="font-size: 10pt; color: darkblue; text-align: center; font-weight: bold"> Sold as-is. Shipment via USPS Media Mail. I accept PayPal, cashier's check, money order, or personal check. </p> <center> <p> <a href="http://search.ebay.com/_W0QQsassZ[USERID]QQhtZ-1"> <img src="/books/2/949/1/html/2/auctiongraphic.jpg" border="0"> </a> <a href="http://cgi3.ebay.com/ws/ eBayISAPI.dll?ViewUserPage&userid=USERID"> <img src="/books/2/949/1/html/2/aboutmegraphic.jpg" border="0"> </a> </p> <img src="/books/2/949/1/html/2/tealbottom.jpg" width="95%" > </center> Figure 10.3. A listing with color-coordinated banners and backgrounds. Template 10.4. Picture Column Here's a nice-looking template for when you have a lot of product photos. All the photos are aligned vertically in the right column. The main text appears in the wide center column, and the photos are balanced by a vertical graphic image in the narrow left column. Each picture is a click-to-enlarge link, and the Terms of Sale goes in the bottom of the center column, under a graphic horizontal rule. Figure 10.4. A template with a vertical column of small click-to-enlarge pictures. As written, this code allows for five pictures in the right column. You can include additional photos by inserting more <a href> and <img> tags at the end of the list, or use fewer photos by deleting a line or two. Remember to replace all the URL1, URL2, and similar codes with the full URLs of your photos; you only have to link to large photos, as the code resizes the photos to a width of 100 pixels to fit within the narrow column. In addition, make sure you upload the redside.jpg graphics file to your picture host, and insert the full URL of its new location. <table bgcolor="#FFFFCC" cellpadding="10" width="765" align="center"> <tr> <td width="65" background="redside.jpg"> </td> <td width="600" valign="top"> <p style="font-size: 36pt; font-weight: bold; text-align: left; color: darkred; margin-bottom: 0"> Auction Title </p> <p style="font-size: 24pt; font-weight: bold; text-align: left; color: red; margin-top: 0"> Auction Subtitle </p> <p style="font-size: 12pt; text-align: left"> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <ul style="font-size: 12pt"> <li>Bullet text</li> <li>Bullet text</li> <li>Bullet text</li> <li>Bullet text</li> </ul> <p style="font-size: 12pt; text-align: left"> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <hr color="darkred" width="200" size="8"> <p style="font-size: 10pt; text-align: left; color: darkred"> <strong>Terms of Sale</strong><br> I accept credit cards via PayPal, cashier's checks, money orders, and personal checks. (Personal checks will delay shipment for ten working days.) Will ship via USPS Priority Mail. Actual shipping charges calculated at end of auction. Insurance optional, extra. </p> <p style="font-size: 12 pt; font-weight: bold"> <a href="http://search.ebay.com/ _W0QQsassZ[USERID]QQhtZ-1"> Click here to view my other auctions </a> </p> </td> <td width="100" valign="top"> <p><a href="URL1" target="_blank"> <img src="URL1" width="100"></a></p> <p><a href="URL2" target="_blank"> <img src="URL2" width="100"></a></p> <p><a href="URL3" target="_blank"> <img src="URL3" width="100"></a></p> <p><a href="URL4" target="_blank"> <img src="URL4" width="100"></a></p> <p><a href="URL5" target="_blank"> <img src="URL5" width="100"></a></p> <p style="font-size: 10pt; font-weight: bold; color: red"> Click any picture to enlarge </p> </td> </tr> </table> Template 10.5. Section Headings This is one of my favorite templates. It incorporates a single-column design for the title and description area, and a two-column design for the terms of service. Each major section features a heading with white text against a teal backgroundalthough you can change the color, of course. Figure 10.5. Individual sections separated by reverse header text. Template 10.5 is based on a simple two-column grid. Several of the rows span two columns (thanks to the colspan="2" attribute), but the underlying two-column grid is clearly visible in any case. This template allows for two click-to-enlarge pictures, specified at 250 pixels high each; replace URL1 and URL2 with the individual file URLs. <table width="80%" border="0" align="center" cellpadding="10" cellspacing="20"> <tr> <td> <table border="0" cellpadding="0" cellspacing="20" width=100%> <tr> <td bgcolor="teal" colspan="2"> <p style="font-family: Verdana; font-size: 18pt; text-align: left; color: white; margin-top: 0; margin-bottom: 0; margin-left: 5"> <strong>Auction Title</strong><br> Auction Subtitle </p> </td> </tr> <tr> <td colspan="2" align="center"> <a href="URL1" target="_blank"> <img src="URL1" height="250"> </a>     <a href="URL2" target="_blank"> <img src="URL2" height="250"> </a> </td> </tr> <tr> <td bgcolor="teal" colspan="2"> <p style="font-family: Verdana; font-size: 14pt; text-align: left; color: white; margin-top: 0; margin-bottom: 0; margin-left: 5"> Item Details </p> </td> </tr> <tr> <td colspan="2"> <p style="font-family: Verdana; font-size: 10pt; text-align: left; color: black"> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> </td> </tr> <tr> <td colspan="2"> <p style="font-family: Verdana; font-size: 10pt; text-align: left; color: black"> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> </td> </tr> <tr> <td bgcolor="teal" width="50%"> <p style="font-family: Verdana; font-size: 14pt; text-align: left; color: white; margin-top: 0; margin-bottom: 0; margin-left: 5"> Payment </p> </td> <td bgcolor="teal" width="50%"> <p style="font-family: Verdana; font-size: 14pt; text-align: left; color: white; margin-top: 0; margin-bottom: 0; margin-left: 5"> Shipping </p> </td> </tr> <tr> <td width="50%" valign="top"> <p style="font-family: Verdana; font-size: 10pt; text-align: left; color: teal; margin-top: 0"> I accept credit cards via PayPal, money orders, cashier's checks, and personal checks. Personal checks will delay shipment for ten business days. </p> </td> <td width="50%" valign="top"> <p style="font-family: Verdana; font-size: 10pt; text-align: left; color: teal; margin-top: 0"> I ship via USPS Priority Mail. Shipping/handling charge to any location in the continental United States is $6.00. Email me for shipping/handling outside the U.S. </p> </td> </tr> <tr> <td colspan="2" align="center"> <p style="font-family: Verdana; font-size: 12; font-weight: bold; text-align: center"> <a href="http://search.ebay.com/ _W0QQsassZ[USERID]QQhtZ-1"> Click here to view my other auctions </a> </p> </td> </tr> </td> </tr> </table> </td> </tr> </table> Template 10.6. Three-Column with Block Sections This template uses a modified three-column grid, each column sized at 225 pixels. The first column holds two click-to-enlarge photos, stacked vertically; the second and third columns are spanned to hold the title and descriptive text. Payment, shipping, and returns info are presented in three single-column blocks at the bottom of the listing. Figure 10.6. Block sections with a modified two-column structure. What I like about this template is how the TOS info is presented in three horizontal blocks at the bottom of the listing. The blocks are created from table cells with a dark red background with wide white borders; the text is white reversed against the dark background. <table width="870" bgcolor="white" cellspacing="20" cellpadding="2"> <tr> <td width="225" valign="top"> <p align="left"> <a href="URL1" target="_blank"> <img src="URL1" width="225"> </a> </p> <p align="left"> <a href="URL2" target="_blank"> <img src="URL2" width="225"> </a> </p> </td> <td valign="top" colspan="2"> <p style="font-size: 24pt; font-family: Arial; font-weight: bold; color: darkblue; text-align: left"> Auction Title </p> <p style="font-size: 14pt; font-family: Arial; color: blue; text-align: left"> This is the text for your auction's overview paragraph. This paragraph should be no more than 2-3 sentences long. </p> <p style="font-size: 10pt; font-family: Arial; text-align: left; text-color: black"> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <ul style="font-family: Arial; font-size: 10pt; color: blue"> <li>Bullet point text</li> <li>Bullet point text</li> <li>Bullet point text</li> <li>Bullet point text</li> </ul> <p style="font-size: 10pt; font-family: Arial; text-align: left; text-color: black"> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> </td> </tr> <tr> <td width="225" valign="top" bgcolor="darkblue"> <p style="font-size: 10pt; font-family: Arial; font-weight: bold; text-align: center; color: white; margin-bottom: 0; margin-top: 2; margin-left: 2; margin-right: 2"> Payment </p> <p style="font-size: 8pt; font-family: Arial; text-align: center; color: white; margin-top: 0; margin-left: 2; margin-right: 2; margin-bottom: 2"> I accept credit cards via PayPal, money orders, cashier's checks, and personal checks. Personal checks will delay shipment for ten business days. </p> </td> <td width="225" valign="top" bgcolor="darkblue"> <p style="font-size: 10pt; font-family: Arial; font-weight: bold; text-align: center; color: white; margin-bottom: 0; margin-top: 2; margin-left: 2; margin-right: 2"> Shipping </p> <p style="font-size: 8pt; font-family: Arial; text-align: center; color: white; margin-top: 0; margin-bottom: 2; margin-left: 2; margin-right: 2"> I ship via USPS Priority Mail. Shipping/handling charge to any location in the continental United States is $6.00. Email me for shipping/handling outside the U.S. </p> </td> <td width="225" valign="top" bgcolor="darkblue"> <p style="font-size: 10pt; font-family: Arial; font-weight: bold; text-align: center; color: white; margin-bottom: 0; margin-top: 2; margin-left: 2; margin-right: 2"> Returns </p> <p style="font-size: 8pt; font-family: Arial; text-align: center; color: white; margin-top: 0; margin-bottom: 2; margin-left: 2; margin-right: 2"> All sales are guaranteed for 30 days after receipt. Please contact me if not satisfied. Buyer is responsible for return postage. </p> </td> </tr> <tr> <td colspan="3"> <p style="font-size: 8pt; font-family: Arial; font-weight: bold; text-align: center; color: darkred"> <a href="http://search.ebay.com/ _W0QQsassZ[USERID]QQhtZ-1"> Click here to view my other auctions </a>       <a href=" http://cgi3.ebay.com/ws/ eBayISAPI.dll?ViewUserPage&userid=USERID"> Click here to view my About Me page </a> </p> </td> </tr> </table> Template 10.7. Table Details and Picture Show Here's a template that's ideal when you're selling items with a lot of important specifications, such as consumer electronics equipment, digital cameras, and clothing. The specs are presented in tabular form, for easy scanning by potential buyers. In addition to the table-within-a-table, this template features a manual-advance picture slideshow. This code is spec'd for four product pictures, but you can edit the code if you have more or fewer photos to display. There's also a "Check out my other auctions" drop-down menu at the bottom; be sure to customize the code with your own auction names and numbers. <table style="border-style: ridge; border-width: 5pt; border-color: cyan; background-color: #CCFFCC" align="center" width="600" cellpadding="5"> <tr> <td> <p style="font-family: Verdana; font-size: 24pt; font-weight: bold; text-align: center; color: teal"> Auction Title </p> <p style="font-family: Verdana; font-size: 18pt; text-align: center; color: teal"> Auction Subtitle </p> <!--BEGINNING OF SLIDESHOW CODE--> <script language="JavaScript"> <!--start var x = 0; function rotate(num){ x=num%document.slideForm.slide.length; if(x<0){x=document.slideForm.slide.length-1}; document.images.show.src= document.slideForm.slide.options[x].value; document.slideForm.slide.selectedIndex=x; } function apRotate() { if(document.slideForm.slidebutton.value == "Stop"){ rotate(++x);window.setTimeout("apRotate()", 5000);} } //end --> </script> <form name="slideForm"> <table cellspacing=1 cellpadding=4 style="border: 1px teal solid; border-collapse: collapse" align="center"> <tr> <td align="center"> <strong><font face="Verdana" size="3" color="teal"> Product Photos </font></strong> </td> </tr> <tr> <td align=center width=400 height=400> <img src="URL1" name="show"> </td> </tr> <tr> <td align=center style="border:1px teal solid;"> <select name="slide" onChange="rotate(this.selectedIndex);"> <option value="URL1" selected>Photo 1 <option value="URL2">Photo 2 <option value="URL3">Photo 3 <option value="URL4">Photo 4 </select> </td> </tr> <tr> <td align=center style="border:1px teal solid;"> <input type=button onclick="rotate(0);" value="ll<<" title="Jump to beginning" style="border:1px black solid;"> <input type=button onclick="rotate(x-1);" value="<<" title="Last Picture" style="border:1px black solid;"> <input type=button name="slidebutton" onClick="this.value= ((this.value=='Stop')?'Start':'Stop');apRotate();" value="Start" title="Autoplay" style="width:75px; border:1px black solid;"> <input type=button onclick="rotate(x+1);" value=">>" title="Next Picture" style="border:1px black solid;"> <input type=button onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" style="border:1px black solid;"> </td> </tr> </table> </form> <!--END OF SLIDESHOW CODE--> <p style="font-family: Verdana; font-size: 12pt; color: black; text-align: left"> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <p style="font-family: Verdana; font-size: 12pt; color: black; text-align: left"> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <table width="75%" bordercolor="CCFFCC" cellspacing="5" cellpadding="5" align="center"> <tr> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left; font-weight: bold"> Manufacturer </p> </td> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left"> Panasonic </p> </td> </tr> <tr> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left; font-weight: bold"> Model number </p> </td> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left"> SA400X </p> </td> </tr> <tr> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left; font-weight: bold"> Dimensions </p> </td> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left"> 12" x 6" x 18" </p> </td> </tr> <tr> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left; font-weight: bold"> Weight </p> </td> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left"> 12.5 lbs. </p> </td> </tr> <tr> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left; font-weight: bold"> Model year </p> </td> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left"> 2003 </p> </td> </tr> <tr> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left; font-weight: bold"> Accessories </p> </td> <td width="50%" bgcolor="teal" valign="top"> <p style="font-family: Verdana; font-size: 10pt; color: white; text-align: left"> Remote control, connection cable, infrared receiver, instruction booklet, software CD </p> </td> </tr> </table> <p style="font-family: Verdana; font-size: 10pt; color: teal; text-align: center; margin-left: 150; margin-right: 150"> <span style="font-weight: bold">Terms of Sale</span> <br> Sold as-is. Shipment via USPS Media Mail. I accept PayPal, cashier's check, money order, or personal check. </p> <center> <p style="font-family: Verdana; font-size: 10pt; font-weight: bold; color: black"> Check out my other auctions! </p> <form> <select name="URL" onChange="if(options[selectedIndex].value) window.location.href= (options[selectedIndex].value)"> <OPTION value="">My Other Auctions</OPTION> <OPTION value=http://cgi.ebay.com/ws/ eBayISAPI.dll?ViewItem&item=ITEMNUMBER1> Auction name</OPTION> <OPTION value=http://cgi.ebay.com/ws/ eBayISAPI.dll?ViewItem&item=ITEMNUMBER2> Auction name</OPTION> <OPTION value=http://cgi.ebay.com/ws/ eBayISAPI.dll?ViewItem&item=ITEMNUMBER3> Auction name</OPTION> <OPTION value=http://cgi.ebay.com/ws/ eBayISAPI.dll?ViewItem&item=ITEMNUMBER4> Auction name</OPTION> </select> <noscript> <input type=submit value="Go"> </noscript> </input> </form> </center> </td> </tr> </table> Figure 10.7. A template with a manual-advance slideshow and product spec table. Template 10.8. Scrolling Pictures and Text This is one scrolling, scrolling, scrolling template. We start with the item overview in a scrolling text marquee, and then continue with a scrolling slideshow of product photos. It makes for a very dynamic item listing! The raised border effect for this template is created with nested tables; the outside table has an outset border, while the inside table has an inset border. The slideshow is set for four pictures, although you can add more. Remember to replace URL1, URL2, and so on with the full URLs of your image files. Note The code for the scrolling slideshow only works for photos stored on an external server on the Internet. If you try to use it with picture files stored on your hard disk, the photos will not display.
Figure 10.8. Template with a scrolling slideshow and text marquee. Template 10.9. Image Border What makes this template unique is that it puts an image border around the entire listing. The border is actually made up of four separate images, one each for the top, bottom, left, and right sides. Figure 10.9. A template with images around all the borders. The border images are enclosed within individual table cells. This requires the creation of a table with three rows and three columns, with the left and right columns sized to fit the thin border images. The top and bottom cells span all three columns, since the top and bottom images are sized to the full listing width (600 pixels). This template also features two click-to-enlarge pictures, displayed in-line with the description text. You should upload the roundtop.jpg, roundleft.jpg, roundright.jpg, and roundbottom.jpg files to your picture host, and insert the appropriate URLs into the code. <table cellpadding="0" cellspacing="0" width="600" bgcolor="white" align="center"> <tr> <td colspan="3"> <img src="/books/2/949/1/html/2/roundtop.jpg"> </td> </tr> <tr> <td align="left" width="19" background="roundleft.jpg" width="20"> </td> <td valign="top" width="560" cellpadding="10"> <h1 style="font-family: Times Roman; color: teal; text-align: left"> Auction Title </h1> <p style="font-family: Times Roman; text-align: left"> <a href="URL1" target="_blank"> <img src="URL1" align="right" hspace="5" vspace="5" width="100; margin: 10"> </a> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <p style="font-family: Times Roman; text-align: left"> <a href="URL2" target="_blank"> <img src="URL2" align="left" hspace="5" vspace="5" width="100"> </a> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <p style="font-family: Arial; font-size: 10pt; text-align: left; font-weight: bold; color: teal; margin-bottom: 0px"> Terms of Sale </p> <p style="font-family: Arial; font-size: 10pt; text-align: left; margin-top: 0 px; color: teal"> I accept credit cards via PayPal, cashier's checks, money orders, and personal checks. (Personal checks will delay shipment for ten working days.) Will ship via USPS Priority Mail. Actual shipping charges calculated at end of auction. Insurance optional, extra. </p> <p style="font-family: Arial; font-weight: bold; margin-bottom: 0px"> <a href="http://search.ebay.com/ _W0QQsassZ[USERID]QQhtZ-1"> Click here to view my other auctions </a> </p> </td> <td align="left" width="21" background="roundright.jpg" width="20"> </td> </tr> <tr> <td colspan="3"> <img src="/books/2/949/1/html/2/roundbottom.jpg"> </td> </tr> </table> Template 10.10. Friendly Pictures and Fonts Our final template is a little different from the others in this chapter, in that it's designed to convey a homey, quite personal touch. To that end, the pictures are big and friendly, and the font (Comic Sans MS) is also a bit less professional than in the other templates. When you want to let your buyers know that you're a "small guy," just like them, this is the template to use. Figure 10.10. A less-professional-looking templatedesigned for that friendly touch. By this point, there should be nothing new or startling about what we're doing here. The double border is created by nested tables, using the dotted border style, in two different colors. There's a scrolling marquee at the top, and everything else in the template is designed to be as homey and friendly as possible. <table width="75%" style="border-style: dotted; border-width: 10; border-color: red" align="center"> <tr> <td> <table width="100%" cellpadding="20" style="border-style: dotted; border-width: 10; border-color: blue"> <tr> <td> <center> <marquee behavior="scroll" width="50%"> <p style="font-family: Comic Sans MS; font-weight: bold; font-size: 14pt; color: white"> <span style="background-color: red"> Insert your own personal tag line or slogan here </span> </p> </marquee> </center> <center> <img src="URL1" style="border-style: double; border-color: red; border-width: 3; margin-top: 10"> </center> <h1 style="font-family: Comic Sans MS; color: blue; text-align: center"> Auction Title </h1> <p style="font-family: Comic Sans MS; text-align: justified"> This is the text for the first paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <center> <img src="URL2" style="border-style: double; border-color: red; border-width: 3; margin-top: 10"> </center> <p style="font-family: Comic Sans MS; text-align: justified"> This is the text for the second paragraph of the item description. The text can be as long as you like, although 4-5 sentences is probably long enough. You don't want to make this paragraph too long for potential buyers to read. Include all the details you need, but no more than necessary. </p> <p style="font-family: Comic Sans MS; font-weight: bold; text-align: center"> <a href="http://search.ebay.com/_W0QQsassZ[USERID]QQhtZ-1"> Click here to view my other eBay auctions </a> </p> <p style="font-family: Comic Sans MS; color: blue; text-align: center; margin-left: 150; margin-right: 150; border-style: double; border-width: 3; padding: 5"> <span style="font-weight: bold; color: red"> Payment and Shipping Info </span><br> I accept credit cards via PayPal, cashier's checks, money orders, and personal checks. (Personal checks will delay shipment for ten working days.) Will ship via USPS Priority Mail. Actual shipping charges calculated at end of auction. Insurance optional, extra. </p> </td> </tr> </table> </td> </tr> </table> |
:'+scrollerheight+';overflow:hidden; background-color:'+scrollerbgcolor+'">')
eBay Auction Templates Starter Kit
ISBN: 0789735636
EAN: 2147483647
EAN: 2147483647
Year: 2007
Pages: 101
Pages: 101
Authors: Michael Miller