Adding Special Elements
| Now we'll examine a variety of special elements you can add to your auction listings. Some of these elements are more style than substance (such as the scrolling marquee); others are much more practical (such as the shipping rate calculators). Have fun with them! Special Effect 9.5. Scrolling Marquee This element is a flashy one, but it can help to draw attention to your listing. As you can see in Figure 9.5, it inserts a single-line scrolling marquee into your listing; the message in the marquee scrolls across the page, from right to left. Figure 9.5. A scrolling marquee with reverse text. This element is created via use of the HTML marquee tag. This particular marquee is formatted at 50% of the available page width, and features white text against a red background. Feel free to change the width and colors as you like; just insert the code where you want the marquee to appear, and replace Message text with your own text message. <center> <marquee behavior="scroll" width="50%"> <p style="font-family: Verdana; font-weight: bold; font-size: 14pt; color: white"> <span style="background-color: red"> Message text </span> </p> </marquee> </center> Special Effect 9.6. Size and Specification Table Many types of products can benefit from the display of specifications in tabular format. For example, if you're selling an item of clothing you can use a two-column table to present size, color, and fabric information. (Such a table is shown in Figure 9.6.) Figure 9.6. A two-column product information table. This code creates a two-column table. The table header is displayed in a single-column row, using the colspan attribute. The cells are all dark blue, with white text and a large white space between the cells. This effect is accomplished by setting the table background color to white, but the row background color to dark blue (with white borders); it's a nice touch. To add more rows to the table, just insert additional <tr> blocks. You can even add columns to the table by inserting additional <td> column codes under each <tr> row code; just remember to adjust the value of the colspan attribute accordingly. <table border="2" bordercolor="white" width="60%" cellspacing="3" cellpadding="2" bgcolor="white" align="center"> <tr bordercolor="white" bgcolor="darkblue"> <td colspan="2" align="center"> <font color="Yellow" face="Verdana"><strong> Table Title</strong></font> </td> </tr> <tr bordercolor="white" bgcolor="darkblue"> <td align="center" width="50%"> <font color="white" face="Verdana"> Specification </font> </td> <td align="center" width="50%"> <font color="white" face="Verdana"> Value </font> </td> </tr> <tr bordercolor="white" bgcolor="darkblue"> <td align="center" width="50%"> <font color="white" face="Verdana"> Specification </font> </td> <td align="center" width="50%"> <font color="white" face="Verdana"> Value </font> </td> </tr> <tr bordercolor="white" bgcolor="darkblue"> <td align="center" width="50%"> <font color="white" face="Verdana"> Specification </font> </td> <td align="center" width="50%"> <font color="white" face="Verdana"> Value </font> </td> </tr> <tr bordercolor="white" bgcolor="darkblue"> <td align="center" width="50%"> <font color="white" face="Verdana"> Specification </font> </td> <td align="center" width="50%"> <font color="white" face="Verdana"> Value </font> </td> </tr> <tr bordercolor="white" bgcolor="darkblue"> <td align="center" width="50%"> <font color="white" face="Verdana"> Specification </font> </td> <td align="center" width="50%"> <font color="white" face="Verdana"> Value </font> </td> </tr> </table> Special Effect 9.7. eBay Search BoxThis next element adds an eBay search box to your item listing, so buyers can search for other auctions items they might like directly from your item listing. The nice thing about this code is that you can use it on other web pages outside of eBay; it's a great way to put an eBay search on a personal web page. (The search box is shown in Figure 9.7.) Figure 9.7. Let potential buyers search other eBay auctions. The code for this search box uses HTML form code; users' input is fed into eBay's own search form, as specified in the <form action> code. The results are displayed on a standard eBay search results page. (Feel free, by the way, to change the border, background, and text colors in the <table> tag.) <table width="50%" style="border-style: ridge; border-width: 5px; border-color: blue; background-color: lightblue" align="center"> <tr> <td> <h3 style="font-family: Verdana; text-align: center; color: darkblue"> Search Other eBay Auctions </h3> <center> <form action="http://search.ebay.com/search/search.dll" method="get"> <input type="text" maxlength="300" name="satitle" size="20"> <input type="submit" value="Search"> </form> </center> </td> </tr> </table> Special Effect 9.8. U.S. Postal Service Shipping Rate Calculator eBay has its own shipping calculator, of course, but it doesn't display within the body of a custom auction template. You can correct this oversight by inserting your own custom shipping calculator into your template's HTML code; this particular calculator, shown in Figure 9.8, is for U.S. Postal Service shipping. When a potential buyer enters his ZIP code and clicks the Calculate button, the Postal Service's official rate page appears, with shipping rates for the various services (Priority Mail, Media Mail, and so on) listed. Figure 9.8. A shipping calculator for the U.S. Postal Service. Admittedly, this is a lot of code; some of the code creates the shipping calculator form in your listing, some of the code feeds the buyer's input to the Postal Service's shipping calculator page. You'll need to input all the data for your specific auction, including ZIPCODE (your ZIP code), POUNDS and OUNCES (the weight of the item), and the LENGTH, WIDTH, and HEIGHT of the shipping box (in inches). You can also alter the Add $1 handling to above line to reflect your own additional handling charge. <form action='http://postcalc.usps.gov/speed.asp' name=zipform target=_blank> <input type=hidden name=OZ value=ZIPCODE> <input type=hidden name=MT value=2> <input type=hidden name=M value=0> <input type=hidden name=MC value=1> <input type=hidden name=P value=POUNDS> <input type=hidden name=O value=OUNCES> <input type=hidden name=Length value=LENGTH> <input type=hidden name=Width value=WIDTH> <input type=hidden name=Height value=HEIGHT> <center> <table style="padding: 0; border-style: ridge; border-width: 5px; border-color: blue; background-color: white"> <tr> <td> <table style="padding: 4px; background-color: white"> <tr> <td> <center> <img src="/books/2/949/1/html/2/http://www.usps.com/common/images/hdr_uspsLogo.gif" alt="USPS" border="0"> </center> <p style="font-family: Verdana; font-size: 12pt; color: darkblue; font-weight: bold; text-align: center"> Calculate Shipping Costs </p> <p style="font-family: Verdana; font-size: 10pt; color: black; font-weight: bold; text-align: center"> Enter your U.S. ZIP Code: </p> <center> <input type=text size=5 maxlength=5 name=DZ> <input type=submit value=Calculate name=zipok2> </center> <p style="font-family: Verdana; color: darkblue; font-size: 8pt; font-style: italic; text-align: center"> Please add $1 handling to above. </p> </td> </tr> </table> </td> </tr> </table> <p style="font-family: Verdana; margin-top: 10pt; color: black; font-size: 10pt"> This is an estimate. Actual shipping costs may vary. </p> </center> </form> Special Effect 9.9. UPS Shipping Rate Calculator The previous effect created a Postal Service shipping rate calculatorbut what if you don't use the Postal Service for shipping? That's where the special effect shown in Figure 9.9 proves useful; it creates a similar shipping rate calculator for UPS shipping. Figure 9.9. A UPS shipping rate calculator. The code for this rate calculator is similar to the one for the Postal Service rate calculator. You have to enter the data for your specific auction, including WEIGHT, LENGTH, WIDTH, and HEIGHT (in inches), along with INSURED VALUE. You also need to enter your ZIPCODE and CITY, and edit the Add $1 handling to above line to reflect the actual handling charge you add to your auctions. <form action='http://wwwapps.ups.com/ctc/htmlTool' target=_blank> <input type=hidden name=accept_UPS_license_agreement value=yes> <input type=hidden name=nonUPS_title value='UPS Shipping Rate Calculator'> <input type=hidden name=nonUPS_body value='bgcolor=#FFFFFF'> <input type=hidden name=nonUPS_light_color value=#C0C0B0> <input type=hidden name=nonUPS_dark_color value=#B8B8A8> <input type=hidden name=nonUPS_header value="<Font face=san_serif,verdana,arial> <h1> <img src="/books/2/949/1/html/2/http://www.ups.com/membership/letter/images/logo.gif' border=0 align=left> <Font color=#885533>UPS Shipping Estimate</font><br> <Font size=+1> This is an estimate. Actual shipping costs may vary. </font> </h1>"> <input type=hidden name=14_origCountry value=US> <input type=hidden name=15_origPostal value=ZIPCODE> <input type=hidden name=origCity value="CITY"> <input type=hidden name=49_residential value=01> <input type=hidden name=47_rate_chart value="Customer Counter"> <input type=hidden name=billToUPS value=Yes> <input type=hidden name=48_container value=00> <input type=hidden name=weight_std value=lbs.> <input type=hidden name=23_weight value=WEIGHT> <input type=hidden name=length_std value=in.> <input type=hidden name=25_length value=LENGTH> <input type=hidden name=26_width value=WIDTH> <input type=hidden name=27_height value=HEIGHT> <input type=hidden name=10_action value=4> <input type=hidden name=24_value value=INSURED-VALUE> <input type=hidden name=customValue value=100> <input type=hidden name=22_destCountry value=US> <center> <table style="padding: 0; border-style: ridge; border-width: 5px; border-color: #996633; background-color: tan"> <tr> <td> <table style="padding: 4px; background-color: tan"> <tr> <td> <center> <img src="/books/2/949/1/html/2/http://www.ups.com/membership/letter/images/logo.gif" alt="UPS" border="0"> </center> <p style="font-family: Verdana; font-size: 12pt; color: #663300; font-weight: bold; text-align: center"> Calculate Shipping Costs </p> <p style="font-family: Verdana; font-size: 10pt; color: black; font-weight: bold; text-align: center"> Enter your U.S. ZIP Code: </p> <center> <input type=text name=19_destPostal size=5 maxlength=5> <input type=submit value=Calculate> </center> <p style="font-family: Verdana; color: #663300; font-size: 8pt; font-style: italic; text-align: center"> Please add $1 handling to above. </p> </td> </tr> </table> |
EAN: 2147483647
Pages: 101